Integrating Google Sign-In into your Web / Mobile App with JSON API User Plus Plugin

Google Sign-in integration in your web and mobile app is quite basic feature these days. Almost every app allows users to sign-in with Google account. While Google provides some support and Token id for sign-in, you are still left to integrate using REST API with WordPress. JSON API User Plus plugin provides you google-connect endpoint to do that easily.

This post describes how to complete a basic Google Sign-In integration using REST API endpoint call with WordPress.

Step 1 – Create Authorization Credentials

Any application that uses OAuth 2.0 to access Google APIs must have authorization credentials that identify the application to Google’s OAuth 2.0 server. The following steps explain how to create credentials for your project. Your applications can then use the credentials to access APIs that you have enabled for that project.

1. Go to the Credentials page.
2. Click Create credentials > OAuth client ID.
3. Select the Web application application type.
4. Name your OAuth 2.0 client and click Create

After configuration is complete, take note of the client ID that was created. You will need the client ID to complete the next steps. (A client secret is also created, but you need it only for server-side operations.)

Step 2 – Load the Google Platform Library

You must include the Google Platform Library on your web pages that integrate Google Sign-In. Follow the instructions on this page to include js file and client id.

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
   var id_token = googleUser.getAuthResponse().id_token;
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
  console.log('Token: ' + id_token); // This is null if the 'email' scope is not present.
}
 

Step 3 – Call the User Plus endpoint

Here is the Google sign in demo page using JSON API User Plus Plugin googleconnect endpoint.

Please check the code, you need to replace the Google Project client id and call to your UserPlus api to make it work for you.

 
var apiUrl = 'https://www.wppim.com/api/userplus/google_connect/?key=API-KEY&id_token='+id_token;
    fetch(apiUrl).then(response => {
      return response.json();
    }).then(data => {
      // Work with JSON data here
      console.log(data);

 

Hope that helps.