Google’s OAuth2 Authorization with Chrome Extensions
Use Google’s OAuth2 to gain access to a user’s data. We’ll manipulate the user’s contacts data.
This tutorial uses a boiler-plate Google Chrome Extension setup.
If you want to know how to get that setup,
Check out my write-up here:
Before we even touch a line of code, we need to setup our development workspace so that we have the ability to do two major things:
1. Give our specific Chrome Extension the ability to use Google’s APIs and Services.
2. Gain the ability to interact with Google’s OAuth2 Endpoint.
3. Gain the ability to interact with Google’s APIs.
Let’s Begin.
First, we’ll need to “register” our Chrome Extension with the Google store. There are two ways to do this, we either officially upload our Chrome Extension to the Google Chrome Store and receive a unique key value for our extension or we “faux register” our extension with the Google Chrome Browser and receive a unique key that way. Since we don’t want to upload a development extension to the public store, we’ll opt for the latter method.
Navigate to the address “chrome://extensions” in your Chrome Browser.
Click on “Pack Extension” and choose the location of your Chrome Extension. This will generate two files in the directory above your Chrome Extension location, a ‘crx’ and ‘pem’; we’re concerned with the ‘crx’ file.
Drag-and-drop the ‘crx’ file into the “chrome://extensions” page. You should get a prompt asking you to add the extension, click ‘Yes’.
Now, navigate to where your Chrome Extensions are located.
For MacOS and Linux users, this will be different, but for Windows users you’re looking for something along the lines of,
“C:\Users\<Your UserName>\AppData\Local\Google\Chrome\User Data\Default\Extensions”.
We’re looking for the folder with same name as your Chrome Extension id. This id can be found back at your “chrome://extensions” page. Look for the “ID” attribute.
Enter the folder with the same name as your Chrome Extension, enter into the verion number folder and open the “manifest.json” file. Copy the “key” attribute.
This is our unique Chrome Extension key. Copy and paste that into the “manifest.json” of the Chrome Extension you’re actually developing. (the folder you chose for the “Pack Extension” step)
/* manifest.json */{
"name": "Oauth2 test",
"description": "",
"version": "0.1.0",
"manifest_version": 2,
"key": "<key here>",
"icons": {
"16": "./obj-16x16.png",
"32": "./obj-32x32.png",
"48": "./obj-48x48.png",
"128": "./obj-128x128.png"
},
"background": {
"scripts": [
"./background.js"
]
},
"options_page": "./options.html",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"identity",
"identity.email"
]
}
Note:
We require the “identity” and “identity.email” permissions.
Finally, remove your Chrome Extension from the browser (click “Remove”) and install the development extension by clicking “Load unpacked” and choosing the folder for your development extension.
This development extension now has the ability to use Google’s APIs and Services.
To gain authorization for Google’s OAuth2 Endpoint, we need to navigate to the Google Developer Console and request an OAuth2 Client ID.
Navigate to “https://console.developers.google.com/" and if you haven’t already, create a project.
We have to do two things here…
Click on the “OAuth consent screen” link on the left. Choose “External” and “Create”. Just fill out the “Application name” field and “Save”.
The “OAuth Consent” screen tells the user we want access to their Google data when they choose to login with their Google account.
Next, click on the “Credentials” link on the left.
Click the “Create Credentials” at the top of the screen, choose
“OAuth Client ID”.
Set the “Application type” to “Chrome app”.
Fill in the “Name” field with anything you want then fill in the
“Application Id” at the bottom. The “Application Id” is the id of your Chrome Extension; you can find it @ chrome://extensions.
Click “Create”.
Next we need an API key so we can access the user’s Google contacts data using the People API.
Go to “Library” on the left-hand bar. Search for the “Google People API” and click “Enable”.
Go to “Credentials” on the left-hand bar.
Click on “Credentials in APIs & Services” in the main page.
Click “Create Credentials” at the top of the page and choose “API key”.
This development extension now has the ability to interact with Google’s OAuth2 Endpoint and the People API.
Let’s get to the extension.
We’ll use a simple button in our ‘popup.html’ and its script to test out our Chrome Extension.
/* popup-script.js */document.querySelector('button')
.addEventListener('click', function () {
chrome.runtime.sendMessage({ message: '' });
});
We’ll create an ‘if conditional’ tree in our message receiver in the ‘background.js’ script.
This will handle 5 requests:
1. Get an access token.
2. Get profile information about the logged in user.
3. Get the user’s contacts from their Google Contacts page.
4. Create a contact in the user’s Google Contacts page.
5. Delete a contact in the user’s Google Contacts page.
To accomplish this, we need to add some properties to our ‘manifest.json’.
/* manifest.json */{
"name": "Oauth2 test",
"description": "",
"version": "0.1.0",
"manifest_version": 2,
"key": "<key here>",
"oauth2": {
"client_id": "<client id here>",
"scopes": [
"profile email",
"https://www.googleapis.com/auth/contacts"
]
},
...
Note:
Add an “oauth2” property with:
“client_id” from the Google Developer Console
“scopes” with “profile email” and “https://www.googleapis.com/auth/contacts"
/* background.js */const API_KEY = '';
let user_signed_in = false;chrome.identity.onSignInChanged.addListener(function (account_id, signedIn) {
if (signedIn) {
user_signed_in = true;
} else {
user_signed_in = false;
}
});chrome.runtime.onMessage
.addListener((request, sender, sendResponse) => {
});
Note:
We’ve added a constant variable holding the API key from the Google Developer Console.
The most important part of this extension is the “chrome.identity.getAuthToken()” method.
It allows us to get an “access token” that we can use to gain entry to the user’s data.
/* background.js */if (request.message === 'get_auth_token') {
chrome.identity
.getAuthToken({ interactive: true }, function (token) {
console.log(token);
});
}
Once the user is logged in, we can get their profile information using the “chrome.identity.getProfileUserInfo()” method.
/* background.js */} else if (request.message === 'get_profile') {
chrome.identity
.getProfileUserInfo({ accountStatus: 'ANY' }, function
(user_info) {
console.log(user_info);
});
}
The meat of this project comes down to this:
When we want to interact with the user’s data, which means going through one of Google’s APIs, we need to pass an access token in the header
of our fetch request.
So we need to first call the ‘getAuthToken()’ method, then with the token pass it into the fetch call.
You can get the source files here.
If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.
Be sure to follow us on Instagram and Twitter to keep up with our latest Web Development tutorials.
Google OAuth2 and Chrome Extensions — Gain Access to Your User’s Google Data
