Google ile Oturum Açma özelliğinden taşıma

Bu kılavuz, JavaScript kitaplıklarını önceki Google ile Oturum Açma platformu kitaplığından kimlik doğrulama için yeni Google Kimlik Hizmetleri kitaplığına başarıyla taşımak üzere gerekli değişiklikleri ve adımları anlamanıza yardımcı olur.

İstemciniz, JavaScript için Google API İstemci Kitaplığı veya yetkilendirme amacıyla daha önceki kitaplıkları kullanıyorsa daha fazla bilgi için Google Kimlik Hizmetlerine Geçiş başlıklı makaleye göz atın.

Kimlik doğrulama ve yetkilendirme

Kimlik doğrulama, bir kullanıcının kim olduğunu belirler ve genellikle kullanıcı kaydı veya oturum açma olarak adlandırılır. Yetkilendirme, veri veya kaynaklara erişim izni verme ya da erişimi reddetme işlemidir. Örneğin, uygulamanız kullanıcının Google Drive'ına erişmek için kullanıcıdan izin ister.

Önceki Google ile Oturum Açma platform kitaplığı gibi yeni Google Kimlik Hizmetleri kitaplığı da hem kimlik doğrulama hem de yetkilendirme işlemlerini destekleyecek şekilde oluşturulmuştur.

Ancak yeni kitaplık, geliştiricilerin Google Hesaplarını uygulamanıza entegre etme karmaşıklığını azaltmak için iki işlemi birbirinden ayırır.

Kullanım alanınız yalnızca kimlik doğrulama ile ilgiliyse bu sayfayı okumaya devam edin.

Kullanım durumunuz yetkilendirme içeriyorsa uygulamanızın yeni ve iyileştirilmiş API'leri kullandığından emin olmak için Kullanıcı yetkilendirmenin işleyiş şekli ve Google Kimlik Hizmetleri'ne Taşıma bölümlerini okuyun.

Neler değişti?

Yeni Google Kimlik Hizmetleri kitaplığı, kullanıcılar için çok sayıda kullanılabilirlik iyileştirmesi sunar. Bu özelliğin öne çıkan özellikleri şunlardır:

• Daha az sayıda bağımsız adım sunan One Tap ve Otomatik oturum açma akışları,
• kullanıcı kişiselleştirme içeren yenilenmiş bir oturum açma düğmesi,
• Web genelinde tutarlı marka bilinci oluşturma ve tek tip oturum açma davranışı, marka bilinirliği ve güveni artırır.
• İçeriğe hızlıca ulaşmalarını sağlar. Kullanıcılar, önce giriş yapmak ya da hesap sayfasını ziyaret etmek zorunda, doğrudan sitenizin herhangi bir yerinden kaydolabilir ve oturum açabilir.

Geliştiricilere odaklandığımız nokta, karmaşıklığı azaltmak, güvenliği artırmak ve entegrasyonunuzu mümkün olduğunca hızlı hale getirmektir. Bu iyileştirmelerden bazıları şunlardır:

• Kullanıcı oturum açma bilgilerini yalnızca HTML kullanarak sitenizin statik içeriğine ekleme seçeneği,
• kimlik doğrulamasının yetkilendirmeden ve kullanıcı verilerinin paylaşımından ayrıldığından, OAuth 2.0 entegrasyonunun karmaşıklığı artık kullanıcıların sitenizde oturum açması için gerekli değildir,
• hem pop-up hem de yönlendirme modları desteklenmeye devam etmektedir ancak Google'ın OAuth 2.0 altyapısı artık arka uç sunucunuzun giriş uç noktasına yönlendirmektedir
• eski Google Identity ve Google API JavaScript kitaplıklarının özelliklerini tek bir yeni kitaplıkta birleştirdi.
• oturum açma yanıtlarında artık bir Promise kullanıp kullanmayacağınıza karar verebilirsiniz. Alıcı stilindeki işlevlerle yönlendirme, kolaylık sağlamak için kaldırılmıştır.

Oturum açma işlemini taşıma örneği

Mevcut Google ile Oturum Açma düğmesinden geçiş yapıyorsanız ve yalnızca kullanıcıların sitenizde oturum açmasını istiyorsanız en basit değişiklik, yeni kişiselleştirilmiş düğmeyi güncellemektir. Bu, JavaScript kitaplıklarını değiştirerek ve kod tabanınızı yeni bir oturum açma nesnesi kullanacak şekilde güncelleyerek gerçekleştirilebilir.

Kitaplıklar ve yapılandırma

Eski Google Oturum Açma platform kitaplığı (apis.google.com/js/platform.js) ve JavaScript için Google API'leri istemci kitaplığı: gapi.client, artık kullanıcı kimlik doğrulaması ve yetkilendirme için gerekli değildir. Bu hizmetlerin yerini, tek bir yeni Google Kimlik Hizmetleri JavaScript kitaplığı aldı: accounts.google.com/gsi/client.

Oturum açmak için kullanılan önceki üç JavaScript modülü olan api, client ve platform, apis.google.com üzerinden yüklenir. Önceki kitaplığın sitenize dahil edebileceği konumları belirlemenize yardımcı olması için genellikle:

• varsayılan oturum açma düğmesi apis.google.com/js/platform.js uygulamasını yükler,
• bir özel düğme grafiği apis.google.com/js/api:client.js yüklenir ve
• gapi.client doğrudan kullanımı apis.google.com/js/api.js.

Çoğu durumda, mevcut web uygulaması İstemci Kimliği kimlik bilgilerinizi kullanmaya devam edebilirsiniz. Taşıma işleminizin bir parçası olarak, OAuth 2.0 Politikalarımızı incelemenizi ve Google API Konsolu'nu kullanarak aşağıdaki istemci ayarlarını onaylamanızı ve gerekirse güncellemenizi öneririz:

• test ve üretim uygulamalarınız ayrı projeler kullanır ve kendi istemci kimliklerine sahiptir.
• OAuth 2.0 İstemci Kimliği Türü "Web uygulaması"dır ve
• HTTPS, Yetkilendirilmiş JavaScript kaynakları ve yönlendirme URI'leri için kullanılır.

Etkilenen kodu belirleyin ve test edin

Hata ayıklama çerezi, etkilenen kodu bulmaya ve kullanımdan kaldırma sonrası davranışı test etmeye yardımcı olabilir.

Büyük veya karmaşık uygulamalarda, gapi.auth2 modülünün kullanımdan kaldırılmasından etkilenen tüm kodları bulmak zor olabilir. Yakında kullanımdan kaldırılacak özelliklerin mevcut kullanımını konsola kaydetmek için G_AUTH2_MIGRATION çerezinin değerini informational olarak ayarlayın. İsteğe bağlı olarak, oturum depolama alanına giriş yapmak için iki nokta üst üste ve ardından anahtar değeri ekleyebilirsiniz. Oturum açıldıktan ve kimlik bilgileri alındıktan sonra, toplanan günlükleri daha sonra analiz edilmek üzere bir arka uca gönderin. Örneğin informational:showauth2use, kaynağı ve URL'yi showauth2use adlı oturum depolama anahtarına kaydeder.

gapi.auth2 modülü artık yüklenmediğinde uygulama davranışını doğrulamak için G_AUTH2_MIGRATION çerezinin değerini enforced olarak ayarlayın. Bu sayede, kullanımdan kaldırma sonrası davranış yaptırım tarihinden önce test edilebilir.

Olası G_AUTH2_MIGRATION çerez değerleri:

• enforced gapi.auth2 modülünü yüklemeyin.
• informational Kullanımdan kaldırılan özelliklerin kullanımını JS konsoluna kaydedin. İsteğe bağlı bir anahtar adı ayarlandığında da oturum depolama alanına günlüğe kaydedilir: informational:key-name.

Kullanıcı etkisini en aza indirmek için bu çerezi üretim ortamlarında kullanmadan önce geliştirme ve test aşamasında yerel olarak ayarlamanız önerilir.

HTML ve JavaScript

Bu yalnızca kimlik doğrulama amaçlı oturum açma senaryosunda, örnek kod ve mevcut Google ile Oturum Açma düğmesinin işlemleri gösterilmektedir. Kimlik doğrulama yanıtının JavaScript geri çağırması veya arka uç sunucunuzun giriş uç noktasına güvenli yönlendirme ile işlenme şeklindeki farklılıkları görmek için Pop-up veya Yönlendirme modu arasından seçim yapın.

Önceki yöntem

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
  </body>
</html>

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
    <script>
      function handleCredentialResponse(googleUser) {
        ...
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://yourbackend.example.com/tokensignin');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
          console.log('Signed in as: ' + xhr.responseText);
        };
        xhr.send('idtoken=' + id_token);
      }
    </script>
  </body>
</html>

Yeni yöntem

Yeni kitaplığı yalnızca kimlik doğrulama amaçlı oturum açma senaryosunda kullanmak için Pop-up veya Yönlendirme modundan birini seçin ve giriş sayfanızdaki mevcut uygulamanızı değiştirmek için kod örneğini kullanın.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-callback="handleCredentialResponse">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-ux_mode="redirect"
         data-login_uri="https://www.example.com/your_login_endpoint">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

Yalnızca kimlik doğrulama amaçlı olan bu örnekte yeni accounts.google.com/gsi/client kitaplığı, g_id_signin sınıfı ve g_id_onload nesnesi, önceki apis.google.com/js/platform.js kitaplığının ve g-signin2 nesnesinin yerini alır.

Örnek kod, yeni kişiselleştirilmiş düğmeyi oluşturmanın yanı sıra yeni One Tap pop-up'ını da gösterir. Kişiselleştirilmiş düğmeyi nerede gösterdiğinizde, kayıt ve oturum açma sırasında kullanıcılarla ilgili sorunları en aza indirmek için One Tap pop-up'ını da görüntülemenizi önemle tavsiye ederiz.

Oturum açma zorluğu nedeniyle önerilmese de yeni kişiselleştirilmiş düğme, aynı anda One Tap iletişim kutusu görüntülenmeden tek başına gösterilebilir. Bunun için data-auto_prompt özelliğini false olarak ayarlayın.

HTML ve JavaScript API'leri

Önceki örnek, web sitenize oturum açma bilgilerini eklemek için yeni HTML API'nin nasıl kullanılacağını gösterir. Alternatif olarak, işlevsel olarak eşdeğer JavaScript API'sini kullanabilir veya HTML ve JavaScript API'lerini sitenizde karıştırıp eşleştirebilirsiniz.

Geri çağırma türü gibi düğme özelleştirme seçeneklerini ve renk, boyut, şekil, metin ve tema gibi özellikleri etkileşimli olarak görüntülemek için Kod oluşturma aracımızı inceleyin. Farklı seçenekleri hızlı bir şekilde karşılaştırmak ve sitenizde kullanmak üzere HTML snippet'leri oluşturmak için kullanılabilir.

One Tap ile dilediğiniz sayfadan oturum açın

One Tap, kullanıcıların sitenize kaydolmalarına veya oturum açmalarına olanak tanıyan yeni ve kullanımı kolay bir yöntemdir. Sitenizdeki herhangi bir sayfadan kullanıcıların doğrudan oturum açmasına olanak tanır ve kullanıcıların özel bir giriş sayfasını ziyaret etme ihtiyacını ortadan kaldırır. Başka bir deyişle bu, kullanıcılara giriş sayfanız dışındaki sayfalardan kaydolma ve oturum açma esnekliği vererek kaydolma ve oturum açma sorunlarını azaltır.

Herhangi bir sayfadan oturum açmayı etkinleştirmek için g_id_onload öğesini paylaşılan bir üstbilgiye, altbilgiye veya sitenizin tamamında yer alan başka bir nesneye eklemenizi öneririz.

Ayrıca, kişiselleştirilmiş oturum açma düğmesini yalnızca giriş veya kullanıcı hesabı yönetimi sayfalarınızda gösteren g_id_signin özelliğini eklemenizi öneririz. Diğer birleşik kimlik sağlayıcı düğmelerinin ve kullanıcı adı ve şifre giriş alanlarının yanında düğmeyi görüntüleyerek kullanıcılara kaydolma veya oturum açma seçenekleri sunun.

Jeton yanıtı

Kullanıcı oturum açma işlemi artık OAuth 2.0 yetkilendirme kodlarını, erişim jetonlarını veya yenileme jetonlarını anlamanızı ya da bunlarla çalışmanızı gerektirmiyor. Bunun yerine, oturum açma durumunu ve kullanıcı profilini paylaşmak için JSON Web Token (JWT) Kimlik Jetonu kullanılır. Daha da basitleştirmek gerekirse, kullanıcı profili verileriyle çalışmak için artık "getter" stil erişimci yöntemlerini kullanmanız gerekmez.

Google tarafından imzalanmış güvenli bir JWT kimliği jeton kimlik bilgisi şu iki seçenekten biriyle döndürülür:

• Pop-up modunda kullanıcının tarayıcı tabanlı JavaScript geri çağırma işleyicisine veya
• Google ile Oturum Aç düğmesi ux_mode redirect olarak ayarlandığında, giriş uç noktanıza bir Google yönlendirmesi üzerinden arka uç sunucunuza yönlendirme yapabilirsiniz.

Her iki durumda da aşağıdakileri kaldırarak mevcut geri arama işleyicilerinizi güncelleyin:

• googleUser.getBasicProfile() çağrıları,
• BasicProfile referansları ve ilişkili getId(), getName(), getGivenName(), getFamilyName(), getImageUrl(), getEmail() yöntemleri ve
• AuthResponse nesnesinin kullanımı.

Bunun yerine, kullanıcı profili verileriyle çalışmak için yeni JWT CredentialResponse nesnesindeki credential alt alanlarına doğrudan referanslar kullanın.

Ayrıca, yalnızca Yönlendirme modunda Siteler Arası İstek Sahtekarlığı (CSRF) ve Arka uç sunucunuzdaki Google Kimliği jetonunu doğrulama'yı engellediğinizden emin olun.

Kullanıcıların sitenizle nasıl etkileşimde bulunduğunu daha iyi anlamak amacıyla, CredentialResponse'taki select_by alanı, kullanıcı rızası sonucunu ve kullanılan belirli oturum açma akışını belirlemek için kullanılabilir.

Kullanıcı izni ve izni iptal etme

Bir kullanıcı web sitenizde ilk kez oturum açtığında Google, kullanıcıdan hesap profilini uygulamanızla paylaşması için izin ister. Kullanıcı profili, yalnızca izin verdikten sonra kimlik jetonu kimlik bilgisi yükü içinde uygulamanızla paylaşılır. Bu profile erişimi iptal etmek, daha önceki oturum açma kitaplığındaki erişim jetonunu iptal etmeye eşdeğerdir.

Kullanıcılar https://myaccount.google.com/permissions adresini ziyaret ederek izinleri iptal edebilir ve uygulamanızın Google Hesapları ile bağlantısını kesebilir. Alternatif olarak, uyguladığınız bir API çağrısını tetikleyerek bunların doğrudan uygulamanızla bağlantısı kesilebilir. Önceki disconnect yöntemi, yeni revoke yöntemiyle değiştirilmiştir.

Bir kullanıcı, platformunuzdaki hesabını sildiğinde uygulamanızın Google Hesabı ile olan bağlantısını kesmek için revoke uygulamasını kullanmanız önerilir.

Daha önce auth2.signOut(), uygulamanızdaki kullanıcı oturumunu kapatma sürecini yönetmeye yardımcı olmak için kullanılabilmekteydi. Herhangi bir auth2.signOut() kullanımı kaldırılmalı ve uygulamanız kullanıcı başına oturum durumunu ve oturum açma durumunu doğrudan yönetmelidir.

Oturum durumu ve Dinleyiciler

Yeni kitaplık, web uygulamanızın oturum açma durumunu veya oturum durumunu korumaz.

Uygulamanızın oturum durumu ve oturum açma durumu, Google Hesabı'nın oturum açma durumu ile birbirinden farklı kavramlardır.

Kullanıcının Google Hesabı'ndaki oturum açma durumu ve uygulamanız birbirinden bağımsızdır. Tek fark, kullanıcının kimliğini başarıyla doğrulayıp Google Hesabında oturum açtığını bildiğiniz oturum açma anıdır.

Google ile Oturum Açma, One Tap veya Otomatik oturum açma özellikleri sitenize eklendiğinde, kullanıcılar aşağıdakileri yapabilmek için öncelikle Google Hesaplarında oturum açmalıdır:

• sitenize ilk kez kaydolurken veya sitenizde oturum açarken kullanıcı profillerini paylaşma izni vermelerini,
• oturum açmak için kullanabilirsiniz.

Kullanıcılar web sitenizde etkin ve oturumlarını açık tutmaya devam ederken oturumlarını açık tutabilir, kapatabilir veya farklı bir Google Hesabı'na geçebilirler.

Artık web uygulamanızın kullanıcılarının oturum açma durumunu doğrudan yönetmek sizin sorumluluğunuzdadır. Google ile Oturum Açma, daha önce Kullanıcının oturum durumunu izleme konusunda yardımcı oluyordu.

auth2.attachClickHandler() öğesine ve kayıtlı geri çağırma işleyicilerine yapılan tüm referansları kaldırın.

Önceden Dinleyiciler, kullanıcıların Google Hesaplarında oturum açma durumundaki değişiklikleri paylaşmak için kullanılıyordu. Dinleyiciler artık desteklenmiyor.

listen(), auth2.currentUser ve auth2.isSignedIn referanslarını kaldırın.

kurabiyeler

Google ile Oturum Açma özelliği, çerezleri sınırlı bir şekilde kullanır. Bu çerezlerin açıklaması aşağıda verilmiştir. Google tarafından kullanılan diğer çerez türleri hakkında daha fazla bilgi için Google, çerezleri nasıl kullanır? bölümüne bakın.

Önceki Google ile Oturum Açma Platform Kitaplığı tarafından ayarlanan G_ENABLED_IDPS çerezi artık kullanılmamaktadır.

Yeni Google Kimlik Hizmetleri kitaplığı, yapılandırma seçeneklerinize bağlı olarak bu web alanları arası çerezleri isteğe bağlı olarak ayarlayabilir:

• g_state, kullanıcı oturumu kapatma durumunu depolar ve One Tap pop-up veya Otomatik oturum açma kullanılırken ayarlanır.

• g_csrf_token, CSRF saldırılarını önlemek için kullanılan ve giriş uç noktanız çağrıldığında ayarlanan bir çift gönderme çerezidir. Giriş URI'nızın değeri açıkça ayarlanabilir veya geçerli sayfanın URI'sı varsayılan olabilir. Giriş uç noktanız, aşağıdakiler kullanılırken bu koşullar altında çağrılabilir:

  • data-ux_mode=redirect ile veya data-login_uri ayarlandığında HTML API ya da

  • One Tap veya Otomatik oturum açma özelliğini görüntülemek için google.accounts.id.prompt() kullanılmıyorsa ux_mode=redirect özellikli JavaScript API.

Çerezleri yöneten bir hizmetiniz varsa taşıma işlemi tamamlandığında iki yeni çerezi eklediğinizden ve önceki çerezi kaldırdığınızdan emin olun.

Birden fazla alan veya alt alan yönetiyorsanız g_state çereziyle çalışma konusunda daha fazla talimat için Alt Alanlarda Tek Dokunmayla Görüntülü Reklam Ağı bölümüne bakın.

Kullanıcı oturum açma işlemi için nesne taşıma referansı