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

Bu kılavuz, kimlik doğrulama için JavaScript kitaplıklarını eski Google ile Oturum Açma platformu kitaplığından 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 yetkilendirme için JavaScript için Google API istemci kitaplığını veya daha önceki 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 verme ya da reddetme işlemidir. Örneğin, uygulamanız, kullanıcının Google Drive'ına erişmek için kullanıcınızdan izin istiyor.

Ö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 tasarlanmıştır.

Ancak yeni kitaplık, geliştiricilerin Google Hesaplarını uygulamanızla 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 alanınız yetkilendirme içeriyorsa uygulamanızın yeni ve iyileştirilmiş API'leri kullandığından emin olmak için Kullanıcı yetkilendirmesinin işleyiş şekli ve Google Kimlik Hizmetleri'ne taşıma başlıklı makaleleri okuyun.

Neler değişti?

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

• Daha az adım içeren yeni ve sorunsuz One Tap ve Otomatik Oturum Açma akışları,
• kullanıcı kişiselleştirme özelliğine sahip yeni bir oturum açma düğmesi,
• web genelinde tutarlı marka bilinci oluşturma ve tek tip oturum açma davranışı, anlayışı ve güveni geliştirir.
• Kullanıcılar, önce bir giriş veya hesap sayfasını ziyaret etmek zorunda kalmadan sitenizdeki herhangi bir yerden doğrudan kaydolabilir ve oturum açabilir.

Geliştiriciler için odak noktamız karmaşıklığı azaltmak, güvenliği iyileştirmek ve entegrasyonunuzu mümkün olduğunca hızlı hale getirmektir. Bu iyileştirmelerden bazıları şunlardır:

• Yalnızca HTML,
• oturum açma kimlik doğrulamasının yetkilendirmeden ve kullanıcı verilerinin paylaşımından ayırması sayesinde, kullanıcıların sitenizde oturum açmasını sağlamak için OAuth 2.0 entegrasyonunun karmaşıklığı artık gerekli değildir.
• hem pop-up hem de yönlendirme modları desteklenmeye devam eder ancak Google'ın OAuth 2.0 altyapısı artık arka uç sunucunuzun giriş uç noktasına yönlendirir.
• Hem eski Google Kimlik hem de Google API JavaScript kitaplıklarındaki özelliklerin tek bir yeni kitaplıkta birleştirilmesi,
• oturum açma yanıtları için artık Promise kullanıp kullanmayacağınıza siz karar veriyorsunuz. Ayrıca, basitlik sağlamak için alıcı stili işlevler aracılığıyla dolaylı çağrı kaldırıldı.

Oturum açma işleminin taşınmasına ilişkin örnek

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 kolay değişiklik, yeni kişiselleştirilmiş düğmeye geçiş 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

Eski 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ğrulaması ve yetkilendirmesi için gerekli değildir. Bunlar, tek bir yeni Google Kimlik Hizmetleri JavaScript kitaplığıyla değiştirildi: accounts.google.com/gsi/client.

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

• Varsayılan oturum açma düğmesi apis.google.com/js/platform.js'ü yükler.
• özel bir düğme grafiği yüklenir apis.google.com/js/api:client.js ve
• gapi.client yüklemeleri 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şleminiz kapsamında, OAuth 2.0 Politikalarımızı incelemenizi ve aşağıdaki istemci ayarlarını onaylamak ve gerekirse güncellemek için Google API Konsolu'nu kullanmanızı öneririz:

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

Etkilenen kodu ve testi belirleme

Hata ayıklama çerezi, etkilenen kodun yerini belirlemenize ve desteği sonlandırıldıktan sonraki davranışı test etmenize 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 kaydı oluşturmak için iki nokta üst üste işaretinden sonra bir anahtar değeri ekleyin. Oturum açıp kimlik bilgilerini aldıktan sonra veya toplanan günlükleri daha sonra analiz edilmek ü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, desteği sonlandırıldıktan sonraki davranışı yaptırım tarihinden önce test edebilirsiniz.

Olası G_AUTH2_MIGRATION çerez değerleri:

• enforced gapi.auth2 modülü yüklenmiyor.
• 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 günlük kaydedilir: informational:key-name.

Kullanıcı üzerindeki etkiyi 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 oturum açma senaryosundaki örnek kodda ve mevcut Google ile oturum açma düğmesinin oluşturulmasında gösterilmektedir. Kimlik doğrulama yanıtının bir JavaScript geri çağırması veya arka uç sunucunuzun giriş uç noktasına güvenli yönlendirme ile işlenme biçimindeki farklılıkları görmek için Pop-up veya Yönlendirme modundan birini seçin.

Ö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 oturum açma senaryosuyla kullanmak için pop-up veya yönlendirme modunu 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 almıştır.

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

Oturum açma zorluğunun artması nedeniyle önerilmese de yeni kişiselleştirilmiş düğme, Tek Dokunma iletişim kutusu aynı anda görüntülenmeden tek başına gösterilebilir. 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 bilgilerini eklemek için yeni HTML API'nin nasıl kullanılacağı gösterilmektedir. Alternatif olarak, işlevsel olarak eşdeğer olan JavaScript API'yi kullanabilir veya sitenizde HTML ile JavaScript API'lerini birlikte kullanabilirsiniz.

Geri çağırma türü ile renk, boyut, şekil, metin ve tema gibi özellikleri etkileşimli olarak görüntülemek için Kod oluşturma aracımıza göz atın. Bu araç, 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çın

One Tap, kullanıcıların sitenize kaydolması veya sitenizde oturum açması için kolay bir yöntemdir. Bu özellik, kullanıcıların doğrudan sitenizdeki herhangi bir sayfadan oturum açmasını sağlar ve kullanıcıların özel bir giriş sayfasını ziyaret etmesini ortadan kaldırır. Başka bir deyişle, bu özellik kullanıcılara giriş sayfanız dışındaki sayfalardan kaydolma ve oturum açma esnekliği sunarak kaydolma ve oturum açma işlemlerindeki zorlukları azaltır.

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

Ayrıca, kişiselleştirilmiş oturum açma düğmesini gösteren g_id_signin öğesini yalnızca giriş veya kullanıcı hesabı yönetimi sayfalarınıza eklemenizi öneririz. Düğmeyi diğer birleşik kimlik sağlayıcı düğmelerinin, kullanıcı adı ve ş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 gerekmez. Bunun yerine, oturum açma durumunu ve kullanıcı profilini paylaşmak için JSON Web Token (JWT) kimlik jetonu kullanılır. Ayrıca, kullanıcı profili verileriyle çalışmak için artık "alıcı" stil erişim yöntemlerini kullanmanıza gerek yoktur.

Google tarafından imzalanan güvenli bir JWT kimlik jetonu kimlik bilgisi aşağıdaki durumlarda 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'ın giriş uç noktanıza yönlendirmesi aracılığıyla arka uç sunucunuza yönlendirilir.

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

• googleUser.getBasicProfile() numaralı telefona 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 nesnesinde credential alt alanlarına doğrudan referanslar kullanın.

Ayrıca yalnızca Yönlendirme modu için, Siteler Arası İstek Sahtekarlığını (CSRF) önlemeyi ve Arka uç sunucunuzdaki Google kimliği jetonunu doğrulayın.

Kullanıcıların sitenizle nasıl etkileşime geçtiğini daha iyi anlamak için CredentialResponse'taki select_by alanı, kullanıcı izni sonucunu ve kullanılan belirli 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ıdan hesap profilini uygulamanızla paylaşmak için izin ister. Kullanıcının profili yalnızca izin verildikten sonra kimlik jetonu kimlik bilgisi yükü olarak uygulamanızla paylaşılır. Bu profile erişimi iptal etmek, önceki oturum açma kitaplığındaki bir erişim jetonunu iptal etmekle aynıdır.

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ı kaldırabilir. Alternatif olarak, uyguladığınız bir API çağrısını tetikleyerek doğrudan uygulamanızdan bağlantıyı kesebilirler. Daha ö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 bağlantısını kesmek için revoke yöntemini kullanmanız önerilir.

Daha önce auth2.signOut(), uygulamanızda kullanıcıların oturumunu kapatma işlemini yönetmeye yardımcı olmak için kullanılabilirdi. auth2.signOut()'ün tüm kullanımları kaldırılmalı ve uygulamanız, kullanıcı 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 birbirinden farklı kavramlardır.

Kullanıcının Google Hesabı ve uygulamanızdaki oturum açma durumu birbirinden bağımsızdır. Bunun tek istisnası, kullanıcının kimliğini başarıyla doğruladığını ve Google Hesabında oturum açtığını bildiğiniz oturum açma anı olur.

Sitenize Google ile oturum açma, One Tap veya otomatik oturum açma özelliği eklendiğinde kullanıcıların aşağıdaki işlemleri yapabilmek için önce Google Hesaplarında oturum açmaları gerekir:

• Sitenize ilk kez kaydolurken veya sitenizde oturum açarken kullanıcı profillerini paylaşma izni vermeleri gerekir.
• 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çmış bir oturum sürdürürken 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 sorumlusunuz. Google ile Oturum Açma önceden kullanıcının oturum durumunu izleme konusunda yardımcı oluyordu.

auth2.attachClickHandler() ve kayıtlı geri arama işleyicilere yapılan tüm referansları kaldırın.

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

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

Çerezler

Google ile oturum açma özelliği, çerezleri sınırlı olarak 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 Platformu Kitaplığı tarafından ayarlanan G_ENABLED_IDPS çerezi artık kullanılmıyor.

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

• g_state, kullanıcının oturum 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'nizin değeri açıkça ayarlanabilir veya varsayılan olarak geçerli sayfanın URI'si olabilir. Giriş uç noktanız, aşağıdakiler kullanılırken aşağıdaki koşullar altında çağrılabilir:

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

  • ux_mode=redirect içeren ve One Tap veya Otomatik Oturum Açma'yı görüntülemek için google.accounts.id.prompt()'ın kullanılmadığı 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 adı yönetiyorsanız g_state çerezi ile çalışmayla ilgili daha fazla talimat için Alt alan adlarında Tek Dokunuş'u görüntüleme başlıklı makaleyi inceleyin.

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