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.
Kullanıcı bir Google Hesabı seçip izin verdikten sonra Google, kullanıcı profilini JSON Web Token (JWT) kullanarak paylaşır. Oturum açma ve kullanıcı deneyimi sırasındaki adımlara genel bakış için İşleyiş şekli bölümüne bakın. 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
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çma düğmesini görüntülemek için düğmeyi giriş sayfanızda 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 parametrelere göre özelleştirilir.
Aynı sayfada Google ile oturum açma düğmesi ve Google One Tap'i görüntülemek için data-auto_prompt="false" öğesini kaldırın. Bu, kullanıcı deneyimini iyileştirmek 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
JavaScript'i 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ç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ı deneyimini en aza indirmek için google.accounts.id.prompt() çağrılır. Bu çağrı, kayıt veya oturum açma düğmesinin ikinci bir alternatifi olarak Tek Dokunma'yı görüntülemek için kullanı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'te de oluşturulmuş olsa bile HTML kullanılarak oluşturulur. Düğmenin iki kez gösterilmesini (muhtemelen çakışan parametrelerle) ö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 diline veya Google oturumu kullanıcısının tercihine göre otomatik olarak belirlenir. Ayrıca, kitaplığı yüklerken src yönergesine hl parametresini ve dil kodunu, HTML'de isteğe bağlı data-locale veya locale parametresini data-locale, JavaScript'te ise locale parametresini ekleyerek dili manuel olarak 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üğ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, kullanıcının tarayıcısından veya doğrudan platformunuz tarafından barındırılan bir giriş uç noktasından kimlik jetonu olarak bilinen bir JSON Web Token (JWT) kimlik bilgisi döndürür.
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.
Pop-up modu
popup kullanıcı deneyimi modu kullanıldığında oturum açma kullanıcı deneyimi akışı bir pop-up pencerede gerçekleştirilir. Bu, kullanıcılar için genellikle daha az müdahaleci bir deneyimdir ve varsayılan kullanıcı deneyimi modudur.
Düğmeyi aşağıdakilerle oluştururken:
HTML
Aşağıdakilerden birini ayarlayabilirsiniz:
data-callbackdöndürerek JWT'yi geri çağırma işleyicinize döndürebilir veyadata-login_uri, Google'ın JWT'yi doğrudan POST isteği kullanarak giriş uç noktanıza göndermesi için.
Her iki değer de ayarlanmışsa data-callback, data-login_uri'a göre öncelikli olur. 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.
JS geri çağırma 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, kullanıcının tarayıcısının tam sayfa yönlendirmesi kullanılarak oturum açma kullanıcı deneyimi akışı gerçekleştirilir ve Google, JWT'yi doğrudan POST isteği kullanarak giriş uç noktanıza döndürür.
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 aşağıdakilerle oluştururken:
- HTML'de isteğe bağlı olarak
data-login_urideğerini giriş uç noktanızın URI'sine ayarlayın. - JavaScript'te isteğe bağlı olarak
login_urideğerini 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ç noktası URI'niz
data-login_uri veya login_uri ayarı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 ş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.