First of all create an app for your website on google.
1. To do so first you have to create a project on https://cloud.google.com/console Enter the Project name and Project ID which is available and follow the steps.
2. In the sidebar on the left, select APIs & auth. In the displayed list of APIs, make sure the Google+ API status is set to ON.
3. In the sidebar on the left, select Registered apps. At the top of the page, select Register App. Fill out the form and select Register. Now follow the following steps:
I. Expand the OAuth 2.0 Client ID section.
II. In the Web origin field, enter your origin i.e. If you are gonna enable the sign in option on www.example.com fill http://www.example.com and press Enter and also add a new one http://localhost:8080(optional)
III. Enter the redirect URI.
IV. Now copy the CLIENT ID
4. To make it better click on consent screen you can upload logo and Product name.
Now it´s almost done, Following is the code to be pasted on your web page :
-----------------------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
(function() {
var po = document.createElement(´script´); po.type = ´text/javascript´; po.async = true;
po.src = ´https://apis.google.com/js/client:plusone.js´;
var s = document.getElementsByTagName(´script´)[0]; s.parentNode.insertBefore(po, s);
})();
function signinCallback(authResult) {
if (authResult[´status´][´signed_in´]) {
document.getElementById(´signinButton´).setAttribute(´style´, ´display: none´);
gapi.client.load(´plus´,´v1´, loadProfile);
} else {
console.log(´Sign-in state: ´ + authResult[´error´]);
}
}
function loadProfile(){
var request = gapi.client.plus.people.get( {´userId´ : ´me´} );
request.execute(loadProfileCallback);
}
function loadProfileCallback(obj) {
profile = obj;
email = obj[´emails´].filter(function(v) {
return v.type === ´account´;
})[0].value;
displayProfile(profile);
}
function displayProfile(profile){
var name=profile[´displayName´];
//you can store this information in database
document.getElementById(´name´).innerHTML=name;
document.getElementById(´email´).innerHTML=email;
}
</script>
<span id="signinButton">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="XXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-height="tall"
data-width="wide"
data-scope="https://www.googleapis.com/auth/plus.profile.emails.read"></span></span>
<div id="name"></div>
<div id="email"></div>
-----------------------------------------------------------------------------------------------------------------------------------------
In the above code set the data-clientid="Your Client Id Recently copied by you."
To customize the button you can change the attribute for more details : https://developers.google.com/+/web/signin/reference#sign-in_button_attributes
