Menyesuaikan tombol login yang dirender secara otomatis (direkomendasikan)
Untuk membuat tombol Login dengan Google dengan setelan kustom, tambahkan elemen yang memuat tombol login ke halaman login, tulis fungsi yang memanggil signin2.render() dengan setelan gaya dan cakupan, dan sertakan skrip https://apis.google.com/js/platform.js dengan string kueri onload=YOUR_RENDER_FUNCTION.
Berikut adalah contoh tombol Login dengan Google yang menentukan parameter gaya kustom:
Kode HTML, JavaScript, dan CSS berikut menghasilkan tombol di atas:
<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>
Anda juga dapat menentukan setelan untuk tombol Login dengan Google kustom dengan menentukan atribut data- ke elemen div dengan class g-signin2. Contoh:
<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">
Membuat tombol dengan grafik kustom
Anda dapat membuat tombol Login dengan Google agar sesuai dengan desain situs Anda. Anda harus mengikuti pedoman branding dan menggunakan warna serta ikon yang sesuai di tombol Anda. Pedoman {i>branding<i} juga menyediakan aset ikon yang dapat Anda gunakan untuk mendesain tombol. Anda juga harus memastikan bahwa tombol Anda sama terlihatnya dengan opsi login pihak ketiga lainnya.
Berikut adalah contoh tombol Login dengan Google yang dibuat dengan grafik kustom:
Kode HTML, JavaScript, dan CSS berikut menghasilkan tombol di atas:
<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>