Demo – Login with Google Plus Javascript API

3

In this tutorial, I have covered how to implement Login with Google plus using Google JavaScript API. Follow the steps to add Login In with Google + functionality to your website.

Step 1). You need to get Google Browser API key from https://console.developers.google.com

Follow this : How to get Google API key
Note: You need to enable “Google+ API” in your project. You need to add your domain to Client “Javascript Origins”

Step 2). Add Asynchronous Google client JS to HTML. (before </body> tag)

After script is loaded, onLoadCallback() callback is called.

Step 3) Add a function onLoadCallback() in JavaScript. In the function set Google API key and load Google + API.

Step 4) Add Login and Logout buttons to your page

Step 5) Implement login(), logout() functions.

clientid -> you need to get this from Google Console
callback -> callback function is called when sign in request is done.
approvalprompt -> To show Request approval every time
scope -> Space separated list of oauth scopes

Response from the signIn request in the below format:

Step 6: Add loginCallback() function and check the response whether user is successfully logged in or not

Step 7) Once the login is successful, You can get the user profile and email using the code

Response for the gapi.client.plus.people.get() API is:

Step 8). Add logout() function

Putting All Together: Login With Google plus JavaScript example code

 

Leave A Reply

Your email address will not be published.