Many a times we need to authenticate our users through social media such as facebook, twitter and google+. Today I will be discussing how to login to the system using Google+ credentials without using any sdk but through javascript.

Using the below code you will not be needing any additional sdk to include in your project but can directly use google api's to do the authentication.

Code Snippet

<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:platform.js?onload=handleClientLoad';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

var clientId = 'your google app client ID';
var apiKey = 'your google app client Secret key';

var scopes = 'https://www.googleapis.com/auth/plus.login';
function handleClientLoad() {
gapi.client.setApiKey(apiKey);
window.setTimeout(handleAuthResult, 1);
}

function handleCallApi(authResult) {
if (authResult && !authResult.error) {
makeApiCall();
}
}

function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
authorizeButton.onclick = handleAuthClick;
}

function handleAuthClick(event) {
gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, handleCallApi);
return false;
}
function makeApiCall() {
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
request.execute(function (resp) {
var email = resp.id.toString();
"Execute your code that you want once the user is logged in. You will get user google+ details in resp"
});
});
}
</script>

This small piece of code can save you numerous of hours struggling with sdk versions and server side programming.

Happy Coding....