Google API to authenticate on website using Java Script

In this blog I will explain how you can use Google API to authenticate users using Google Account and allow them to logged in to your own website.

To do this you need to create an App/Project in Google developer dashboard which will allow your website users to authenticate using OAuth.



So to do.
1. Open below url :

https://console.developers.google.com



2.  Click on Google + API and then from below screen, Click on Credentials from left side pane.



3. Click on "Create a project"

4. Give a name to your project and fill required filled then click on "Create"




5. Once project created , click on "Credentials" from left side.

6. Below screen will appear.



7. Now click on "Create Credentials", Select "API Key" from available options.

8. Now select "Browser Key" as we will be doing this for web site.



9. Give a name to your API, by default name is "Browser key 1", give url of your website, localhost or full domain url if you have and click on save.



10. Again click on "Create Credentials", select OAuth client ID



11. Click on "Configure Consent Screen"



12. Fill details accordingly and click on save.



13. Now select "Web Application" and fill required fields, as shown, then click on save.



14. Now your API key and OAuth2.0 Client ID created.



15. Now from here your coding part starts.

You may proceed with client side coding or server side coding, depending on your requirement and environment.

In this blog I will do the implementation using client side.

Put this code within body tag:

<a href="#" id="googlelogin">Google + Login</a>

This is your anchor tag, when user clicks on this link google API will trigger.
Below is client side API code.
Put this code within head tag of page, or you may create a separate script file and link this file to your html or aspx page.


var clientId = "xxxxxxxxxx-xxxxxxxxxxxxx.apps.googleusercontent.com";
var apiKey = "xxxxxxxxxxxxxx";
var scopes = 'profile email https://www.googleapis.com/auth/drive.readonly';
var google = false;


// Use a button to handle authentication the first time.
function handleClientLoad() {
    gapi.client.setApiKey(apiKey);
    checkAuth();
    
}

function checkAuth() {
    gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: true }, handleAuthResult);
}


function handleAuthResult(authResult) {

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

function handleAuthClick(event) {
    //startWait();
    gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, handleAuthResult);

    return false;
}

// Load the API and make an API call.  Display the results on the screen.
function makeApiCall() {
    gapi.client.load('plus', 'v1', function () {
        var request = gapi.client.plus.people.get({
            'userId': 'me'

        });

        request.execute(function (resp) {
            //Do your Stuff here
           //Now You may access user id, name, display name, gender, emails, etc.
            var email= resp.emails[0].value;
            var dispname = resp.displayName;
            var profilepic = resp.image.url;
                        
            //For more info visit https://developers.google.com/+/api/latest/people#resource
        });
    });
}

$(function () {
    var authorizeButton = document.getElementById('googlelogin');
    authorizeButton.onclick = handleAuthClick;
})


Don't forget to leave a comment if you like this blog.





Comments

Popular posts from this blog

CAML Query in SharePoint 2010

Calling REST APi from server side code - C#

All about SharePoint 2010 Content Type Hub

SharePoint Interview Questions and Answers

Calling ASP.Net WebMethod using jQuery AJAX