Understanding Google OAuth (Open Authorization)

Introduction

In my previous articles, I elucidated MERN stack development, concluding the discussion on CRUD operations within those articles. I illustrated these concepts using a sample scenario of a student management system, where I covered Create, Read, Update, and Delete operations employing the following technologies: Backend - Node.js API, Frontend - React.js, and Database - MongoDB. Furthermore, I have addressed the subsequent topics in separate articles:

MERN Stack Development

Backend: Node.js API and Database: MongoDB.

1. MVC Architecture With Node.js CRUD Application [Node.js-Express-MongoDB]

Frondeend: React js

1. Create in React.js CRUD Operations.
2. Read in React.js CRUD Operations.
3. Update in React.js CRUD Operations.
4. Delete in React.js CRUD Operations.

I trust that these articles will prove invaluable to beginners venturing into MERN stack development, facilitating a smoother learning experience.

Today I’m going to explain the new topic of Google OAuth, What is Google OAuth? Why to use this?

Now, let's shift our focus to the core topic - Google OAuth.

What is Google OAuth?

Google OAuth, an implementation of the Open Authorization protocol, serves as a standard mechanism allowing third-party applications to access user data securely without exposing user credentials. This authentication and authorization solution plays a pivotal role in enhancing the security and privacy of web and mobile applications.

The Significance of Google OAuth

User Convenience and Security

• Users can log in using existing Google credentials, streamlining the registration process.
• Industry-standard security protocols ensure secure authentication and data access.
• User credentials remain confidential, mitigating the risk of unauthorized access.

Trust, Reliability, and Single Sign-On (SSO)

• Google's trusted authentication system instills user confidence.
• Seamless access to applications for users already signed in to Google services.
• The reliability of Google's infrastructure ensures a robust authentication solution.

Access to Google Services

• Integration allows access to various Google services like Gmail, Google Drive, and Calendar.
• Enables applications to offer enhanced features by leveraging Google service data.

Developer Resources and Compliance

• Google provides comprehensive documentation, SDKs, and developer tools.
• Large developer community support ensures robust OAuth implementation.
• Compliance with industry standards ensures security and privacy adherence.

Cross-Platform Integration

• Supports web applications, mobile apps (iOS and Android), and other services.
• Ensures flexibility and compatibility across diverse platforms.

Google API Console

The Google API Console is a web-based platform provided by Google that allows developers to manage and interact with various Google APIs (Application Programming Interfaces). APIs are sets of rules and tools that enable different software applications to communicate with each other. Google provides a wide range of APIs that developers can use to integrate Google services into their applications or websites.

Implementing Google OAuth

1. Google API Console

Step 1. Go to the Google API Console.

Open your web browser and navigate to the Google API Console.

• Go to Google and search “google.developer.console” this Key and select the first link https://console.cloud.google.com/cloud-resource-manager

Step 2. Create a new project.

If you don't have a project yet, click on the project drop-down menu at the top left of the page, then click "New Project." Give your project a name and click "Create."

Picture 1. Click on the “Create Project." Button.

Picture 2. Enter a name for your project and click "Create."

It takes a few seconds to create a project.

Picture 3. Click on the "Select Project."

Step 3. Enable APIs and Services.

In the API Console, click on the "APIs and Services" button.

Picture 4. In the left sidebar, click on "APIs & Services" > "Library.

Go to Library and Search for the API you want to use (e.g., Google+ API, Google Drive API, Gmail API, etc.) and select it. Click on the "Enable" button.

Picture 5. Search for "Google+ API" and click on it. Click the "Enable" button.

After enabling the API, In the left sidebar, click on "APIs & Services" > "Credentials."

Picture 6. Click on the "Credentials" tab in the left sidebar.

Step 4. Create Credentials.

Click on the "Create Credentials" button and choose "OAuth client ID" from the drop-down menu.

Picture 7. Click on the "Create Credentials" drop-down menu and select "OAuth client ID."

2. Create OAuth 2.0 Credentials

Step 5. Configure the OAuth consent screen.

If prompted, configure the OAuth consent screen. This screen is where you define the information that will be shown to users when they authorize your application.

Step 5.1

Picture 8. Click on the "Configure consent screen".

Step 5.2

Picture 9. Select the External and Click on the Create “Button”.

Step 5.3

Fill in the necessary information, such as the name of the OAuth, App and Developer contact information. Continue clicking on the SAVE AND CONTINUE button.

Picture 10. Enter your App information. And Developer contact information. After clicking on the save button.

Step 5.4

Scopes express the permissions that you request users to authorize for your app and allow your project to access specific types of private user data from their Google Account.

Picture 11. Scopes express the permissions that you request users to authorize.

1. I checked /auth/user info. email and /auth/user info. profile
2. Go down on the page and click on the Update button.

Step 5.5

You can move to the Scopes and Continue clicking on the SAVE AND CONTINUE button.

Picture 12. Continue to click the SAVE AND CONTINUE button.

Step 5.6

Move to Test users, and While the publishing status is set to 'Testing,' only test users can access the app. Otherwise, we can continue clicking on the SAVE AND CONTINUE button.

Picture 13. Continue to click the SAVE AND CONTINUE button.

Step 5.7. Move to summary and back to Dashboard

3. Configure OAuth Client ID

Step 6. Configure the OAuth client ID.

In the "Create OAuth client ID" page, select the application type (Web application, Android, iOS, etc.).

Fill in the necessary details like the name of your client, authorized redirect URIs (where Google will send the user after they approve the access), etc.

Go to Credentials. Click on the “CREATE CREDENTIALS” drop-down menu and select "OAuth client ID."

Picture 14. Click on the OAuth client ID and Continue.

Create OAuth Client ID

Step 6.1. Choose the application type (Web application, Android, iOS, etc.).

Choose the application type “Web application” and Enter your application name.

Picture 15. Select the Application type as a web application and enter your application name.

Step 6.2. Enter application details and authorized redirect URIs.

Enter the Authorised JavaScript origins and Authorised redirect URIs.

1. Authorized JavaScript origins: The HTTP origins that host your web application. This value can't contain wildcards or paths. If you use a port other than 80, you must specify it. Ex: http://localhost:3000
2. Authorized redirect URIs: Users will be redirected to this path after they have authenticated with Google. The path will be appended with the authorization code for access and must have a protocol.

Picture 16. Enter the Authorised JavaScript origins and Authorised redirect URIs. Continue to click the Create button.

Click on the "Create" button.

4. Download and Use Credentials

Step 7. Download the Credentials.

Step 7.1. Download OAuth client ID credentials as a JSON file.

After creating the OAuth client ID, you will be able to download the credentials as a JSON file. This file contains information such as the client ID and client secret, which your application will use to authenticate with Google APIs.

Picture 17. Download the credentials as a JSON file

Step 7.2. Use the Credentials in your Application:

Integrate the downloaded credentials into your application. Your application will use these credentials when making requests to the Google API.

Remember to keep your credentials secure. Do not share them publicly, and be cautious about how you store and handle them in your application.

Advantages of Google OAuth

• Secure, user-friendly, and standardized authentication and authorization.
• Utilizes Google's popularity and reliability for identity infrastructure.
• Provides a standardized approach compatible with various applications and services.

Summary

Google OAuth emerges as a secure and standardized solution, offering user-friendly authentication, seamless access to Google services, and a comprehensive set of developer resources. Developers can leverage this protocol to enhance the security, reliability, and user experience of their applications.