Personalizzazione del pulsante di accesso con rendering automatico (consigliato)
Per creare un pulsante Accedi con Google con impostazioni personalizzate, aggiungi
un elemento che contenga il pulsante di accesso alla pagina di accesso, scrivi una funzione
che chiama
signin2.render()
con le tue impostazioni di stile e ambito,
e includi lo script https://apis.google.com/js/platform.js
con la stringa di query onload=YOUR_RENDER_FUNCTION
.
Di seguito è riportato un esempio di un pulsante Accedi con Google che specifica parametri di stile personalizzati:
Il seguente codice HTML, JavaScript e CSS genera il pulsante sopra:
<html> <head> <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com"> </head> <body> <div id="my-signin2"></div> <script> function onSuccess(googleUser) { console.log('Logged in as: ' + googleUser.getBasicProfile().getName()); } function onFailure(error) { console.log(error); } function renderButton() { gapi.signin2.render('my-signin2', { 'scope': 'profile email', 'width': 240, 'height': 50, 'longtitle': true, 'theme': 'dark', 'onsuccess': onSuccess, 'onfailure': onFailure }); } </script> <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script> </body> </html>
Puoi anche specificare le impostazioni di un pulsante Accedi con Google personalizzato definendo
data-
a un elemento div
con la classe g-signin2
. Ad esempio:
<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">
Creazione di un pulsante con un'immagine personalizzata
Puoi creare un pulsante Accedi con Google che si adatti al design del tuo sito. Devi seguire le linee guida per il branding e utilizzare i colori e le icone appropriate nel pulsante. Anche le linee guida per il branding fornire asset delle icone che puoi usare per progettare il pulsante. Devi inoltre Assicurati che il pulsante sia in evidenza quanto le altre opzioni di accesso di terze parti.
Di seguito è riportato un esempio di un pulsante Accedi con Google creato con una immagine:
Il seguente codice HTML, JavaScript e CSS genera il pulsante sopra:
<html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"> <script src="https://apis.google.com/js/api:client.js"></script> <script> var googleUser = {}; var startApp = function() { gapi.load('auth2', function(){ // Retrieve the singleton for the GoogleAuth library and set up the client. auth2 = gapi.auth2.init({ client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com', cookiepolicy: 'single_host_origin', // Request scopes in addition to 'profile' and 'email' //scope: 'additional_scope' }); attachSignin(document.getElementById('customBtn')); }); }; function attachSignin(element) { console.log(element.id); auth2.attachClickHandler(element, {}, function(googleUser) { document.getElementById('name').innerText = "Signed in: " + googleUser.getBasicProfile().getName(); }, function(error) { alert(JSON.stringify(error, undefined, 2)); }); } </script> <style type="text/css"> #customBtn { display: inline-block; background: white; color: #444; width: 190px; border-radius: 5px; border: thin solid #888; box-shadow: 1px 1px 1px grey; white-space: nowrap; } #customBtn:hover { cursor: pointer; } span.label { font-family: serif; font-weight: normal; } span.icon { background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat; display: inline-block; vertical-align: middle; width: 42px; height: 42px; } span.buttonText { display: inline-block; vertical-align: middle; padding-left: 42px; padding-right: 42px; font-size: 14px; font-weight: bold; /* Use the Roboto font that is loaded in the <head> */ font-family: 'Roboto', sans-serif; } </style> </head> <body> <!-- In the callback, you would hide the gSignInWrapper element on a successful sign in --> <div id="gSignInWrapper"> <span class="label">Sign in with:</span> <div id="customBtn" class="customGPlusSignIn"> <span class="icon"></span> <span class="buttonText">Google</span> </div> </div> <div id="name"></div> <script>startApp();</script> </body> </html>