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. 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ö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. bölümünün Google Auth Platform bölümünü 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 dokunma iletişim kutusunda gösterilmez.

   3. Destek e-postası: Kullanıcı desteği için izin ekranında ve Google Workspace yöneticilerine gösterilir. Bu yöneticiler, kullanıcıları için uygulamanıza erişimi değerlendirir. 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. Yetkilendirilmiş alanlar: Google, sizi ve kullanıcılarınızı korumak için yalnızca OAuth kullanarak kimlik doğrulaması yapan 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 izni ekranında ve "Devam et" düğmesinin altında tek dokunuşla GDPR'a uygun 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 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 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ğ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

1.şekil 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. One Tap ve Google ile oturum açma düğmesi iframe'lerinin üst URL'sine izin vermek için 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, Google Kimlik Hizmetleri stil sayfalarının URL'sine izin vermek için https://accounts.google.com/gsi/style ekleyin.
• 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/ ekleyin.

connect-src kullanırken tek tek GIS URL'lerini listelemeyin. Bu, CBS güncellenirken 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 üstbilgisini 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.