Personalizzare il pulsante di accesso visualizzato automaticamente (opzione consigliata)
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 chiami
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 pulsante Accedi con Google che specifica parametri di stile personalizzati:
Il seguente codice HTML, JavaScript e CSS genera il pulsante sopra indicato:
<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 per un pulsante Accedi con Google personalizzato definendo
gli attributi 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 da adattare al design del tuo sito. Devi seguire le linee guida per il branding e utilizzare i colori e le icone appropriati nel pulsante. Le linee guida per il branding forniscono anche asset per le icone che puoi utilizzare per progettare il tuo pulsante. Devi inoltre assicurarti che il pulsante sia ben visibile quanto altre opzioni di accesso di terze parti.
Di seguito è riportato un esempio di pulsante Accedi con Google creato con un'immagine personalizzata:
Il seguente codice HTML, JavaScript e CSS genera il pulsante sopra indicato:
<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>