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 markalamasını 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 Console'un Clients page (Müşteriler sayfası) bölümünü açın.
2. Cloud Console projesi 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ö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 nitelikli ana makine 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 kullanıcı rızası ekranınızı yapılandırma

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

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

3. Markalama 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 kullanıcı rızası ekranında gösterilir. Logo, Google ile oturum açma kullanıcı rızası ekranında ve hesap ayarlarında gösterilir ancak One Tap iletişim kutusunda gösterilmez.

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

   4. Yetkilendirilmiş alanlar: Google, sizi ve kullanıcılarınızı korumak için yalnızca OAuth kullanarak kimlik doğrulayan uygulamaların Yetkilendirilmiş 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 kullanıcı rızası ekranında ve "Devam et" düğmesinin altında GDPR'ye uygun One Tap sorumluluk reddi beyanı bilgileri 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 kullanıcı rızası ekranında ve "Devam et" düğmesinin altında One-Tap GDPR'ye 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 Veri Erişimi sayfasına 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ğrulamaya 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 One Tap ile gösterilen OAuth izin ayarları.

İstemci kitaplığını yükleme

Google Kimlik Hizmetleri 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üvenceye 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.

CSP'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 https://accounts.google.com/gsi/client ekleyerek Google Kimlik Hizmetleri JavaScript kitaplığının URL'sine izin verin.
• style-src yönergesine, Google Kimlik Hizmetleri stil sayfalarının URL'sine izin vermek için style-src ekleyin.https://accounts.google.com/gsi/style
• default-src yönergesi, kullanılıyorsa önceki yönergelerden (connect-src, frame-src, script-src veya style-src) herhangi biri belirtilmediğinde yedek 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/ yönergesini ekleyin.

connect-src kullanırken tek tek GIS URL'lerini listelemeyin. Bu sayede, Coğrafi Bilgi Sistemi güncellenirken hatalar en aza indirilir. Ö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 başlığı, 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.

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