Google ile Oturum Açma düğmesini görüntüleyin

Kullanıcıların web uygulamanızda kaydolmasını veya oturum açmasını sağlamak için sitenize Google ile oturum açma düğmesi ekleyin. Düğmeyi oluşturmak için HTML veya JavaScript'i, düğmenin şeklini, boyutunu, metnini ve temasını özelleştirmek için de özellikleri kullanın.

Kişiselleştirilmiş oturum açma düğmesi.

Kullanıcı bir Google Hesabı seçip izin verdikten sonra Google, kullanıcı profilini JSON Web Jetonu (JWT) kullanarak paylaşır. Uygulanacak adımlara genel bir bakış için Nasıl çalışır? başlıklı makaleyi inceleyin. Kişiselleştirilmiş düğmeyi anlama, düğmenin kullanıcılara nasıl gösterildiğini etkileyen farklı koşulları ve durumları inceler.

Ön koşullar

Düğmeyi giriş sayfanıza eklemeden önce aşağıdaki adımları uygulayın:

Düğme oluşturma

Google ile oturum açma düğmesini görüntülemek için düğmeyi giriş sayfanızda oluşturmak üzere HTML veya JavaScript'i seçebilirsiniz:

HTML

JWT'yi platformunuzun giriş uç noktasına döndürerek oturum açma düğmesini HTML kullanarak oluşturun.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
        data-client_id="YOUR_GOOGLE_CLIENT_ID"
        data-login_uri="https://your.domain/your_login_endpoint"
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
  <body>
</html>

g_id_signin sınıfına sahip bir öğe, Google ile oturum açma düğmesi olarak oluşturulur. Düğme, veri özelliklerinde sağlanan parametrelere göre özelleştirilir.

Google ile Oturum Aç düğmesi ve Google One Tap'i aynı sayfada görüntülemek için: data-auto_prompt="false" öğesini kaldır Zorlukları azaltmak ve sorunları azaltmak için Oturum açma oranlarını artırabilirler.

Veri özelliklerinin tam listesi için g_id_signin referansına bakın. sayfa

JavaScript

JavaScript kullanarak oturum açma düğmesini oluşturup JWT'yi JavaScript geri çağırma işleyicisi ile çalışır.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID"
          callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      }
    </script>
    <div id="buttonDiv"></div>
  </body>
</html>

renderButton için ilk parametre olarak belirtilen öğe, Google ile Oturum Aç düğmesi. Bu örnekte, sayfadaki düğmeyi oluşturmak için buttonDiv kullanılır. Düğme, ikinci parametrede renderButton olarak belirtilir.

Kullanıcı deneyimini en aza indirmek için google.accounts.id.prompt(), kayıt veya oturum açma düğmesinin ikinci alternatifi olarak Tek Dokunma'yı göstermek üzere çağrılır.

Coğrafi Bilgi Sistemi kitaplığı, HTML dokümanındaki kimlik özelliği g_id_onload olarak ayarlanmış veya g_id_signin içeren sınıf özelliklerine sahip öğeleri ayrıştırır. Eşleşen bir öğe bulunursa düğme, JavaScript'de de oluşturulmuş olsa bile HTML kullanılarak oluşturulur. Düğmenin gösterilmesini önlemek için muhtemelen çakışan parametrelerle iki kez, HTML öğelerini bu adlarla eşleşmesi gerekir.

Düğme Dili

Düğme dili, tarayıcının varsayılan diline veya Google oturumu kullanıcısının tercihine göre otomatik olarak belirlenir. Ayrıca, hl parametresini ve dil kodunu src öğesine ekleyerek dili manuel olarak ekleyin: yönergesini ekleyerek veya isteğe bağlı data-locale veya HTML'de yerel ayar parametresi data-locale veya JavaScript'te locale.

HTML

Aşağıdaki kod snippet'inde, istemci kitaplığı URL'sine hl parametresi eklenerek ve data-locale özelliği Fransızca olarak ayarlanarak düğme dilinin Fransızca olarak nasıl gösterileceği gösterilmektedir:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

Aşağıdaki kod snippet'inde, istemci kitaplığı URL'sine hl parametresi eklenerek ve locale parametresi Fransızca olarak ayarlanarak google.accounts.id.renderButton yönteminin çağrılmasıyla düğme dilinin Fransızca olarak nasıl gösterileceği gösterilmektedir:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

Kimlik bilgisi işleme

Kullanıcı izni verildikten sonra Google, JSON Web Token (JWT) kimlik bilgisi döndürür tarayıcısına veya doğrudan giriş sayfasına yönelik bir kimlik jetonu olarak bilinir uç noktanız ortadan kalkar.

JWT'yi nerede alacağınızı seçmek, düğmeyi HTML mi yoksa JavaScript mi kullanarak oluşturduğunuza ve pop-up veya yönlendirme kullanıcı deneyimi modunun kullanılıp kullanılmadığına bağlıdır.

popup kullanıcı deneyimi modu kullanıldığında, pop-up pencerede oturum açma kullanıcı deneyimi akışı gerçekleştirilir. Bu, genellikle kullanıcılar için daha az müdahaleci bir deneyimdir ve varsayılan kullanıcı deneyimi modudur.

Düğmeyi aşağıdakileri kullanarak oluştururken:

HTML

Aşağıdakilerden birini ayarlayabilirsiniz:

  • JWT'yi geri arama işleyicinize döndürmek için data-callback veya
  • Google'ın JWT'yi doğrudan girişinize göndermesi için data-login_uri uç noktası için POST isteği kullanın.

Her iki değer de ayarlanırsa data-callback, şuna göre öncelikli olur: data-login_uri. Hata ayıklama için geri çağırma işleyici kullanılırken her iki değeri de ayarlamak yararlı olabilir.

JavaScript

Bir callback belirtmeniz gerekir. Pop-up modu, düğmeyi JavaScript'de oluştururken yönlendirmeleri desteklemez. Ayarlanırsa login_uri yoksayılır.

Kodu çözme hakkında daha fazla bilgi için döndürülen kimlik bilgisi yanıtını işleme bölümüne bakın. JS geri arama işleyicinizin içinde JWT.

Yönlendirme modu

redirect kullanıcı deneyimi modu kullanıldığında, tam sayfa oturum açma kullanıcı deneyimi akışı gerçekleştirilir bir yönlendirme URL'si görürsünüz. Google, JWT'yi doğrudan POST isteği kullanarak giriş uç noktası. Bu yöntem, kullanıcılar için genellikle daha müdahaleci bir deneyim olsa da en güvenli oturum açma yöntemi olarak kabul edilir.

Düğmeyi şu şekilde oluştururken:

  • HTML, isteğe bağlı olarak data-login_uri'yi giriş uç noktanızın URI'sine ayarlayabilir.
  • JavaScript, isteğe bağlı olarak login_uri'yi giriş uç noktanızın URI'sine ayarlayabilir.

Değer sağlamazsanız Google, JWT'yi geçerli sayfanın URI'sine döndürür.

Giriş uç noktası URI'niz

data-login_uri veya login_uri ayarlanırken HTTPS ve mutlak URI kullanın. Örneğin, https://example.com/path.

HTTP'ye yalnızca geliştirme sırasında localhost kullanılırken izin verilir: http://localhost/path.

Google'ın şartları ve doğrulama kurallarının tam açıklaması için Güvenli JavaScript kaynakları ve URI'leri yeniden yönlendirme başlıklı makaleyi inceleyin.