Kullanıcıların web uygulamanıza kaydolmasına veya uygulamada oturum açmasına olanak tanımak için sitenize tek dokunma istemi ekleyin. İstem oluşturmak ve özelleştirmek için HTML ve JavaScript kullanın.
Ö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.
Giriş sayfanıza Google ile oturum açma düğmesi ekleyin.
İstem oluşturma
One Tap'in gösterilmesini istediğiniz tüm sayfalara bir kod snippet'i yerleştirin.
HTML
One Tap istemini göstererek JWT kimlik bilgisini bir giriş uç noktasına döndürür.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
data-login_uri özelliği, web uygulamanızın giriş uç noktasının URI'sidir. Google tarafından verilen kimlik jetonuyla birlikte giriş uç noktanıza gönderilen özel veri özellikleri ekleyebilirsiniz.
İsteğe bağlı olarak, içeriğini değiştiremediğiniz statik HTML sayfalarında One Tap isteminin gösterilip gösterilmeyeceğini kontrol etmek için data-skip_prompt_cookie özelliğini ve bir çerez kullanın. Belirtilen çerez ayarlanırsa istem gösterilmez.
İstem başlığında kullanılan metni değiştirmek için isteğe bağlı data-context özelliğini kullanın. Örneğin, data-context: "signup" "Şuraya giriş yapın" ifadesini "Şuraya kaydolun" olarak değiştirir.
Varsayılan olarak, kullanıcı istemin dışını tıkladığında tek dokunma istemi otomatik olarak kapanır. data-cancel_on_tap_outside özelliğini yanlış olarak ayarlarsanız bu davranışı devre dışı bırakabilirsiniz.
Desteklenen özelliklerin tam listesi için g_id_onload referansına bakın.
JavaScript
Tek Dokunma istemini göstererek JWT kimlik bilgisini tarayıcının JavaScript geri çağırma işleyicisine döndürür.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
Tek Dokunma istemini JavaScript'te yapılandırmak için önce initialize() yöntemini çağırmanız gerekir. Ardından, istem kullanıcı arayüzünü görüntülemek için prompt() yöntemini çağırın.
İstem başlığında kullanılan metni değiştirmek için isteğe bağlı context alanını kullanın.
Örneğin, context: 'signup' "Oturum aç"ı "Kaydol" olarak değiştirir.
Varsayılan olarak, kullanıcı istemin dışını tıkladığında tek dokunma istemi otomatik olarak kapanır. cancel_on_tap_outside özelliğini yanlış olarak ayarlarsanız bu davranışı devre dışı bırakabilirsiniz.
Veri seçeneklerinin tam listesi için idConfiguration referansına bakın.
İstem durumu
İstem kullanıcı arayüzü durum bildirimlerini dinlemek için bir JavaScript geri çağırma işlevi kullanın.
Aşağıdaki anlarda bildirim gönderilir:
Görüntüleme anı: Bu,
prompt()yöntemi çağrıldıktan sonra gerçekleşir. Bildirim, kullanıcı arayüzünün gösterilip gösterilmediğini belirten bir Boole değeri içerir.Atlanan an: Bu durum, One Tap istemi otomatik iptal, manuel iptal ile kapatıldığında veya Google, seçilen oturumun Google'dan oturumu kapatıldığında olduğu gibi bir kimlik bilgisi veremediğinde gerçekleşir.
Bu durumda, varsa bir sonraki kimlik sağlayıcıya geçmenizi öneririz.
Kapatılan an: Bu durum, Google kimlik bilgilerini başarıyla aldığında veya kullanıcı kimlik bilgilerini alma akışını durdurmak istediğinde gerçekleşir. Örneğin, kullanıcı giriş iletişim kutusuna kullanıcı adını ve şifresini girmeye başladığında, tek dokunma istemini kapatmak ve kapatma anını tetiklemek için
google.accounts.id.cancel()yöntemini çağırabilirsiniz.
HTML
JavaScript geri çağırma işlevini belirtmek için data-moment_callback özelliğini kullanın. Bildirim almak için geri arama işleyicisi gerekir.
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
Kullanıcılarınızın oturum açmasını veya kaydolmasını kolaylaştırmak için kullanılabilir kimlik bilgilerini bulmak üzere birden fazla kimlik sağlayıcıyla iletişim kurabilirsiniz. Bir sonraki kimlik sağlayıcıyı arayabilmek için istem kullanıcı arayüzümüzün durumunu bilmek isteyebilirsiniz.
JavaScript
Geri çağırma işleyicinizi google.accounts.id.prompt parametresi olarak iletin. Burada, bildirim güncellemelerini işlemek için bir ok işlevi kullanılır.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
Düğme ve istem
Google ile oturum aç düğmesi ve One Tap istemi tek bir sayfada birlikte gösterilebilir.
HTML
Hem g_id_onload hem de g_id_signin öğelerini ekleyerek Google ile oturum aç düğmesini ve One Tap istemini birlikte gösterin.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="https://your.domain/your_login_endpoint"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
JavaScript
renderButton() ve prompt() işlevlerini aynı anda çağırarak Google ile oturum açma düğmesini ve One Tap istemini görüntüleyin.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>
One Tap'i kapatmayın
Bu bölüm yalnızca FedCM devre dışı olduğunda geçerlidir. FedCM etkin olduğunda tarayıcı, sayfa içeriğinin üzerinde kullanıcı istemleri gösterir.
Son kullanıcıların gösterilen tüm bilgileri görebilmesi için Google One Tap başka bir içerikle kaplanmamalıdır. Aksi takdirde, bazı durumlarda pop-up pencereler tetiklenebilir.
Google Tek Dokunuş'un herhangi bir zamanda başka bir içerikle kaplanmadığından emin olmak için sayfa düzeninizi ve öğelerin z-index özelliklerini tekrar kontrol edin. Kenarlardaki tek bir piksel kaplandığında bile kullanıcı deneyimi akışındaki değişiklik tetiklenebilir.
Kimlik bilgisi yanıtı
Kimlik bilgisi yanıtına Google imzalı bir JWT dahildir. Yanıt, JavaScript geri çağırma işlevi kullanılarak tarayıcıya veya bir giriş uç noktasına yönlendirme yoluyla platformunuza döndürülür.
JS geri çağırma
Geri çağırma işlevini yapılandırmak için HTML veya JavaScript kullanın.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
Örneğin, handleCredentialResponse, JWT'yi kodunu çözerek kimlik jetonu alanlarından bazılarını konsola yazdırır.
<script>
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
function decodeJwtResponse(token) {
let base64Url = token.split('.')[1];
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
</script>
Yönlendirme
Kimlik bilgisini platformunuzun giriş uç noktasına döndürmek için URL'yi OAuth 2.0 web istemcinizin Yetkilendirilmiş yönlendirme URI'si ayarlarına ekleyin.
Yönlendirme URI'si yapılandırmak için HTML veya JavaScript kullanın.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-ux_mode="redirect"
data-login-uri="YOUR_LOGIN_URI"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});