Kurulum

Web sitenize Google ile oturum açma düğmesi veya One Tap ve Otomatik Oturum Açma istemleri eklemek için öncelikle şunları yapmanız gerekir:

1. OAuth 2.0 istemci kimliği edinin,
2. OAuth markasını ve ayarlarını yapılandırın,
3. Google Kimlik Hizmetleri istemci kitaplığını yükleyin ve
4. isteğe bağlı olarak İçerik Güvenliği Politikası'nı ayarlayabilir ve
5. Çapraz Kaynak Açıcı Politikası'nı güncelleme

Not: Google ile oturum açma özelliğini yapılandırmak ve arka uçta kimlik jetonlarını doğrulamak için bir istemci kimliğiniz olmalıdır. İstemci kimliği aşağıdaki örnekteki gibi görünür: 1234567890-abc123def456.apps.googleusercontent.com

Google API istemci kimliğinizi alma

Google Kimlik Hizmetleri'ni web sitenizde etkinleştirmek için öncelikle bir Google API istemci kimliği oluşturmanız gerekir. Bunun için aşağıdaki adımları uygulayın:

1. 'ın bölümünü açın.
2. Proje oluşturun veya seçin. Google ile oturum açma düğmesi veya Google One Tap için zaten bir projeniz varsa mevcut projeyi ve web istemcisi kimliğini kullanın. Üretim uygulamaları oluştururken birden fazla proje gerekebilir. Yönediğiniz her proje için bu bölümün kalan adımlarını tekrarlayın.
3. Yeni bir istemci kimliği oluşturmak için İstemci oluştur'u tıklayın ve Uygulama türü için Web uygulaması'nı seçin. Mevcut bir istemci kimliğini kullanmak için Web uygulaması türünden birini seçin.

4. Web sitenizin URI'sini Yetkilendirilmiş JavaScript kaynakları'na ekleyin. URI yalnızca şemayı ve tam nitelikli ana makine adını içerir. Örneğin, https://www.example.com.

   Önemli Nokta: Yerel testler veya geliştirme için hem http://localhost hem de http://localhost:<port_number> ekleyin
   Önemli Nokta: Google One Tap yalnızca HTTPS alanlarında gösterilebilir.

5. İsteğe bağlı olarak, kimlik bilgileri bir JavaScript geri çağırması yerine barındırdığınız bir uç noktaya yönlendirme kullanılarak döndürülebilir. Bu durumda, yönlendirme URI'lerinizi Yetkilendirilmiş yönlendirme URI'leri bölümüne ekleyin. Yönlendirme URI'leri şemayı, tam nitelikli ana makine adını ve yolu içerir ve yönlendirme URI'si doğrulama kurallarına uygun olmalıdır. Örneğin, https://www.example.com/auth-receiver.

data-client_id veya client_id alanlarını kullanarak istemci kimliğini web uygulamanıza ekleyin.

Önemli Bilgi: http ve localhost kullanarak test yaparken web uygulamanızdaki Referrer-Policy başlığını Referrer-Policy: no-referrer-when-downgrade olarak ayarlayın.

OAuth kullanıcı rızası ekranınızı yapılandırma

Hem Google ile oturum açma hem de Tek Dokunuş kimlik doğrulama, kullanıcılara verilerine erişim isteyen uygulamayı, hangi tür verilerin istendiğini ve geçerli şartları bildiren bir izin ekranı içerir.

1. 'ın Google Auth Platform bölümündeki 'u açın.
2. İstenirse yeni oluşturduğunuz projeyi seçin.

3. sayfasında formu doldurun ve "Kaydet" düğmesini tıklayın.

   1. Uygulama adı: İzin isteyen uygulamanın adı. Ad, uygulamanızı doğru bir şekilde yansıtmalı ve kullanıcıların başka yerlerde gördüğü uygulama adıyla tutarlı olmalıdır.

   2. Uygulama logosu: Bu resim, kullanıcıların uygulamanızı tanımasına yardımcı olmak için izin ekranında gösterilir. Logo, Google ile oturum açma izin ekranında ve hesap ayarlarında gösterilir ancak Tek Dokunuş iletişim kutusunda gösterilmez.

   3. Destek e-postası: Kullanıcı desteği için izin ekranında ve kullanıcıları için uygulamanıza erişimi değerlendiren G Suite yöneticilerine gösterilir. Bu e-posta adresi, kullanıcı uygulama adını tıkladığında Google ile oturum açma izin ekranında gösterilir.

   4. Yetkilendirilen alanlar: Google, sizi ve kullanıcılarınızı korumak için yalnızca OAuth'u kullanarak kimlik doğrulaması yapan uygulamaların Yetkilendirilen Alanları kullanmasına izin verir. Uygulamalarınızın bağlantıları, Yetkili Alanlar'da barındırılmalıdır. Daha fazla bilgi edinin.

   5. Uygulama ana sayfası bağlantısı: Google ile oturum açma kullanıcı rızası ekranında ve "Böyle devam et" düğmesinin altındaki tek dokunuşla GDPR uyumlu sorumluluk reddi beyanında gösterilir. Yetkili bir alanda barındırılmalıdır.

   6. Uygulama Gizlilik Politikası bağlantısı: Google ile oturum açma izin ekranında ve "Böyle devam et" düğmesinin altındaki Tek Dokunuşla GDPR uyumlu sorumluluk reddi beyanı bilgilerinde gösterilir. Yetkili bir alanda barındırılmalıdır.

   7. Uygulama Hizmet Şartları bağlantısı (İsteğe bağlı): Google ile oturum açma izni ekranında ve Tek Dokunuşla GDPR uyumlu sorumluluk reddi beyanı bilgilerinin altında gösterilir. Yetkili bir alanda barındırılmalıdır.

4. Uygulamanızın kapsamlarını yapılandırmak için bölümüne gidin.

   1. Google API'leri için kapsamlar: Kapsamlar, uygulamanızın kullanıcınızın gizli verilerine erişmesine olanak tanır. Kimlik doğrulama için varsayılan kapsam (e-posta, profil, openid) yeterlidir. Hassas kapsam eklemeniz gerekmez. Genellikle en iyi uygulama, erişim gerektiğinde kapsamları kademeli olarak istemektir.

5. "Doğrulama Durumu"nu kontrol edin. Başvurunuzun doğrulanması gerekiyorsa başvurunuzu doğrulamaya göndermek için "Doğrulama İçin Gönder" düğmesini tıklayın. Ayrıntılar için OAuth doğrulama koşullarına göz atın.

Oturum açma sırasında OAuth ayarlarının gösterilmesi

FedCM ile One Tap

Chrome'da kullanıcı izni sırasında üst düzey Yetkili alan gösterilir. Yalnızca çapraz kaynaklı ancak aynı sitedeki iFrame'lerde One Tap'in kullanılması desteklenen bir yöntemdir.

FedCM olmadan One Tap

Uygulama adı, kullanıcı rızası sırasında gösterilir.

Şekil 1. Chrome'da Tek Dokunuş tarafından görüntülenen OAuth izin ayarları.

İstemci kitaplığını yükleme

Kullanıcıların oturum açabileceği tüm sayfalara Google Identity Services istemci kitaplığını yüklediğinizden emin olun. Aşağıdaki kod snippet'ini kullanın:

<script src="https://accounts.google.com/gsi/client" async></script>

Komut dosyasını async özelliğiyle yüklerseniz sayfalarınızın yükleme hızını optimize edebilirsiniz.

Kitaplığın desteklediği yöntem ve özelliklerin listesi için HTML ve JavaScript API referanslarına bakın.

İçerik Güvenliği Politikası

İsteğe bağlı olsa da uygulamanızın güvenliğini sağlamak ve siteler arası komut dosyası çalıştırma (XSS) saldırılarını önlemek için bir İçerik Güvenliği Politikası kullanmanız önerilir. Daha fazla bilgi edinmek için İGP'ye Giriş ve İGP ve XSS başlıklı makalelere bakın.

İçerik Güvenliği Politikanız connect-src, frame-src, script-src, style-src veya default-src gibi bir veya daha fazla yönerge içerebilir.

İGP'niz aşağıdakileri içeriyorsa:

• connect-src yönergesine https://accounts.google.com/gsi/ ekleyin. Böylece sayfa, Google Identity Services sunucu tarafı uç noktalarının üst URL'sini yükleyebilir.
• frame-src yönergesine https://accounts.google.com/gsi/ ekleyin.
• script-src yönergesine https://accounts.google.com/gsi/client ekleyerek Google Kimlik Hizmetleri JavaScript kitaplığının URL'sine izin verin.
• style-src yönergesine https://accounts.google.com/gsi/style ekleyin.
• default-src yönergesi (kullanılırsa) önceki yönergelerden (connect-src, frame-src, script-src veya style-src) herhangi biri belirtilmezse yedek olarak kullanılır. Bir sayfanın Google Identity Services sunucu tarafı uç noktalarının üst URL'sini yüklemesine izin vermek için https://accounts.google.com/gsi/ ekleyin.

connect-src kullanırken ayrı ayrı Coğrafi Bilgi Sistemi URL'leri listelemekten kaçının. Bu, Coğrafi Bilgi Sistemi güncellenirken hataları en aza indirmeye yardımcı olur. Örneğin, https://accounts.google.com/gsi/status yerine Coğrafi Bilgi Sistemi üst URL'sini https://accounts.google.com/gsi/ kullanın.

Bu örnek yanıt üstbilgisi, Google Kimlik Hizmetleri'nin başarıyla yüklenmesine ve yürütülmesine olanak tanır:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

Çapraz Kaynak Açıcı Politikası

Google ile oturum açma düğmesi ve Google One Tap'in başarılı bir şekilde pop-up oluşturması için Cross-Origin-Opener-Policy (COOP) dosyanızda değişiklik yapmanız gerekebilir.

FedCM etkinleştirildiğinde tarayıcı pop-up'ları doğrudan oluşturur ve herhangi bir değişiklik yapılması gerekmez.

Ancak FedCM devre dışı bırakıldığında COOP üstbilgisini ayarlayın:

• same-origin ve
• same-origin-allow-popups dahildir.

Doğru başlığı ayarlamamak, pencereler arasındaki iletişimi keserek boş bir pop-up pencere veya benzer hatalara neden olur.