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

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

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

Kullanıcı bir Google Hesabı seçip iznini verdikten sonra Google, kullanıcı profilini JSON Web Token (JWT) kullanarak paylaşır. Oturum açma ve kullanıcı deneyimi sırasında uygulanan adımlara genel bir bakış için İşleyiş şekli başlıklı makaleyi inceleyin. Kişiselleştirilmiş düğmeyi anlama başlıklı makalede, düğmenin kullanıcılara nasıl gösterileceğini etkileyen farklı koşullar ve durumlar incelenir.

Ön koşullar

OAuth kullanıcı rızası ekranınızı yapılandırmak, istemci kimliği almak ve istemci kitaplığını yüklemek için Kurulum bölümünde açıklanan adımları uygulayın.

Düğme oluşturma

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

HTML

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

<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 parametrelerle özelleştirilir.

Aynı sayfada Google ile oturum açma düğmesi ve Google One Tap'in gösterilmesi için data-auto_prompt="false" simgesini kaldırın. Bu, kullanıcıların kaydolma sürecinde karşılaştığı zorlukları azaltmak ve oturum açma oranlarını artırmak için önerilir.

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

JavaScript

Oturum açma düğmesini JavaScript kullanarak oluşturun ve JWT'yi tarayıcının JavaScript geri çağırma işleyicisine döndürün.

<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çma düğmesi olarak gösterilir. Bu örnekte, sayfadaki düğmeyi oluşturmak için buttonDiv kullanılır. Düğme, renderButton için ikinci parametrede belirtilen özellikler kullanılarak özelleştirilir.

Kullanıcıların yaşadığı sorunları en aza indirmek için google.accounts.id.prompt(), kayıt olmak veya oturum açmak için düğmeyi kullanmaya alternatif olarak Tek Dokunma'yı göstermek üzere çağrılır.

GIS kitaplığı, HTML dokümanını g_id_onload olarak ayarlanmış bir kimlik özelliğine sahip öğeler veya g_id_signin içeren sınıf özellikleri için ayrıştırır. Eşleşen bir öğe bulunursa düğme, JavaScript'te de oluşturmuş olsanız bile HTML kullanılarak oluşturulur. Düğmenin iki kez ve muhtemelen çakışan parametrelerle gösterilmesini önlemek için HTML sayfalarınıza bu adlarla eşleşen HTML öğeleri eklemeyin.

Düğme Dili

Düğme dili, tarayıcının varsayılan dili veya Google oturumu kullanıcısının tercihiyle otomatik olarak belirlenir. Kitaplığı yüklerken hl parametresini ve dil kodunu src yönergesine ekleyerek ve HTML'de isteğe bağlı data-locale veya data-locale parametresini ya da JavaScript'te locale parametresini ekleyerek dili manuel olarak da seçebilirsiniz.

HTML

Aşağıdaki kod snippet'inde, istemci kitaplığı URL'sine hl parametresi eklenerek ve data-locale özelliği Fransızca olarak ayarlanarak düğmenin dilinin Fransızca olarak nasıl görüntüleneceğ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 google.accounts.id.renderButton yöntemi locale parametresi Fransızca olarak ayarlanmış şekilde çağrılarak düğmenin dilinin Fransızca olarak nasıl görüntüleneceğ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, kullanıcı tarayıcısına veya doğrudan platformunuz tarafından barındırılan bir giriş uç noktasına kimlik jetonu olarak bilinen bir JSON Web Token (JWT) kimlik bilgisi döndürür.

JWT'yi almayı tercih ettiğiniz yer, düğmeyi HTML veya JavaScript kullanarak oluşturup oluşturmadığınıza ve pop-up ya da yönlendirme kullanıcı deneyimi modunun kullanılıp kullanılmadığına bağlıdır.

popup kullanıcı deneyimi modu kullanıldığında, oturum açma kullanıcı deneyimi akışı pop-up pencerede gerçekleştirilir. Bu mod, kullanıcılar için genellikle daha az rahatsız edici bir deneyim sunar ve varsayılan kullanıcı deneyimi modudur.

Düğmeyi oluştururken:

HTML

Şunlardan birini ayarlayabilirsiniz:

  • JWT'yi geri çağırma işleyicinize döndürmek için data-callback veya
  • data-login_uri Google'ın POST isteği kullanarak JWT'yi doğrudan giriş uç noktanıza göndermesi için.

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

JavaScript

callback belirtmeniz gerekir. Düğme JavaScript'te oluşturulurken pop-up modu yönlendirmeleri desteklemez. Ayarlanırsa login_uri yoksayılır.

JS geri çağırma işleyicinizdeki JWT'nin kodunu çözme hakkında daha fazla bilgi için Döndürülen kimlik bilgisi yanıtını işleme başlıklı makaleye bakın.

Yönlendirme modu

redirect kullanıcı deneyimi modunu kullanmak, kullanıcının tarayıcısının tam sayfa yönlendirmesini kullanarak oturum açma kullanıcı deneyimi akışını gerçekleştirir ve Google, POST isteği kullanarak JWT'yi doğrudan giriş uç noktanıza döndürür. Bu yöntem genellikle kullanıcılar için daha fazla müdahale gerektiren bir deneyim sunsa da en güvenli oturum açma yöntemi olarak kabul edilir.

Düğmeyi oluştururken:

  • HTML'de data-login_uri öğesini isteğe bağlı olarak giriş uç noktanızın URI'sine ayarlayın.
  • JavaScript'te login_uri parametresini isteğe bağlı olarak giriş uç noktanızın URI'sine ayarlayın.

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

Giriş uç noktanızın URI'si

data-login_uri veya login_uri öğesini ayarlarken HTTPS ve mutlak bir 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ı hakkında ayrıntılı bilgi için Güvenli JavaScript kaynakları ve yönlendirme URI'leri kullanma başlıklı makaleyi inceleyin.