Use Spotify to Login to Your Chrome Extension

Allow your users to use their Spotify credentials to login to your Chrome Extension

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:

Or the video tutorial here:

Let’s Begin.

Before we even touch a line of code, we need to setup our development workspace so that we have the ability to use Spotify’s OAuth2 endpoint.

Navigate to ‘https://developer.spotify.com/dashboard/' and login.

Click ‘Create an App’.
Fill out the ‘Name’ and ‘Description’, agree to the terms, and click ‘Create’.
Go to ‘Edit Settings’.
Add a ‘Redirect URIs’ entry. It will be in the form of
https://<chrome ext id>.chromiumapp.org/”.
Make sure to ‘Save’ your changes.

To find your Chrome Extension id, navigate to “chrome://extensions” in your browser, make sure you Chrome Extension is loaded. It will be there.

Keep the Spotify Developer console window open, we’ll need that
Client ID” a little later.

Let’s do some web development work before we get to actual Chrome Extension work.

We’ll create two pages.
A ‘Sign In” page and a ‘Sign Out’ page. Nothing fancy.

// popup.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 300px;
height: auto;
}
div {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 25%;
padding: 5px;
font-size: 2.5em;
background-color: red;
border-radius: 5px;
text-align: center;
color: white;
font-family: monospace;
font-weight: bold;
margin-bottom: 15px;
cursor: pointer;
transition-duration: 0.3s;
}
div:hover {
background-color: black;
transform: translateX(-50%) scale(1.3);
}
</style>
</head>
<body>
<h1>Sign-In With Your Spotify Account to Use This Extension</h1>
<div id='sign-in'>Sign In</div>
<script src="./popup-script.js"></script>
</body>
</html>

.

// popup-signed-in.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 300px;
height: auto;
}
div {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 25%;
padding: 5px;
font-size: 2.5em;
background-color: red;
border-radius: 5px;
text-align: center;
color: white;
font-family: monospace;
font-weight: bold;
margin-bottom: 15px;
cursor: pointer;
transition-duration: 0.3s;
}
div:hover {
background-color: black;
transform: translateX(-50%) scale(1.3);
}
</style>
</head>
<body>
<h1>Successfully Signed-In</h1>
<div id='sign-out'>Sign Out</div>
<script src="./popup-signed-in-script.js"></script>
</body>
</html>

Notice that we’ve attached scripts to each of our HTML pages…

// popup-script.jsdocument.querySelector('#sign-in').addEventListener('click', function () {

});

.

// popup-signed-in-script.jsdocument.querySelector('#sign-out').addEventListener('click', function () {

});

Now that we have the Web Dev portion out of the way, let’s take a look at our ‘manifest.json’.

// manifest.json{
"name": "Spotify OAuth2 test",
"description": "Testing Spotify's Oauth2 authentication.",
"version": "0.1.0",
"manifest_version": 2,
"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"
]
}

Note:
1. The “default_popup” property of the “browser_action” is set to the
Sign In” page.
2. We need the ‘identity’ permission in order to use Chrome’s ‘launchWebAuthFlow()’ method.

Let’s do some actual Chrome Extension programming.

We’ll start by coding the basic skeletal logic flow of our app.

In the ‘popup-script.js’, when the user clicks on the button, we’ll send a message to the ‘background’ script asking to “login”.
If we get a “success” from the ‘background’ we’ll change the page to the “Sign Out” page.

document.querySelector('#sign-in').addEventListener('click', function () {
chrome.runtime.sendMessage({ message: 'login' }, function (response) {
if (response.message === 'success') window.close();
});
});

That’s it for the ‘popup-script.js’. You can close the file.
The ‘popup-sign-out-script.js’ is almost identical.

In the ‘popup-sign-out-script.js’, when the user clicks on the button, we’ll send a message to the ‘background’ script asking to “logout”.
If we get a “success” from the ‘background’ we’ll change the page to the
Sign In” page.

document.querySelector('#sign-out').addEventListener('click', function () {
chrome.runtime.sendMessage({ message: 'logout' }, function (response) {
if (response.message === 'success') window.close();
});
});

This file is done. You can close it.

Moving to the ‘background.js’ script, we create a conditional tree that catches these messages.

Moving to the ‘background.js’ script, we create a conditional tree that catches these messages.
We’re going to need 5 CONSTANTS and 1 VARIABLE.
And while we’re at it, a variable to keep track of the user’s login status.

Note:
1. CLIENT_ID — tells Spotify we’re allowed to use their OAuth2 Endpoint
2. RESPONSE_TYPE — asks Spotify for a specific catgetory of information
3. REDIRECT_URI — where to redirect the user after giving us the token
4. SCOPE — asks Spotify for specific data
5. SHOW_DIALOG — prompts the user with Spotify’s login page

Second Note:
We created a function to bring all of this information together.
We have that last variable, ‘STATE’, created in the function.
STATE’ is simply a string that gets generated that helps personalize the request being sent.
It’s for security purposes.

Let’s bring this all together.

When our ‘background.js’ script gets the message to “login”, we’ll call the ‘chrome.identity.launchWebAuthFlow()’ function.

It takes two arguments.

The first is an object with our constructed OAuth2 endpoint and the ‘interactive’ flag of true (this allows the user to see the Spotify prompt for credentials).

The second is a callback function that gives us a ‘redirect url’ from Spotify’s servers. We can use a “token” delivered to us to gain access to the
user-who-logged-in’s Spotify data.
We won’t be doing that in this video; we’re simply using this endpoint to “Authenticate” the user, not “Authorize” us.

Note:
In addition to checking for a chrome.runtime error, we check that the ‘STATE’ we sent is equal to the ‘state’ we got back.
We also check that the user logged in correctly. If they didn’t, a
“callback?error=access_denied” string will be found in the ‘redirect_url’.
We also “dump” the token out of our system every 60 minutes.

We’re done.
When the user hits the “Sign In” button, they’ll be greeted with Spotify’s Login System.
If they successfully sign in, they’ll be shown our “Sign Out” page.

If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Spotify Login System with Chrome Extensions | OAuth2

Written by

Learning to code…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store