Customizing the automatically rendered sign-in button (recommended)
To create a Google Sign-In button with custom settings, add
an element to contain the sign-in button to your sign-in page, write a function
that calls signin2.render()
with your style and scope settings,
and include the https://apis.google.com/js/platform.js
script
with the query string onload=YOUR_RENDER_FUNCTION
.
The following is an example of a Google Sign-In button that specifies custom style parameters:
The following HTML, JavaScript, and CSS code produces the button above:
< 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 >
You can also specify settings for a custom Google Sign-In button by defining data-
attributes to a div
element with the class g-signin2
. For example:
<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">
Building a button with a custom graphic
You can build a Google Sign-In button to fit your site's design. You must follow the branding guidelines and use the appropriate colors and icons in your button. The branding guidelines also provide icon assets that you can use to design your button. You must also ensure that your button is as prominent as other third-party login options.
The following is an example of a Google Sign-In button built with a custom graphic:
The following HTML, JavaScript, and CSS code produces the button above:
< 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 : 190 px ; border - radius : 5 px ; border : thin solid #888; box - shadow : 1 px 1 px 1 px 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 5 px 50 % no - repeat ; display : inline - block ; vertical - align : middle ; width : 42 px ; height : 42 px ; } span . buttonText { display : inline - block ; vertical - align : middle ; padding - left : 42 px ; padding - right : 42 px ; font - size : 14 px ; 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 >
