In this article we will see how we can implement Google+ login for your web application. We will use the JavaScript SDK but Google has more than one SDKs available for your language of choice.
The article consists of two parts. The first part we will be the implementation of the login process while the second part will about getting the required credentials.
At first, we need to include the required libraries to our page.
<script src="https://apis.google.com/js/platform.js" async defer> </script> <script src="https://apis.google.com/js/client:platform.js" async defer> </script>
The gpLogin()
function will be called when the user clicks the Login with Google+ button. There we define the scope of our application, e.g. what data we need from Google+. The mySignInCallback()
will be called when
var gpLogin = function() { var myParams = { 'clientid': '<Google Plus API Key>', 'cookiepolicy': 'single_host_origin', 'callback': 'mySignInCallback', 'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email', 'requestvisibleactions': 'http://schema.org/AddAction' }; gapi.auth.signIn(myParams); };
The mySignInCallback()
will be called after the authentication completes. Then we make a call to load the plus library and then call the loadProfile()
as a callback. The callback will ask to get personal information and then a list with all public profiles in the user’s circles.
var mySignInCallback = function(authResult) { if (authResult['status']['signed_in'] && authResult['status']['method'] === 'PROMPT') { gapi.client.load('plus', 'v1', loadProfile); } }; var loadProfile = function() { var request = gapi.client.plus.people.get({ 'userId': 'me' }); request.execute(loadProfileCallback); request = gapi.client.plus.people.list({ 'userId': 'me', 'collection' : 'visible' }); request.execute(loadFriendsCallback); };
In this snippet we see how we read the desired data from the response from the previous two calls. The friends list returns the first N elements, so you need to make additional calls to get the entire list.
var loadProfileCallback = function(obj) { var data = {}; data.email = obj['emails'].filter(function (v) { return v.type === 'account'; // Filter out the primary email })[0].value; // get the email from the filtered results, should always be defined. data.image = obj.image.url.replace('?sz=50', ''); data.fullname = obj.name.givenName + ' ' + obj.name.familyName; data.id = obj.id; }; var loadFriendsCallback = function(obj) { if(obj.items.length === 0) return; var i =0; for(i = 0; i<obj.items.length; i++) { if(obj.items[i].objectType === 'person') { var friend = {}; friend.id = obj.items[i].id; friend.type = 'gplus'; friend.name = obj.items[i].displayName; friend.image = obj.items[i].image.url; friend.url = obj.items[i].url; friends.push(friend); } } if(obj.nextPageToken !== undefined) { // Get the next N friends var request = gapi.client.plus.people.list({ 'userId': 'me', 'collection' : 'connected', 'pageToken': obj.nextPageToken }); request.execute(loadFriendsCallback); } };
To get an API Key for Google+ go to Developers Console. There you create a new project and after creating it go to APIs & auth and APIs. You need to enable the Google+ API. Then go to APIs & auth and Credentials. Create a new Client ID and set Web application as its type. You need to provide the JavaScript Origin which is the domain referrer. You do not need to set any Redirect URIs since all interactions with the API are via AJAX. The generated Client ID is what you need for this code.
If you need to enable this for localhost, create a new Client ID. Make sure to include the port number (if any).
Leave a Reply