Kurulum

Web sitenize Google ile oturum aç 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 alma,
2. OAuth marka bilinci oluşturma ve ayarlarını yapılandırma,
3. Google Kimlik Hizmetleri istemci kitaplığını yükleyin ve
4. İçerik Güvenliği Politikası'nı isteğe bağlı olarak ayarlayın ve
5. Çapraz Kaynak Açıcı Politikası'nı güncelleme

Google API istemci kimliğinizi alma

Web sitenizde Google Kimlik Hizmetleri'ni 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. Google Cloud ConsoleClients page açın.
2. Proje oluşturun veya seçin. Cloud Console 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önettiğiniz her proje için bu bölümdeki kalan adımları 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ürlerinden birini seçin.

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

5. İsteğe bağlı olarak, kimlik bilgileri bir JavaScript geri çağırması yerine, sizin 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'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 uymalı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.

OAuth izin ekranınızı yapılandırma

Hem Google ile oturum açma hem de tek dokunmayla kimlik doğrulama, kullanıcılara verilerine erişim isteyen uygulamayı, istenen veri türünü ve geçerli şartları bildiren bir izin ekranı içerir.

1. Branding page bölümününCloud ConsoleGoogle Auth Platform bölümünü açın.
2. İstenirse yeni oluşturduğunuz projeyi seçin.

3. Branding page 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 dokunma iletişim kutusunda gösterilmez.

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

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

   5. Uygulama ana sayfası bağlantısı: "Google ile oturum aç" kullanıcı rızası ekranında ve "Devam et" düğmesinin altındaki tek dokunuşla GDPR'ye uygun sorumluluk reddi beyanı bilgilerinde gösterilir. Yetkili bir alan adında barındırılmalıdır.

   6. Uygulama Gizlilik Politikası bağlantısı: Google ile Oturum Açma izni ekranında ve "Devam et" düğmesinin altında Tek Dokunmayla GDPR'ya uygun sorumluluk reddi beyanı bilgilerinde gösterilir. Yetkili bir alan adında barındırılmalıdır.

   7. Uygulama Hizmet Şartları bağlantısı (isteğe bağlı): Google ile Oturum Açma izin ekranında ve "Devam et" düğmesinin altında tek dokunuşla GDPR'ya uygun sorumluluk reddi beyanı bilgilerinde gösterilir. Yetkili bir alan adında barındırılmalıdır.

4. Uygulamanızın kapsamlarını yapılandırmak için Data Access page simgesine 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 kapsamlar eklemeniz gerekmez. Genel olarak, erişim gerektiğinde kapsamları artımlı olarak istemek en iyi uygulamadır.

5. "Doğrulama Durumu"nu kontrol edin. Uygulamanızın doğrulanması gerekiyorsa "Doğrulamaya Gönder" düğmesini tıklayarak uygulamanızı doğrulanması için gönderin. Ayrıntılı bilgi için OAuth doğrulama koşulları başlıklı makaleyi inceleyin.

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

Şekil 1. Chrome'da Tek Dokunma ile gösterilen OAuth izin ayarları.

İstemci kitaplığını yükleme

Google Identity Services istemci kitaplığını, kullanıcının oturum açabileceği tüm sayfalara 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üklenme hızını optimize edebilirsiniz.

Kitaplığın desteklediği yöntemlerin 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ı güvence altına almak ve siteler arası komut dosyası çalıştırma (XSS) saldırılarını önlemek için İç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ızda connect-src, frame-src, script-src, style-src veya default-src gibi bir veya daha fazla yönerge olabilir.

İGP'niz şunları içeriyorsa:

• connect-src yönergesine https://accounts.google.com/gsi/ ekleyerek bir sayfanın Google Kimlik Hizmetleri sunucu tarafı uç noktaları için üst URL'yi yüklemesine izin verin.
• frame-src yönergesini ekleyin. Bu, One Tap ve Google ile oturum açma düğmesi iframe'lerinin üst URL'sine izin vermek için https://accounts.google.com/gsi/ eklemenizi sağlar.
• script-src yönergesine, Google Kimlik Hizmetleri JavaScript kitaplığının URL'sine izin vermek için https://accounts.google.com/gsi/client ekleyin.
• style-src yönergesine https://accounts.google.com/gsi/style ekleyerek Google Kimlik Hizmetleri stil sayfalarının URL'sine izin verin.
• default-src yönergesi, kullanılması durumunda önceki yönergelerden (connect-src, frame-src, script-src veya style-src) herhangi biri belirtilmediyse geri dönüş olarak kullanılır. Bir sayfanın Google Kimlik Hizmetleri sunucu tarafı uç noktaları için üst URL'yi yüklemesine izin vermek üzere https://accounts.google.com/gsi/ ekleyin.

connect-src kullanırken tek tek GIS URL'lerini listelemeyin. Bu, CBS güncellendiğinde hataları en aza indirmeye yardımcı olur. Örneğin, https://accounts.google.com/gsi/status eklemek yerine GIS üst URL'sini https://accounts.google.com/gsi/ kullanın.

Bu örnek yanıt üstbilgisi, Google Kimlik Hizmetleri'nin başarıyla yüklenip 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 pop-up'ları başarıyla oluşturabilmesi için Cross-Origin-Opener-Policy (COOP) üzerinde değişiklik yapılması 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 başlığını ayarlayın:

• same-origin ve
• same-origin-allow-popups dahil edin.

Uygun başlığın ayarlanmaması, pencereler arasındaki iletişimi keserek boş bir pop-up pencereye veya benzer hatalara yol açar.