OAuth 2.0 : A Practical Overview

5 min readSep 24, 2019

Introduction to OAuth: Open Authentication

OAuth is an authorization framework that allows 3rd party apps to retrieve user data using HTTP services. OAuth 2.0 is the most commonly used version of OAuth that provides authorization flow for web, desktop and mobile applications. OAuth 2.0 facilitates 2 main services.

Federated Identity — Enables end user to sign in to an application using a user owned existing account.
Delegated Authority — Enables the 3rd Party Applications to access resources in a another service on behalf of the user. The scope of the information accessed is done in a controlled manner.

OAuth defines four roles:

Resource Owner
Resource Server
Client Application
Authorization Server

Resource Owner
The User granting authorization to the client application to access the protected resource using his/her user account (Most of the cases user’s social login profile).

Resource Server
The server containing the protected resources of the protected user account.

Client Application
The 3rd party application utilizing the user’s approval to retrieve resource owner’s details from the existing account. In order to get the details client application should be registered in the platform where user’s existing account resides.

Authorization Server
The server that authenticates the client application by issuing access tokens after the authentication process of the resource owner.

OAuth Grant Types:

Authorization Code : used in server-side web applications
Implicit : used in client-side mobile and web applications
Resource Owner Password Credential : used in trusted applications
Client Credential : used in Applications API access, where explicit resource owner is not existed

Application to upload files to google drive with OAuth 2.0

The application demonstrated here shows uploading a file and storing it in the Google drive. It shows the flow of OAuth 2.0 authorization code grant type. Authorization code grant type is considered the most common and secure.

The roles :

a. Resource Owner : End User(My Self)

b. Resource Server : Google Resource Server

c. Client Application : Application to upload files developed in JavaScript

d. Authentication Server : Google Authentication server

Step 01 : Registration of the Application

In order to use the google drive service the application should be registered in Google Developers Console. In order to register an application application name, application website and redirect URL should be provided.

After successfully registration, Google will issue the client ID and the client secret for the application.

Client ID is publicly available for Google in order to identify application uniquely.
Client secret is a private key used to authenticate the application.

The following are the basic steps to follow in registering the client application.

1.Create a new project/Select one from the created projects

Fig 1— Create a new project in Google developer console

2. Enable Google Drive API to allow access to the client application

Fig 2— Enable Google Drive API to retrieve credentials

3. Create credentials and a new OAuth Client ID

Then select the option web application since we are creating a Javascript application that access the Google Drive API.

Provide client application details and click create button to retrieve a Client ID and Client Secret. Here I have put http://localhost:8080 for the first field and http://localhost:8080/DriveUpload/uploadFile.html to the second field. It is important that added URLs are same for the client project that you are creating. After user grants access to the client application Google redirects the user to the specified URL path.

4. Retrieve Client ID and Client Secret

Fig 7— After successful application registration the client ID and secret can be downloaded

Step 02 : Create the client application

The Google Drive File Uploader app is developed in JavaScript using j-Query for OAuth API calls. Application is run on top of a python HTTP server.

Fig 8— Index.html Page with the button to to Sign in with Gmail

When the Sign in with Gmail Button is clicked a GET request is sent to the Google authorization server. The request sent:

https://accounts.google.com/o/oauth2/auth? redirect_uri=http://localhost:8080/DriveUpload/uploadFile.html&response_type=code&client_id=xxxxxxxxxxx.apps.googleusercontent.com& scope=https://www.googleapis.com/auth/drive
access_type=offline&

URL query parameters:

redirect_uri —The uri of the page that the user gets redirected after the client app authorization

response_type —Type of the response expected from the authorization server. Since we are using Authorization Code, the value here is code

client_id — The unique ID provided by Google to the registered client application

scope — Specifies the resources that the application is authorized to access

access_type — Specifies if the application is permitted to refresh access tokens without user interaction (offline).

After the request user is redirected to the consent page below.

Fig 10—Consent page requests **View and manage the files in your Google Drive** permission from the resource owner(user)

Fig 11— Click on Allow button to proceed

The implementation for the pages and authorization grant flows are mentioned below.

Go to the root directory and run python -m SimpleHTTPServer 8080 command to run the project.

Once the resource owner provides the permission the user gets redirected to uploadFile.html page where he/she can upload files to the Google drive. Each of the upload request has the access token in the request header. This is to verify that the application has got the permission to access Google drive.