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.

Google API to authenticate on website using JavaScript

So to do.
1. Open below url :

https://console.developers.google.com

Google API to authenticate on website using JavaScript

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

Google API to authenticate on website using JavaScript

3. Click on "Create a project"

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

Google API to authenticate on website using JavaScript


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

6. Below screen will appear.

Google API to authenticate on website using JavaScript

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

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

Google API to authenticate on website using JavaScript

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.

Google API to authenticate on website using JavaScript

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

Google API to authenticate on website using JavaScript

11. Click on "Configure Consent Screen"

Google API to authenticate on website using JavaScript

12. Fill details accordingly and click on save.

Google API to authenticate on website using JavaScript

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

Google API to authenticate on website using JavaScript

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

Google API to authenticate on website using JavaScript

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.

Put this code within body tag:

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

This is your anchor tag, when a user clicks on this link google API will trigger.
Below is client side API code.
Put this code within head tag of the 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

C# 6.0 New Features

SharePoint Interview Questions and Answers

Calling ASP.Net WebMethod using jQuery AJAX

What is Cloud Computing - A guide for beginners