Google ile Oturum Açma'dan geçiş yapın

Bu kılavuz, Google ile Oturum Açma platformu kitaplığındaki JavaScript kitaplıklarını kimlik doğrulama için daha yeni olan Google Kimlik Hizmetleri kitaplığına başarılı bir şekilde taşımak için gerekli değişiklikleri ve adımları anlamanıza yardımcı olur.

İstemciniz JavaScript için Google API istemci kitaplığını veya yetkilendirme için diğer eski kitaplıkları kullanıyorsa daha fazla bilgi için Google Kimlik Hizmetleri'ne geçiş başlıklı makaleyi inceleyin.

Kimlik doğrulama ve yetkilendirme

Kimlik doğrulama, kullanıcının kim olduğunu belirler ve genellikle kullanıcı kaydı veya oturum açma olarak adlandırılır. Yetkilendirme, verilere 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ının iznini ister.

Yeni Google Kimlik Hizmetleri kitaplığı, önceki Google ile Oturum Açma platform kitaplığı gibi hem kimlik doğrulama hem de yetkilendirme süreçlerini destekleyecek şekilde oluşturulmuştur.

Ancak daha yeni kitaplık, geliştiricilerin Google Hesaplarını uygulamanıza entegre etme sürecini basitleştirmek için bu iki işlemi ayırır.

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

Kullanım alanınızda yetkilendirme varsa uygulamanızın yeni ve geliştirilmiş API'leri kullandığından emin olmak için Kullanıcı yetkilendirmesi nasıl çalışır? ve Google Kimlik Hizmetleri'ne geçiş başlıklı makaleleri okuyun.

Neler değişti?

Kullanıcılar için yeni Google Kimlik Hizmetleri kitaplığı, birçok kullanılabilirlik iyileştirmesi sunar. Öne çıkan özellikler:

• Daha az adım içeren yeni, kolay One Tap ve otomatik oturum açma akışları,
• Kullanıcı kişiselleştirmesi içeren yenilenmiş bir oturum açma düğmesi,
• Web'de tutarlı markalama ve tek tip oturum açma davranışı, anlayışı ve güveni artırır.
• İçeriğe hızlıca ulaşma: Kullanıcılar, önce giriş veya hesap sayfasını ziyaret etmeleri gerekmeden sitenizin herhangi bir yerinden doğrudan kaydolabilir ve giriş yapabilir.

Geliştiriciler için odak noktamız 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:

• Yalnızca HTML kullanarak sitenizin statik içeriğine kullanıcı oturum açma özelliği ekleme seçeneği,
• Oturum açma kimlik doğrulamasının yetkilendirmeden ve kullanıcı verilerinin paylaşımından ayrılması nedeniyle, kullanıcıların sitenizde oturum açması için artık OAuth 2.0 entegrasyonunun karmaşıklığına gerek yoktur.
• Hem pop-up hem de yönlendirme modları desteklenmeye devam ediyor ancak Google'ın OAuth 2.0 altyapısı artık arka uç sunucunuzun giriş uç noktasına yönlendiriyor.
• Önceki Google Kimlik ve Google API JavaScript kitaplıklarının her ikisindeki özelliklerin tek bir yeni kitaplıkta birleştirilmesi,
• Oturum açma yanıtları için artık Promise kullanıp kullanmayacağınıza karar verebilirsiniz. Getter tarzı işlevler aracılığıyla yönlendirme, basitlik için kaldırıldı.

Oturum açma geçişi ö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üğmeye güncelleme yapmaktır. Bu, JavaScript kitaplıklarını değiştirerek ve kod tabanınızı yeni bir oturum açma nesnesi kullanacak şekilde güncelleyerek yapılabilir.

Kitaplıklar ve yapılandırma

Daha önceki Google ile 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ğrulama ve yetkilendirme için gerekli değildir. Bu kitaplıkların yerini tek bir yeni Google Kimlik Hizmetleri JavaScript kitaplığı aldı: accounts.google.com/gsi/client.

Oturum açma için kullanılan önceki üç JavaScript modülü (api, client ve platform) apis.google.com adresinden yüklenir. Önceki kitaplığın sitenize dahil edilmiş olabileceği yerleri belirlemenize yardımcı olmak için genellikle:

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

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

• Test ve üretim uygulamalarınız ayrı projeler kullanıyor ve kendi istemci kimliklerine sahipse,
• OAuth 2.0 istemci kimliği türü "Web uygulaması" ise ve
• Yetkili JavaScript kaynakları ve yönlendirme URI'leri için HTTPS kullanılır.

Etkilenen kodu belirleme ve testi yapma

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 desteğinin sonlandırılmasından etkilenen tüm kodları bulmak zor olabilir. Yakında desteği sonlandı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 da günlük kaydetmek için iki nokta üst üste işareti ve ardından bir anahtar değeri ekleyin. Oturum açtıktan ve kimlik bilgileri alındıktan sonra, toplanan günlükleri inceleyin veya daha sonra analiz etmek üzere bir arka uca gönderin. Örneğin, informational:showauth2use, kaynağı ve URL'yi showauth2use adlı bir 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, yaptırım tarihinden önce desteği sonlandırılan özelliklerin davranışları test edilebilir.

Olası G_AUTH2_MIGRATION çerez değerleri:

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

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

HTML ve JavaScript

Yalnızca kimlik doğrulama için oturum açma senaryosunda, mevcut Google ile oturum açma düğmesinin örnek kodu ve oluşturma işlemleri gösterilir. Kimlik doğrulama yanıtının JavaScript geri çağırma işleviyle veya arka uç sunucunuzun oturum açma uç noktasına güvenli yönlendirmeyle nasıl işlendiği arasındaki farkları görmek için pop-up veya yönlendirme modunu seçin.

Eski 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 yol

Yalnızca kimlik doğrulama oturum açma senaryosunda yeni kitaplığı kullanmak için pop-up veya yönlendirme modunu seçin ve oturum açma 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 yapılan 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ıyor.

Örnek kod, yeni kişiselleştirilmiş düğmeyi oluşturmanın yanı sıra yeni tek dokunma pop-up'ını da gösterir. Kayıt ve oturum açma sırasında kullanıcıların yaşadığı sorunları en aza indirmek için kişiselleştirilmiş düğmeyi gösterdiğiniz her yerde Tek Dokunuş pop-up'ını da göstermenizi önemle tavsiye ederiz.

Oturum açma sürecinde daha fazla sorun yaşanmasına neden olacağından önerilmese de yeni kişiselleştirilmiş düğme, One Tap iletişim kutusu aynı anda gösterilmeden tek başına görüntülenebilir. Bunu yapmak için data-auto_prompt özelliğini false olarak ayarlayın.

HTML ve JavaScript API'leri

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

Geri arama 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şturucumuza göz atın. Farklı seçenekleri hızlıca karşılaştırmak ve sitenizde kullanmak üzere HTML snippet'leri oluşturmak için kullanılabilir.

One Tap ile herhangi bir sayfadan oturum açma

One Tap, kullanıcıların sitenize kaydolması veya giriş yapması için yeni ve kolay bir yöntemdir. Bu özellik, kullanıcıların doğrudan sitenizdeki herhangi bir sayfadan 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 özellik kullanıcılara giriş sayfanız dışındaki sayfalardan kaydolma ve giriş yapma esnekliği sunarak kaydolma ve giriş yapma sürecindeki sorunları azaltır.

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

Ayrıca, kişiselleştirilmiş oturum açma düğmesini gösteren g_id_signin öğesini yalnızca oturum açma veya kullanıcı hesabı yönetimi sayfalarınıza eklemenizi öneririz. Düğmeyi diğer federasyon kimlik sağlayıcı düğmelerinin ve kullanıcı adı ile şifre giriş alanlarının yanında göstererek kullanıcılara kayıt veya oturum açma seçenekleri sunun.

Jeton yanıtı

Kullanıcı oturum açma işlemi için artık OAuth 2.0 yetkilendirme kodlarını, erişim jetonlarını veya yenileme jetonlarını anlamanız ya da bunlarla çalışmanız gerekmiyor. 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 için artık kullanıcı profili verileriyle çalışmak üzere "getter" tarzı erişimci yöntemleri kullanmanız gerekmiyor.

Güvenli, Google tarafından imzalanmış bir JWT kimlik jetonu kimlik bilgisi şu şekilde 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çma düğmesi ux_mode redirect olarak ayarlandığında, Google yönlendirmesi aracılığıyla giriş uç noktanıza yönlendirilir.

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

• googleUser.getBasicProfile() numarasına yapılan aramalar,
• BasicProfile referansları ve getId(), getName(), getGivenName(), getFamilyName(), getImageUrl(), getEmail() yöntemlerine yapılan ilişkili çağrılar 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ı istek sahteciliğini (CSRF) önlediğinizden ve Google kimlik jetonunu arka uç sunucunuzda doğruladığınızdan emin olun.

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

Kullanıcı izni ve izni iptal etme

Kullanıcı web sitenizde ilk kez oturum açtığında Google, kullanıcının hesap profilini uygulamanızla paylaşması için izin ister. Kullanıcı izin verdikten sonra profili, kimlik jetonu kimlik bilgisi yükü olarak uygulamanızla paylaşılır. Bu profile erişimi iptal etmek, önceki oturum açma kitaplığında 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ıyla bağlantısını kesebilir. Alternatif olarak, uyguladığınız bir API çağrısını tetikleyerek doğrudan uygulamanızdan bağlantıyı kaldırabilirler. Daha önceki disconnect yöntemi, daha yeni olan revoke yöntemiyle değiştirilmiştir.

Bir kullanıcı platformunuzdaki hesabını sildiğinde, uygulamanızın Google Hesabı ile bağlantısını kesmek için revoke kullanmanız en iyi uygulamadır.

Daha önce, auth2.signOut(), kullanıcıların uygulamanızdan oturumunu kapatmasına yardımcı olmak için kullanılabiliyordu. 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 için oturum açma durumunu veya oturum durumunu korumaz.

Google Hesabı'nın oturum açma durumu ile uygulamanızın oturum durumu ve oturum açma durumu farklı ve ayrı kavramlardır.

Kullanıcının Google Hesabı'nda ve uygulamanızda oturum açma durumu, kullanıcının kimliğinin başarıyla doğrulandığını ve Google Hesabı'nda oturum açtığını bildiğiniz oturum açma anı dışında birbirinden bağımsızdır.

Google ile oturum açma, One Tap veya otomatik oturum açma özellikleri sitenizde yer aldığında kullanıcıların Google Hesaplarında oturum açması gerekir. Bu özellikler, kullanıcıların aşağıdaki işlemleri yapmasına olanak tanır:

• sitenize ilk kez kaydolurken veya oturum açarken kullanıcı profillerini paylaşmaya izin vermeleri,
• ve daha sonra sitenize yapılan geri dönüş ziyaretlerinde oturum açmak için kullanılır.

Kullanıcılar, web sitenizde etkin ve oturum açılmış bir oturum sürdürürken oturumlarını açık tutabilir, oturumlarını kapatabilir veya farklı bir Google Hesabı'na geçebilir.

Artık web uygulamanızın kullanıcılarının oturum açma durumunu doğrudan yönetmekten siz sorumlusunuz. Daha önce Google ile Oturum Açma, kullanıcının oturum durumunu izlemeye yardımcı oluyordu.

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

Daha önce, bir kullanıcının Google Hesabı'ndaki oturum açma durumuyla ilgili değişiklikleri paylaşmak için dinleyiciler kullanılıyordu. Dinleyiciler artık desteklenmiyor.

listen(), auth2.currentUser ve auth2.isSignedIn ile ilgili tüm referansları kaldırın.

Çerezler

Google ile oturum açma özelliğinde çerezler sınırlı olarak kullanılır. Bu çerezlerin açıklaması aşağıda verilmiştir. Google'ın kullandığı diğer çerez türleri hakkında daha fazla bilgi için Google çerezleri nasıl kullanır? başlıklı makaleyi inceleyin.

G_ENABLED_IDPS, önceki Google ile Oturum Açma Platformu Kitaplığı tarafından ayarlanan çerez artık kullanılmıyor.

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

• g_state, kullanıcı oturum kapatma durumunu depolar ve One Tap pop-up'ı veya otomatik oturum açma özelliği kullanılırken ayarlanır,

• g_csrf_token, CSRF saldırılarını önlemek için kullanılan ve oturum açma uç noktanız çağrıldığında ayarlanan bir çift gönderme çerezidir. Giriş URI'nizin değeri açıkça ayarlanabilir veya varsayılan olarak geçerli sayfanın URI'si kullanılabilir. Aşağıdaki durumlarda oturum açma uç noktanız çağrılabilir:

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

  • ux_mode=redirect ile JavaScript API ve google.accounts.id.prompt(), One Tap veya Otomatik Oturum Açma'yı görüntülemek için kullanılmıyor.

Ç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 adı yönetiyorsanız g_state çerezini kullanmayla ilgili daha fazla talimat için Alt alan adlarında One Tap'i gösterme başlıklı makaleyi inceleyin.

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