Google Drive Image Upload with OAuth 2.0

This article presents how to authenticate and authorize with Google Drive using OAuth to upload images.

The sample is deployed to Heroku. If interested … go check out :)

Wait…. What’s OAuth ??

OAuth Sequence flow

Lets create a client application

For the demo, we’ll be creating a client application using ExpressJS and AngularJS to authenticate with Google and to upload images to the authenticated Google Drive.

First, we need to create and register an app in Google Developer Console. In order to do that navigate to

Google Developer Console

and sign-in with your favorable account (if you have multiple google accounts :)).

Select the dropdown list which lists all created applications and select “New Project” to create a fresh application to start with the oauth demo. The following picture illustrates the creation of new project button.

Name the project as “GoogleDriveMock” and click on Create to create the application.

Google will take some time to create your application. After a successful creation you’ll receive a notification mentioning …

Create Project: GoogleDriveMock

Now, lets navigate to the Credentials panel and then OAuth Consent Screen. You’ll see a similar page to the following image (take a look at it) …

Put the name of your application as “Google Drive Image Upload”. This application name will be displayed on the consent screen when asking for permissions to use your Google accounts and services.

You can also upload a logo for your created application by uploading a valid logo to the configuration page. Now click on Save button to save your configurations.

Now, we have successfully created our demo application in Google Developer Console. But wait… We have another step to do.

Generate Credentials

Lets again navigate to the “Credential” tab to generate client id and secret for our application to authenticate with Google Services.

Click on the “Create credentials” dropdown menu and then select “OAuth client ID” to generate both client ID and a secret for your application.

Choose the application type as “Web Application” and enter a name for your client application or you can use “Express Application” as a preferred name for your client application.

And for now, set both “Authorized JavaScript origins” and “Authorized redirect URIs” as

http://localhost:3000

and

http://localhost:3000/api/drive/auth/oauthcallback

And then click on Create to create your client application and to generate client ID and secret. The generated credentials are showed in modal view as follows .

Save your client ID and secret in a text file. We’ll be using that later in this demo to generate access tokens.

Enable Google Drive and Google+ APIs

Lets navigate to the “Dashboard” tab and select “Enable APIs and Services” to select and enable all wanted Google APIs and services.

For this demo we’ll be enabling Google Drive APIs and Google+ APIs. You can search and enable these APIs and continue with the article.

• Google Drive API
• Google+ API

Lets create our express application

What !!! again another creation of application !

Yes, I know its too boring to follow the instructions. Clone or download the project from GitHub.

Make sure you have installed the following to run the cloned express application. Please follow the instructions given in the repository to run related dependencies and to run the application.

• git
• node

Before running the application, you have to create a .env file in the root folder containing your generated client id, secret and redirect uri.

Authorization Tokens

Retrieving authorization tokens happens in two folds.

01. A request made from client application requesting an authorization code

02. A request made from client application requesting access tokens using the authorization code

The express application (GitHub) contains all relevant end-points and REST calls to generate and retrieve access tokens. All api related source codes can be found inside api > drive.api.js.

Get Code

To request permission for our created express app, we have to call the following end-point with GET parameters.

https://accounts.google.com/o/oauth2/v2/auth
GET Parameters
access_type="offline"
client_id="Your generated client ID"
response_type="code"
scope="URL encoded Scopes"
redirect_uri="encoded http://localhost:3000/api/drive/auth/oauthcallback"

Scope: Each API has its own scope to send, receive and view data and files. You can choose the scopes from relevant APIs. For this demo, I have choose the following scopes from Google Drive API

https://www.googleapis.com/auth/drive.file
https://www.googleapis.com/auth/drive.metadata.readonly
https://www.googleapis.com/auth/plus.me

The final request URL will be as following

https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.file%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.metadata.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fplus.me&response_type=code&client_id=916223623914-cb9k997e2l7vsg02t3saemkbetsccjd6.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fdrive%2Fauth%2Foauthcallback

The URL generation process will be done in the background while you run the application using either

nodemon server 
or
node server

You’ll see a page as follows, after running the express application and navigating to

http://localhost:3000

Login screen or more precisely the initial displayed screen :D

Click on “Sign in with Google” button to continue you to a consent screen asking to login using your Google Account credentials and allowing the application to access some of your information and Google Drive permissions.

Consent screen

After a successful authentication with Google, Google will redirect to our configured url containing the authorized code. The code is extracted from the query parameters and used to perform the request call for access tokens

Get Access Tokens

Now, we need to do a POST request to the following url with the following body elements to request

https://www.googleapis.com/oauth2/v4/token
Header
Content-Type:application/x-www-form-urlencoded
POST Request Body
code="Retrieved code"
client_id="Your generated Client ID"
client_secret="Your client secret"
grant_type="authorization_code"
redirect_uri="http://localhost:3000/api/drive/auth/oauthcallback"

A successful request will give us the following response

{
  "access_token": "some string as access token",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "some string as refresh token"
}

The access token and refresh token are extracted and stored in the server to perform authorized request on Google Drive services to upload images.

A successful login to your Google Account will redirect to the following page. You can select an image from your local drive by clicking on the grey painted area saying “Click here to select image” and then click on “Upload” to upload your selected image to your Google Drive.

Image Upload screen

The upload request to the Google Drive end-point will use your access token along with the POST request and your selected image. A successful upload will result the following screen.

Upload successful screen

Go ahead and check your Google Drive.

Yay !!! You will have your selected image in your Google Drive.

Finally, now we have learned how to authenticate with Google APIs and services using a demo with image upload.

If you have any questions or comments, smash it below. ;)