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

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

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

Kullanıcı bir Google Hesabı seçip izin verdikten sonra Google, kullanıcı profilini bir JSON Web Jetonu (JWT) kullanarak paylaşır. Oturum açma ve kullanıcı deneyimi sırasında belirtilen adımlara genel bir bakış için İşleyiş şekli bölümüne bakın. Kişiselleştirilmiş düğmeyi anlayın, 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ğıdakileri tamamlayın:

Düğme oluşturma

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

HTML

JWT'yi platformunuzun giriş uç noktasına döndürerek HTML kullanarak oturum açma düğmesini 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ı olan bir öğe, Google ile Oturum Aç düğmesi olarak oluşturulur. Düğme, veri özelliklerinde sağlanan parametrelere göre özelleştirilir.

Google ile Oturum Aç düğmesi ile Google One Tap'i aynı sayfada göstermek için data-auto_prompt="false" alanını kaldırın. Kullanımı kolaylaştırmak ve oturum açma oranlarını iyileştirmek için bunu yapmanız önerilir.

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

JavaScript

JavaScript kullanarak oturum açma düğmesini 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ç düğmesi olarak görüntülenir. Bu örnekte, sayfadaki düğmeyi oluşturmak için buttonDiv kullanılmıştır. Düğme, renderButton için ikinci parametrede belirtilen özellikler kullanılarak özelleştirilir.

Kullanıcılarla yaşanabilecek olumsuzlukları en aza indirmek için google.accounts.id.prompt(), kayıt veya oturum açma düğmesini kullanmaya alternatif olarak One Tap hizmetini görüntülemesi için çağrılır.

Coğrafi Bilgi Sistemi kitaplığı, HTML dokümanını kimlik özelliği g_id_onload olarak ayarlanmış öğ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şturulmuş olup olmadığına bakılmadan HTML kullanılarak oluşturulur. Düğmenin iki kez gösterilmesini önlemek için, muhtemelen çakışan parametreler içeren HTML sayfalarınızda bu adlarla eşleşen HTML öğeleri eklemeyin.

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. Dili manuel olarak da seçebilirsiniz. Bunun için, kitaplığı yüklerken hl parametresini ve dil kodunu src yönergesine ekleyip HTML'de veya JavaScript'te yerel ayar'da isteğe bağlı veri-yerel ayarı ya da yerel ayar parametresi data-locale parametresini ekleyebilirsiniz.

HTML

Aşağıdaki kod snippet'inde, istemci kitaplığı URL'sine hl parametresi eklenerek ve data-locale özelliğini 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 google.accounts.id.renderButton yöntemi locale parametresi Fransızca'ya ayarlanarak çağrılmasıyla düğme 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 bilgilerini işleme

Kullanıcı izni verildikten sonra Google, kullanıcının 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ı seçtiğiniz konum, düğmeyi HTML veya JavaScript kullanarak oluşturmanıza 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, oturum açma kullanıcı deneyimi akışını pop-up pencerede gerçekleştirir. Bu, genellikle kullanıcılar için daha az rahatsız edici bir deneyimdir ve varsayılan kullanıcı deneyimi modudur.

Düğmeyi kullanarak oluştururken:

HTML

Aşağıdaki seçeneklerden birini belirleyebilirsiniz:

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

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

JavaScript

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

JS geri arama işleyicinizde JWT'nin kodunu çö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.

Yönlendirme modu

redirect kullanıcı deneyimi modu kullanıldığında, oturum açma kullanıcı deneyimi akışı, kullanıcının tarayıcısında tam sayfa yönlendirmesi yaparak gerçekleştirilir ve Google, JWT'yi bir POST isteği kullanarak doğrudan giriş uç noktanıza döndürür. Bu genellikle kullanıcılar için daha rahatsız edici bir deneyim olsa da en güvenli oturum açma yöntemi olarak kabul edilir.

Düğmeyi kullanarak oluştururken:

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

Bir değer sağlamazsanız Google, JWT'yi geçerli sayfanın URI'sına döndürür.

Giriş uç nokta URI'nız

data-login_uri veya login_uri ayarlarını yaparken 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 gereksinimlerinin ve doğrulama kurallarının tam açıklaması için Güvenli JavaScript kaynaklarını kullanma ve URI'leri yönlendirme bölümüne bakın.