Dostosowywanie automatycznie renderowanego przycisku logowania (zalecane)
Aby utworzyć przycisk logowania przez Google z ustawieniami niestandardowymi, dodaj
element zawierający przycisk logowania na stronie logowania, napisz funkcję
który dzwoni
signin2.render()
z ustawieniami stylu i zakresu,
i dołącz skrypt https://apis.google.com/js/platform.js
z ciągiem zapytania onload=YOUR_RENDER_FUNCTION
.
Poniżej znajduje się przykład przycisku logowania Google, który określa niestandardowe parametry stylu:
Powyższy przycisk tworzy się za pomocą poniższego kodu HTML, JavaScript i CSS:
<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>
Możesz również określić ustawienia niestandardowego przycisku logowania przez Google, definiując
data-
wskazuje element div
o klasie g-signin2
. Na przykład:
<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">
Tworzenie przycisku z niestandardową grafiką
Możesz utworzyć przycisk logowania Google dopasowany do wyglądu Twojej witryny. Musisz przestrzegać wytycznych dotyczących promowania marki odpowiednie kolory i ikony w przycisku. Wytyczne dotyczące budowania marki udostępnij zasoby ikon, których możesz użyć do zaprojektowania przycisku. Musisz też Upewnij się, że przycisk jest tak widoczny, jak opcje logowania innych firm.
Poniżej znajduje się przykład przycisku logowania przez Google wbudowanego w niestandardowy, treści drastyczne:
Powyższy przycisk tworzy się za pomocą poniższego kodu HTML, JavaScript i CSS:
<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>