Mayıs 2016'da Google Identity Toolkit'in en yeni sürümünü Firebase Authentication olarak yayınladık ve Nisan 2019'da Google Cloud'un Kimlik Platformunu çıkardık . Bu ürünler, yükseltilmiş istemci SDK'larını, açık kaynaklı UI kitaplıklarını, oturum yönetimini ve unutulmuş parola akışları için entegre e-posta gönderme hizmetini içerir.

30 Haziran 2020'de , bu sayfada belgelenen SDK'lar ve API ayar sayfası çalışmayı durduracak. (Identity Platform ve Firebase Authentication tarafından kullanılan https://identitytoolkit.googleapis.com/... ve https://securetoken.googleapis.com/... uç noktaları çalışmaya devam edecek.)

Identity Toolkit'ten mevcut bir projeyi taşımak için Identity Platform geçiş kılavuzuna veya Firebase Authentication taşıma kılavuzuna bakın .

Bu sayfa, Cloud Translation API ile çevrilmiştir.
Switch to English

UI widget'larını ayarlayın

Genel Bakış

Identity Toolkit tarafından sağlanan iki ana pencere öğesi vardır. İlki, kimlik doğrulama akışını başlatmak için bir "Oturum Aç" düğmesi ve ikincisi, oturum açma işlemini gerçekten gerçekleştirmek için bir widget'tır.

Oturum açma düğmesi olan sayfa

Hangi sayfada "Oturum Aç" düğmesini göstermek veya kimlik doğrulama akışını hemen başlatmak isterseniz, <head> bölümüne biraz html eklemeniz gerekecektir. Tek HTML öğesi, CSS ile özelleştirebileceğiniz bir "Oturum Aç" düğmesi haline gelen bir <div id=”navbar”></div> dir.

Kullanıcı oturum açtıktan sonra bu <div id=”navbar”></div> göstermeyi seçerseniz, kullanıcı bilgi kutusu haline gelecektir.

<head> içine yerleştirilecek kod, Geliştirici Konsolu'ndan gitkit-signin-button.html . Sonra bunu kopyalayıp sayfanıza yapıştırabilir ve şunun gibi bir şey elde edebilirsiniz:

<html>
  <head>
    <!-- Begin custom code copied from Developer Console -->
    <!-- Note: this is just an example. The html you download from Developer Console will be tailored for your site -->
    <script type="text/javascript" src="//www.gstatic.com/authtoolkit/js/gitkit.js"></script>
    <link type=text/css rel=stylesheet href="//www.gstatic.com/authtoolkit/css/gitkit.css" />
    <script type=text/javascript>
      window.google.identitytoolkit.signInButton(
        '#navbar', // accepts any CSS selector
        {
          widgetUrl: "https://localhost:8000/callback",
          signOutUrl: "/",
          // Optional - Begin the sign-in flow in a popup window
          //popupMode: true,

          // Optional - Cookie name (default: gtoken)
          //            NOTE: Also needs to be added to config of ‘widget
          //                  page’. See below
          //cookieName: ‘example_cookie’,
        }
      );
    </script>
    <!-- End custom code copied from Developer Console -->
  </head>
  <body>
    <!-- Begin sign in button widget -->
    <div id="navbar"></div>
    <!-- End sign in button widget -->
  </body>
</html>

Oturum açma widget'ına sahip sayfa

Oturum açma pencere öğesi, Identity Toolkit uygulamasının temelini oluşturur. Sayfa, oturum açma sayfanızı görüntüleme, kimlik sağlayıcılardan gelen yanıtları görünmez bir şekilde işleme koymanın yanı sıra sitenizde kullanmak isteyebileceğiniz açılan hesap yönetimi widget'larını (parolayı unuttum, hesabı yönetme vb.) sayfanızı tasarlarken bu çoklu kullanım senaryolarını göz önünde bulundurmak isteyecektir.

Yukarıda açıklanan Identity Toolkit oturum açma düğmesini kullanırsanız, yapmanız gereken tek şey düğmenin widgetUrl pencere öğesi sayfanıza işaret edecek şekilde yapılandırmaktır. Aksi takdirde, sağlanan düğmeyi kullanmazsanız, oturum açma sürecini başlatmak için mode=select veya hesap yönetimi sayfasını çağırmak için mode=manageAccount sorgu parametresini eklemeniz gerekir. Hesap yönetimi sayfasının yalnızca gtoken çerezi varsa gtoken unutmayın - siteniz kendi oturum çerezini kullanıyorsa, yönetim sayfasını görüntüleyebilmeleri için kullanıcıdan yeniden kimlik doğrulaması istemeniz gerekebilir.

Ek olarak, oturum açma işlemi tamamlandıktan sonra kullanıcının nereye yönlendirileceğini yapılandırmak için oturum açma için pencere öğesi sayfasını yüklerken signInSuccessUrl sorgu parametresini ekleyin. Bu sorgu parametresi, oturum açtıktan sonra kullanıcıyı geçerli sayfasına döndürmek istediğinizde yararlı olabilir.

Burada yine <head> kodunu Geliştirici Konsolu'ndan indirebilirsiniz, ancak <div id="gitkitWidgetDiv"></div> kendiniz eklemeniz gerekecektir. (Yahoo girişini desteklemek istiyorsanız, GET veya POST isteklerine bağlı olarak JAVASCRIPT_ESCAPED_POST_BODY uygun şekilde değiştirmek için ek mantığa ihtiyacınız olacağını unutmayın. Bu, dil başına hızlı başlangıç kılavuzlarında açıklanmaktadır.)

Daha sonra şuna benzer bir şey elde etmelisiniz:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!-- Copy and paste here the "Widget javascript" you downloaded from Developer Console as gitkit-widget.html -->

    <script type="text/javascript" src="//www.gstatic.com/authtoolkit/js/gitkit.js"></script>
    <link type="text/css" rel="stylesheet" href="//www.gstatic.com/authtoolkit/css/gitkit.css" />
    <script type="text/javascript">
      var config = {
          apiKey: 'AIza...',
          signInSuccessUrl: '/',
          signInOptions: ["google", "password"],
          oobActionUrl: '/',
          siteName: 'this site',

          // Optional - function called after sign in completes and before
          // redirecting to signInSuccessUrl. Return false to disable
          // redirect.
          // callbacks: {
          //  signInSuccess: function(tokenString, accountInfo,
          //    opt_signInSuccessUrl) {
          //      return true;
          //    }
          // },

          // Optional - key for query parameter that overrides
          // signInSuccessUrl value (default: 'signInSuccessUrl')
          // queryParameterForSignInSuccessUrl: 'url'

          // Optional - URL of site ToS (linked and req. consent for signup)
          // tosUrl: 'http://example.com/terms_of_service',

          // Optional - Cookie name (default: gtoken)
          //            NOTE: Also needs to be added to config of the ‘page with
          //                  sign in button’. See above
          // cookieName: ‘example_cookie’,

          // Optional - Flag for disabling/enabling accountchooser.com.
          // Whether accountchooser.com is to be presented on sign in/up (default: true)
          // Disabling Account Chooser from the sign in flow is not recommended.
          // It can result in a non-optimal user experience, as it may add additional
          // steps and increase sign in friction due to the need to type in emails for
          // returning registered users who previously signed in or have saved accounts
          // in Account Chooser.
          // accountChooserEnabled: true,

           // Optional - UI configuration for accountchooser.com
           /*acUiConfig: {
               title: 'Sign in to example.com',
               favicon: 'http://example.com/favicon.ico',
               branding: 'http://example.com/account_choooser_branding'
           },
           */

           // Optional - Function to send ajax POST requests to your Recover URL
           //            Intended for CSRF protection, see Advanced Topics
           //      url - URL to send the POST request to
           //     data - Raw data to include as the body of the request
           //completed - Function to call with the object that you parse from
           //            the JSON response text. {} if no response
           /*ajaxSender: function(url, data, completed) {
                         },
           */
      };
      // The HTTP POST body should be escaped by the server to prevent XSS
      window.google.identitytoolkit.start(
          '#gitkitWidgetDiv', // accepts any CSS selector
          config,
          'JAVASCRIPT_ESCAPED_POST_BODY');
    </script>

    <!-- End modification -->

  </head>
  <body>

    <!-- Include the sign in page widget with the matching 'gitkitWidgetDiv' id -->
    <div id="gitkitWidgetDiv"></div>
    <!-- End identity toolkit widget -->

  </body>
</html>

Önce e-posta ve sağlayıcı ilk modları

Identity Toolkit oturum açma gereci iki farklı akışı destekler: Önce E-posta ve Önce Sağlayıcı.

Önce e-posta modu

Varsayılan olarak etkinleştirilen bu akışta, pencere öğesi önce kullanıcıdan e-posta adresini sorar ve o kullanıcının oturum açıp açmayacağına akıllıca karar verir veya bu kullanıcıdan yeni bir hesap oluşturmasını ister.

Hesap Seçici etkinleştirildiyse ( accountChooserEnabled: true, ), kullanıcıya daha önce kullandıkları bir e-posta adresini tek bir dokunuşla hızlı bir şekilde girebilmeleri için akışın başında bir kimlik bilgisi seçiciyle sorulabilir. Aksi takdirde veya kullanıcının accountchooser.com'da saklanan kimlik bilgileri yoksa, kullanıcının e-posta adresini tam olarak yazması gerekecektir.

Bu akış varsayılan olarak etkindir, ancak oturum açma widget yapılandırmanıza şu girişi displayMode: 'emailFirst' manuel olarak da etkinleştirebilirsiniz: displayMode: 'emailFirst'

Sağlayıcı ilk modu

Bu akışta, kullanıcıya her zaman önce aşağıdaki ekran gibi desteklenen farklı oturum açma seçeneklerini özetleyen bir ekran sorulur:

Bu mod, Android ve iOS'taki yerel akışlarımıza benzer ve kullanıcıyı biraz yazmadan kurtarabileceği için mobil cihazları hedefleyen web siteleri için öneriyoruz.

Bu modda, Hesap Seçici etkinleştirilirse ( accountChooserEnabled: true, ), kullanıcıdan "E-posta ile oturum aç" ı tıkladıktan sonra bir kimlik bilgisi seçicisi istenebilir, böylece daha önce kullandıkları bir e-posta adresini bir dokunmak.

Bu akışı etkinleştirmek için, oturum açma widget'ı yapılandırmanıza şu girişi ekleyin: displayMode: 'providerFirst'

Kullanıcı Arayüzünü Özelleştirme

Identity Toolkit widget'larının kullanıcı arayüzü basit olacak ve çoğu sitede güzel görünecek şekilde tasarlanmıştır, ancak özelleştirme kolaydır. Özelleştirmek isteyebileceğiniz ana parçalar şunları içerir:

  1. CSS: Widget'ların css'ini düzenleyerek farklı widget'ların görünümünü önemli ölçüde değiştirmek mümkündür.
  2. Oturum açma sayfası: Oturum açma sayfası widget'ı, masaüstü ve mobil web ile uyumlu olacak şekilde tasarlanmıştır ve özel üstbilgi, altbilgi vb. İle kendi sayfanıza yerleştirilebilir. Düğmemizi kullanmadan oturum açma sayfasını başlatmak isterseniz, o zaman lütfen widget URL'sine ?mode=select ekleyin.
  3. Hesap Seçici: Hesap Seçici, Open ID Foundation'a ait olan ve bu kuruluş tarafından işletilen ayrı bir web sitesidir. Identity Toolkit, uygulamanız ile Hesap Seçici arasındaki arayüzü yönetir, ancak Hesap Seçici kullanıcı arayüzünde görüntülenmesini istediğiniz markayı ve metni de belirtmeniz gerekir. Hesap Seçici'nin görünümünü özelleştirmek için, isteğe bağlı acUiConfig değerlerini yukarıda gösterilen javascript yapılandırmasında belgelendiği gibi ayarlayın.
    • başlık: başlık olarak görüntülenmesi gereken dize.
    • favicon: görüntülenmesi gereken favicon'un tam yolu.
    • markalama: gösterilmesi gereken markalama kaynağına giden tam yol. Kaynak, Javascript ile ilgili tüm güvenlik açıklarını ortadan kaldırmak için sterilize edilecektir. Örneğin:
  <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <div style="width:256px;margin:auto">
      <img src="/r/images/logo_160px.png" style="display:block;height:160px;width:160px;margin:auto">
      <p style="font-size:14px;opacity:.54;margin-top:20px;text-align:center">
        Welcome to our Demo.
      </p>
    </div>
  </body>
</html>

Notlar

  1. Görüntü alanı başlığı dahil edildiği sürece, widget'lar varsayılan olarak mobil cihazlarda iyi çalışmalıdır. Bu sizin tarafınızdan özelleştirilebilir, ancak bir örnek:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
  2. Bir URL'nin gerekli olduğu her yerde, hem mutlak hem de göreceli olabilir.