Google ile Oturum Açma'dan geçiş yapın (original) (raw)

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, 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 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 desteklemek için 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ğrulamasıyla ilgiliyse bu sayfayı okumaya devam edin.

Kullanım alanınız yetkilendirmeyi 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 geçiş konularını okuyun.

Neler değişti?

Yeni Google Kimlik Hizmetleri kitaplığı, kullanıcılara birçok kullanılabilirlik iyileştirmesi sunar. Öne çıkan özellikler:

• 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'de tutarlı markalaşma ve tek tip oturum açma davranışı, kullanıcıların markanızı anlamasını ve size güvenmesini sağlar.
• 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 odaklandığımız konular karmaşıklığı azaltmak, güvenliği iyileştirmek ve entegrasyon sürecinizi olabildiğince hızlı hale getirmekti. 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 ayrılması ve kullanıcı verilerinin paylaşılmasıyla birlikte, kullanıcıların sitenizde oturum açması 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çmek olacaktır. Bu işlem, 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ğrulama ve yetkilendirme 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ükleme 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 Google API Konsolu'nu kullanarak aşağıdaki istemci ayarlarını doğrulamanızı ve gerekirse güncellemenizi ö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, yetkili JavaScript kaynakları ve URI'ları yeniden yönlendirmek 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 kaydetmek için iki nokta üst üste işareti ve ardından bir anahtar değeri ekleyin. Oturum açtıktan ve kimlik bilgilerini aldıktan sonra, daha sonra analiz edilmeleri için toplanan günlükleri inceleyin veya arka uç bir sisteme 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, mevcut Google ile oturum açma düğmesinin oluşturulması gösterilmektedir. Kimlik doğrulama yanıtının bir JavaScript geri çağırma işlevi veya arka uç sunucunuzun giriş uç noktasına güvenli yönlendirme yoluyla nasıl ele alındığındaki farklılıkları görmek için pop-up veya yönlendirme modu arasından seçim yapın.

Önceki yöntem

Google ile oturum açma düğmesini oluşturun ve doğrudan kullanıcının tarayıcısından oturum açmak için geri çağırma işlevi kullanın.

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

Yönlendirme modu

Google ile oturum açma düğmesini oluşturun. Bu işlem, kullanıcının tarayıcısından arka uç sunucularınızın oturum açma uç noktasına bir AJAX çağrısıyla sonlandırılır.

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

Oluşturuldu

Yeni görsel özellikler, özelleştirilmiş bir düğme oluşturma yöntemini basitleştirir, gapi.signin2.render() çağrılarını ve sitenizde resim ve görsel öğeleri barındırıp yönetmeniz gerekmesini ortadan kaldırır.

Kullanıcı oturum açma durumu güncelleme düğmesi metni.

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.

Oturum açmayı doğrudan kullanıcının tarayıcısından işlemek için geri çağırma işlevi 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>

Yönlendirme modu

Google, data-login_url özelliğinde belirtildiği şekilde giriş uç noktanızı çağırır. Daha önce POST işlemi ve parametre adından siz sorumluydunuz. Yeni kitaplık, kimlik jetonunu credential parametresinde uç noktanıza gönderir. Son olarak, arka uç sunucunuzda kimlik jetonunu doğrulayı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-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>

Oluşturuldu

Google ile oturum açma düğmesinin boyutunu, şeklini ve rengini özelleştirmek için visual-attributes özelliğini kullanın. Oturum açma oranını artırmak için kişiselleştirilmiş düğmeyle birlikte Tek Dokunuş pop-up'ını gösterin.

Kullanıcı oturum açma durumu, düğme metnini "Oturum aç"tan "Oturum açıldı" olarak güncellemez. İzin verildikten sonra veya tekrar ziyaretlerde kişiselleştirilmiş düğmede kullanıcının adı, e-posta adresi ve profil resmi gösterilir.

Yalnızca kimlik doğrulamayı içeren 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 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.

Giriş yapma zorluğu arttığı için önerilmez ancak yeni kişiselleştirilmiş düğme, Tek Dokunuş iletişim kutusu aynı anda gösterilmeden 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 özelliğini eklemek için yeni HTML API'nin nasıl kullanılacağı gösterilmektedir. Alternatif olarak, işlevsel olarak eşdeğer JavaScript API'yi kullanabilir veya sitenizde HTML ile JavaScript API'lerini birlikte kullanabilirsiniz.

Geri çağırma türü ve renk, boyut, şekil, metin ve tema gibi özellikler gibi düğme özelleştirme seçeneklerini etkileşimli olarak görüntülemek için Kod Oluşturucumuz'a 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 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 gereksiz kılar. 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 sorunlarını azaltır.

Herhangi bir sayfadan oturum açmayı etkinleştirmek için g_id_onload etiketini sitenizin tamamında bulunan ortak bir üstbilgi, altbilgi 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 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. Daha da basitleştirmek gerekirse, kullanıcı profili verileriyle çalışmak için artık "geter" stilindeki erişim yöntemlerini kullanmanız gerekmiyor.

Google tarafından imzalanan güvenli bir JWT kimlik jetonu kimlik bilgisi aşağıdaki durumlarda döndürülür:

• Kullanıcının tarayıcı tabanlı JavaScript geri çağırma işleyicisine pop-up modunda 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 aşağıdakileri kaldırarak mevcut geri çağırma işleyicilerinizi güncelleyin:

• googleUser.getBasicProfile() numaralı telefona yapılan aramalar,
• BasicProfile referansları ve getId(), getName(), getGivenName(), getFamilyName(), getImageUrl(), getEmail() yöntemlerine yönelik 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 modunda Siteler Arası İstek Sahteciliği'ni (CSRF) önlemek ve arka uç sunucunuzda Google kimlik jetonunu doğrulamak için gerekli önlemleri alı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.

Bir 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ı 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 durumunu doğrudan yönetmekten sorumlusunuz. Daha önce Google ile oturum açma, kullanıcı oturum durumunu izleme konusunda yardımcı oluyordu.

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

Daha önce, kullanıcının Google Hesabı'ndaki oturum açma durumundaki 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ğ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'ın çerezleri nasıl kullandığı başlıklı makaleyi inceleyin.

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

Yeni Google Identity Services kitaplığı, isteğe bağlı olarak yapılandırma seçeneklerinize göre aşağıdaki alan adları arası çerezleri ayarlayabilir:

• g_state, kullanıcının 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 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ı