First off all you need to check that Google + API status is set to on or not. For this open https://cloud.google.com/console . 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. Next you have to follow the following step :
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
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>
-----------------------------------------------------------------------------------------------------------------------------------------
