Kullanıcıların web uygulamanızda kaydolmasını veya oturum açmasını sağlamak için sitenize bir Tek Dokunuş istemi ekleyin. İstemi oluşturmak ve özelleştirmek için HTML ve JavaScript'i 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
Tek Dokunuş'un gösterilmesini istediğiniz tüm sayfalara bir kod snippet'i yerleştirin.
HTML
JWT kimlik bilgisini bir giriş uç noktasına döndürerek Tek Dokunuş istemini gösterin.
<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 oturum açma uç noktasının URI'sidir. Google tarafından verilen kimlik jetonuyla birlikte oturum açma uç noktanıza gönderilen özel veri özellikleri ekleyebilirsiniz.
Desteklenen özelliklerin tam listesi için g_id_onload referansına bakın.
JavaScript
JWT kimlik bilgisini tarayıcının JavaScript geri çağırma işleyicisine döndürerek Tek Dokunuş istemini gösterin.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
JavaScript'te Tek Dokunma istemini 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.
Veri seçeneklerinin tam listesi için idConfiguration referansına bakın.
İstem durumu
İstem kullanıcı arayüzü durum bildirimlerini almak için prompt() yöntemine bir geri çağırma işlevi sağlayın.
HTML
Bildirim almak için JavaScript geri çağırma işleyicisi gerekir.
JavaScript
Burada, bildirim güncellemelerini işlemek için bir ok işlevi kullanılmaktadı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 isteği tek bir sayfada birlikte gösterilebilir.
HTML
Hem g_id_onload hem de g_id_signin öğelerini ekleyerek hem Google ile oturum aç düğmesini hem de OneTap istemini 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
Hem renderButton() hem de 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ışıyken geçerlidir. FedCM etkinleştirildiğinde tarayıcı, sayfa içeriğinin üstünde kullanıcı istemleri gösterir.
Son kullanıcıların gösterilen tüm bilgileri görmesini sağlamak için Google One Tap başka bir içerikle örtülmemelidir. Aksi takdirde, bazı durumlarda pop-up pencereler tetiklenebilir.
Google One Tap'in hiçbir zaman başka bir içerik tarafından örtülmediğinden emin olmak için sayfa düzeninizi ve öğelerin z-dizini özelliklerini tekrar kontrol edin. Kullanıcı deneyimi akışı değişikliği, kenarlıklardaki yalnızca tek bir piksel kapatıldığında bile tetiklenebilir.