Se preferisci, puoi utilizzare solo il codice JavaScript per attivare la richiesta One Tap o visualizzare il pulsante Accedi con Google.
Per configurare la richiesta One Tap in JavaScript, devi prima chiamare il metodo
initialize()
. Quindi, chiama il metodo prompt()
per visualizzare l'UI della richiesta. Vedi il seguente snippet di codice:
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID ',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
}
</script>
Per ricevere notifiche sullo stato dell'interfaccia utente, fornisci una funzione di callback al metodo prompt()
. Vedi il seguente snippet di codice:
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID ',
callback: handleCredentialResponse
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
Il codice di esempio riportato di seguito mostra come visualizzare sia One Tap sia il pulsante Accedi con Google in JavaScript.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID ',
callback: handleCredentialResponse
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>