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

Bu kılavuz, projeyi değiştirmek için gerekli değişiklikleri ve atılacak adımları anlamanıza önceki Google ile Oturum Açma işlemindeki JavaScript kitaplıklarını başarıyla taşı platform kitaplığını yeni Google Kimlik Hizmetleri kitaplığına kimlik doğrulama.

İstemciniz JavaScript veya başka uygulamalar için Google API İstemci Kitaplığı'nı yetkilendirme için önceki kitaplıklara göz atın; Google Kimliği'ne Taşıma Hizmetler'i ziyaret edin.

Kimlik doğrulama ve yetkilendirme

Kimlik doğrulama, bir kişinin kim olduğunu belirler ve genellikle gerçekleşebilecek başka bir değişikliktir. Yetkilendirme, yeni bir projede verilere veya kaynaklara erişimi reddetme. Örneğin, uygulamanız sizden kullanıcının Google Drive'ına erişmek için izni.

Önceki Google ile Oturum Açma platform kitaplığı gibi yeni Google Kimliği Hizmet kitaplığı, hem kimlik doğrulama hem de yetkilendirmeyi destekleyecek şekilde tasarlanmıştır. daha fazla bilgi edineceksiniz.

Ancak yeni kitaplık, karmaşıklığı azaltmak için iki işlemi ayırır. geliştiricilerin Google Hesaplarını uygulamanızla entegre etmesine olanak tanı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 Kullanıcı yetkilendirmenin işleyiş şekli başlıklı makaleyi okuyun. ve Google Kimlik Hizmetleri'ne geçiş yapın ve uygulamanızın yeni ve iyileştirilmiş API'leri kullanın.

Neler değişti?

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

• Daha az kullanıcı için tek dokunuşla yeni ve otomatik oturum açma akışları adım,
• yenilenmiş bir oturum açma düğmesi,
• web genelinde tutarlı marka bilinci oluşturma ve tek tip oturum açma davranışı güven ve empatiyle yaklaşma,
• hızlıca içeriğe ulaşırsınız; Kullanıcılar istedikleri yerden doğrudan kaydolup oturum açabiliyor bir giriş veya hesap sayfasını ziyaret etmek zorunda kalmadan sitenizde.

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

• Sitenizin statik içeriğine yalnızca HTML,
• oturum açma kimlik doğrulamasının yetkilendirmeden ve diğer kullanıcılardan OAuth 2.0 entegrasyonunun karmaşıklığı artık gerekli değildir sitenizde oturum açmalarını veya
• 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önlendiriyor.
• önceki her iki Google Identity'nin özelliklerinin de birleştirilmesi ve Google API JavaScript kitaplıklarını tek bir yeni kitaplıkta toplar.
• oturum açma yanıtları için artık bir Alıcı stili işlevler aracılığıyla Promise ve dolaylı yol sadelik için kaldırılmıştır.

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

Mevcut Google ile Oturum Açma düğmesinden taşıma işlemi gerçekleştiriyorsanız ve yalnızca isterse en basit değişiklik: yeni kişiselleştirilmiş düğmeye güncelleyin. Bu, veri feed'ini değiştirerek, JavaScript kitaplıkları ve kod tabanınızı yeni bir oturum açma nesnesi kullanacak şekilde güncelleme.

Kitaplıklar ve yapılandırma

Ö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, geçersiz . Yıllardır tek bir yeni Google Kimlik Hizmetleri JavaScript kitaplığıyla değiştirildi: accounts.google.com/gsi/client

Önceki üç JavaScript modülü: api, client ve platform oturum açma işlemleri apis.google.com üzerinden yüklendi. Konumları belirlemenize yardımcı olmak için eski kitaplığın sitenize eklenebileceği yerler genellikle şunlardır:

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

Çoğu durumda, mevcut web uygulaması istemci kimliğinizi kullanmaya devam edebilirsiniz kimlik bilgileri. Taşıma işleminiz kapsamında OAuth 2.0 Politikaları ve Google API Konsolu'nu kullanma aşağıdaki istemci ayarlarını güncelleyin:

• test ve üretim uygulamalarınız ayrı projeler kullanır ve kendi Müşteri Kimlikleri
• 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 bulmanıza ve kullanımdan kaldırma sonrasında test etmenize yardımcı olabilir. gösterir.

Büyük veya karmaşık uygulamalarda, gapi.auth2 modülünün kullanımdan kaldırılması. Yakında mevcut kullanımın desteği sonlandırılmış özellikleri konsola ekleyin, G_AUTH2_MIGRATION değerini ayarlayın çerezini informational adresine gönderin. İsterseniz, URL'ye iki nokta üst üste ve ardından bir anahtar değeri oturum depolama alanına da giriş yapar. Oturum açıp kodu aldıktan sonra kimlik bilgilerini incelemeli veya toplanan günlükleri daha sonra analiz edilmek üzere bir arka uca göndermelidir. Örneğin, örnek, informational:showauth2use kaynağı ve URL'yi bir oturum depolama alanına kaydeder anahtar (showauth2use)

gapi.auth2 modülü artık yüklenmediğinde uygulama davranışını doğrulamak için G_AUTH2_MIGRATION çerezinin değerini enforced olarak değiştirin. Böylece ekip üyeleri yaptırım tarihinden önce inceleme yapması gerekir.

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. Ayrıca günlüğe kaydet oturum depolama alanına ekleme işlemini yapabilirsiniz: informational:key-name

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

HTML ve JavaScript

Bu yalnızca kimlik doğrulama amaçlı oturum açma senaryosunda, mevcut Google ile Oturum Açma düğmesi gösterilir. Pop-up veya Yönlendirme'yi seçin. veya kimlik doğrulama yanıtının JavaScript geri çağırması veya arka uç sunucusu girişinize güvenli yönlendirmeyle uç nokta.

Ö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 şu seçeneği belirleyin: pop-up veya yönlendirme modundan çıkarıp kullanmak istediğiniz sitenizdeki mevcut bir uygulamadır.

<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ı bu örnekte, yeni accounts.google.com/gsi/client kitaplık, g_id_signin sınıfı ve g_id_onload nesnesi öncekinin yerini alır apis.google.com/js/platform.js kitaplığı ve g-signin2 nesnesi.

Yeni kişiselleştirilmiş düğmeyi oluşturmanın yanı sıra örnek kod yeni One Tap pop-up'ını görüntüler. Size özel düğmeyi gösterdiğimiz kullanıcı davranışını küçültmek için One Tap pop-up'ını da görüntülemenizi kesinlikle öneririz. zorluk oluşturabilirsiniz.

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

HTML ve JavaScript API'leri

Önceki örnekte, yeni HTML API'nin sitenizi ziyaret edin. Alternatif olarak, JavaScript API'yi kullanın veya girin.

Geri çağırma türü ve renk, beden, şekil, metin ve tema gibi özellikleri kullanma, Kodumuza göz atma oluşturma aracını kullanın. Farklı seçenekleri hızla karşılaştırmak ve farklı seçenekler için Sitenizde kullanılacak HTML snippet'leri.

One Tap ile herhangi bir sayfadan oturum açın

One Tap, kullanıcıların sitenize kaydolması veya sitenizde oturum açması için sorunsuz bir şekilde kullanabileceği yeni bir yöntemdir. Doğrudan sitenizdeki herhangi bir sayfadan kullanıcının oturum açmasını sağlar 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 doğrulama ve paylaşım için esneklik sağlayarak kaydolma ve oturum açma kaydolma ve oturum açma işlemlerini gerçekleştirebilirsiniz.

Herhangi bir sayfadan oturum açmayı etkinleştirmek için şunu eklemenizi öneririz: g_id_onload tüm sitenizde yer alan paylaşılan bir üstbilgi, altbilgi veya başka bir nesne.

Ayrıca, kişiselleştirilmiş oturum açma işlemini gösteren g_id_signin kullanmanızı da öneririz düğmesi, yalnızca giriş veya kullanıcı hesabı yönetimi sayfalarınızda bulunur. Kullanıcılara seçenek sunma düğmeyi diğer birleşik öğelerle birlikte görüntüleyerek veya kimlik sağlayıcı düğmeleri ile kullanıcı adı ve şifre giriş alanları.

Jeton yanıtı

Kullanıcı oturum açmak için artık OAuth 2.0'ı anlamanız veya OAuth 2.0'la çalışmanız gerekmiyor. erişim jetonları veya yenileme jetonları gösterilebilir. JSON Web Jetonu yerine (JWT) Kimlik Jetonu, oturum açma durumunu ve kullanıcı profilini paylaşmak için kullanılır. Kullanıcı basitleştirdiğimizden sonra, artık "getter" stil erişim yöntemlerini nasıl kullanacağınızı öğrendiniz.

Google tarafından imzalanmış güvenli bir JWT kimliği jetonu kimlik bilgisi şunlardan biri döndürülür:

• Pop-up modunda kullanıcının tarayıcı tabanlı JavaScript geri çağırma işleyicisine veya
• giriş uç noktanıza yönlendiren bir Google yönlendirmesi aracılığıyla arka uç sunucunuza Google ile Oturum Aç düğmesi ux_mode redirect olarak ayarlanmış.

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

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

Bunun yerine, yeni JWT'de credential alt alanına doğrudan referanslar kullanın CredentialResponse nesnesini ifade eder.

Ayrıca ve yalnızca Yönlendirme modunda, Siteler Arası İstek'i engellemeyi unutmayın. Sahtekarlık (CSRF) ve Arka uç sunucunuzdaki Google kimlik jetonunu doğrulayın.

Kullanıcıların sitenizle nasıl etkileşimde bulunduğunu daha iyi anlamak için CredentialResponse'taki select_by alanı kullanıcıyı belirlemek için kullanılabilir izin sonucu ve kullanılan oturum açma akışını takip edebilirsiniz.

Kullanıcı rızası ve izni iptal etme

Bir kullanıcı web sitenizde ilk kez oturum açtığında Google kullanıcıdan izin ister kullanıcılarınızın hesap profilini uygulamanızla paylaşın. İzin verildikten sonra Kullanıcı profili, bir kimlik jetonu kimlik bilgisi yükünde uygulamanızla paylaşılır. Bu profile erişimi iptal etmek, oturum açma kitaplığını kullanabilirsiniz.

Kullanıcılar izinleri iptal edebilir ve uygulamanızın Google Hesaplarıyla olan bağlantısını kesebilir https://myaccount.google.com/permissions adresini ziyaret edin. Alternatif olarak, API tetiklenerek doğrudan uygulamanızla bağlantıları kesilebilir çağrısından ibaret değildir. önceki disconnect yöntemi revoke yöntemiyle değiştirildi.

Kullanıcı, platformunuzdaki hesabını sildiğinde, şu yöntem kullanılır: Uygulamanızın Google Hesabı ile olan bağlantısını kesmek için revoke.

Daha önce auth2.signOut(), kullanıcının oturum kapatmasını yönetmeye yardımcı olmak için kullanılabiliyordu nasıl sağlayabileceğini de öğreneceksiniz. Tüm auth2.signOut() kullanımları kaldırılmalıdır ve uygulamanız her kullanıcı oturumu durumunu ve oturum açma durumunu doğrudan yönetmelidir.

Oturum durumu ve İşleyiciler

Yeni kitaplık, web'de oturum açma veya oturum durumunu korumaz. uygulamasını indirin.

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

Kullanıcının, Google Hesabı'nda ve uygulamanızda oturum açma durumu (kullanıcının oturum açma sırasında e-posta alıp almadığını anladığınızda kimliği başarıyla doğrulandığından ve Google Hesabında oturum açtığından emin olun.

Google ile oturum açma, One Tap veya Otomatik oturum açma özelliklerini site kullanıcılarının öncelikle Google Hesaplarında oturum açarak şunları yapması gerekir:

• İlk kez kaydolurken kullanıcı profillerinin paylaşılmasına izin vermelidir. sitenizde oturum açarken
• ve daha sonra da sitenize yapılan geri dönüş ziyaretlerinde oturum açabilirsiniz.

Kullanıcılar oturum açmış olarak kalabilir, oturumu kapatabilir veya farklı bir Google Hesabı'na geçebilir aynı anda hem web sitenizde hem de hesabınızda

Artık şu alanın kullanıcılarının oturum açma durumunu doğrudan yönetmekten sorumlusunuz: web uygulamanız. Google ile Oturum Açma, önceden kullanıcının oturum durumu olarak değiştirin.

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

Önceden Dinleyiciler, belirli bir kullanıcının Google Hesabı. Dinleyiciler artık desteklenmiyor.

listen(), auth2.currentUser ve auth2.isSignedIn.

Çerezler

Google ile Oturum Açma, çerezleri sınırlı bir şekilde kullanır. Bu çerezlerin bir açıklaması anlatacağım. Google çerezleri nasıl kullanır? başlıklı makaleye bakın. inceleyin.

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

İsteğe bağlı olarak yeni Google Kimlik Hizmetleri kitaplığı, bunları alanlar arası ayarlayabilir. çerezlere izin verin:

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

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

  • data-ux_mode=redirect ile veya data-login_uri şu durumlarda HTML API: ayarlayın veya

  • JavaScript API'sı ile ux_mode=redirect ve google.accounts.id.prompt(), One Tap veya Otomatik oturum açma.

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

Birden fazla alanı veya alt alanı yönetiyorsanız One Tap'i Görüntülü Reklam Ağı'nda görüntüleyin. Alt alan adları bölümüne bakın.g_state

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