I'm having issues with my authentication on a Chrome Extension that I am working on to learn. Currently, my extension works for my profiles if users are logged in. As soon as I test this (by giving another party access), the extension does not seem to authorize. Am I doing something wrong here?
Could the below code be causing the issues with authentication? To give some context, this is in the background.js file of my extension.
function auth(token){
chrome.identity.getAuthToken({ 'interactive': true }, function (token) {
if (chrome.runtime.lastError) {
console.log(chrome.runtime.lastError);
//Push Manual Authorise Button to UI
} else {
//Authorised
console.log('Token acquired: ' + token +
' See chrome://identity-internals for details.');
classroomsExist(token);
}
return token;
});
}
Update:
I have tested this on another user account by loading the extension manually, as an unpacked extension and the authentication works. What could be causing the issue when installing from the webstore? My application ID is the same in manifest.json as Google Developer Console.
The client_id changes when you publish, so the manifest.json and app code needs to update any references to it when publishing to the web store.
Related
I've previously setup and followed these steps, and got it to work:
https://firebaseopensource.com/projects/firebase/quickstart-js/auth/chromextension/readme/#license
But cloning this extension, but with a different Extension ID, different firebase instance and OAuth/key setup, I've tried to follow the steps at least 3 separate times, but every time it fails at the last step, the login (the consent screen works though)
Upload a fresh dummy extension (without key field in manifest.json) (But it is the exact same code as the working one)
Get the Chrome Extension ID, and the Public Key, no problem
Create OAuth Client ID with the Extension ID, configured consent screen, no problem, the screen shows up and I can click through
Add OAuth & Public Key to manifest.json
Make another OAuth Client ID? (I think this is a duplicate step, because which Client ID should I use? and afaik the whitelisting is optional)
Use chrome.identity to get OAuth token:
export function startAuth(interactive) {
// Request an OAuth token from the Chrome Identity API.
chrome.identity
.getAuthToken({ interactive: !!interactive }, (token) => {
if (chrome.runtime && !interactive) {
console.error('It was not possible to get a token programmatically.');
}
else if (token) {
// Authorize Firebase with the OAuth Access Token.
const credential = firebase.auth.GoogleAuthProvider
.credential(null, token);
firebase.auth()
.signInWithCredential(credential)
.catch((error) => {
// The OAuth token might have been invalidated. Lets' remove it from cache.
if (error.code === 'auth/invalid-credential') {
chrome.identity
.removeCachedAuthToken({ token }, () => {
startAuth(interactive);
});
}
});
}
else {
console.error('The OAuth Token was null');
}
});
}
Note: This code is working with another extensionID/OAuth/key, so the code itself can't be the problem.
There isn't much to change between them, it's really the ExtensionID, the OAuth client ID url, and the public key.
I've followed the steps 3 times, to no avail, every time I get the error auth/invalid-credential. I do get a token though, but that token won't authenticate. How to find out why this is?
It's trying to post to this address, and returning error 400:
POST: https://identitytoolkit.googleapis.com/v1/accounts:signInWithIdp?key=xxxxx
Error: INVALID_IDP_RESPONSE : Invalid Idp Response: access_token audience is not for this project
My conclusion
There must be something changed with how to set this up, even though it works with different credentials
The problem was that I didn't create the OAuth in the same project in google cloud console, as the firebase project...
I have a Chrome Extension that needs to authenticate the user. Once authenticated, I will send that user's email to my server running in Docker and then log them in. I am having trouble getting the token. Here is the code:
chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
if (chrome.runtime.lastError) {
currentSessionAccessToken=token;
alert(chrome.runtime.lastError.message);
//alert("you need to have a gmail account"); //ubuntu
return;
}
currentSessionAccessToken=token;
var x = new XMLHttpRequest();
x.open('GET', 'https://www.googleapis.com/oauth2/v2/userinfo?alt=json&access_token=' + token);
x.onload = function() {
if (x.readyState=200)
{
var data=this.responseText;
jsonResponse = JSON.parse(data);
photo = jsonResponse.picture;
szName=jsonResponse.name;
email=jsonResponse.email;
x.abort(); //done so get rid of it
send_to_backend(request, sender, sendResponse);
};
}
x.send();
}
The problem is that I am not getting back an access token. The backend (at this time) is also on my laptop (localhost) but in a docker container. I don't have an SSL cert for my localhost and I am wondering if that is the issue? I am never getting a token so I never get to send it with the XMLHttpRequest, and thus I never get a ReadyState=200. Any idea what is wrong?
Did you register your app for Google OAuth API access and designate the oauth field in the manifest?
From the documentation on user auth:
Copy key to your manifest
When you register your application in the Google OAuth console, you'll provide your application's ID, which will be checked during token requests. Therefore it's important to have a consistent application ID during development.
To keep your application ID constant, you need to copy the key in the installed manifest.json to your source manifest. It's not the most graceful task, but here's how it goes:
Go to your user data directory. Example on MacOs: ~/Library/Application\ Support/Google/Chrome/Default/Extensions
List the installed apps and extensions and match your app ID on the apps and extensions management page to the same ID here.
Go to the installed app directory (this will be a version within the app ID). Open the installed manifest.json (pico is a quick way to open the file).
Copy the "key" in the installed manifest.json and paste it into your app's source manifest file.
Get your OAuth2 client ID
You need to register your app in the Google APIs Console to get the client ID:
Login to the Google APIs Console using the same Google account used to upload your app to the Chrome Web Store.
Create a new project by expanding the drop-down menu in the top-left corner and selecting the Create... menu item.
Once created and named, go to the "Services" navigation menu item and turn on any Google services your app needs.
Go to the "API Access" navigation menu item and click on the Create an OAuth 2.0 client ID... blue button.
Enter the requested branding information, select the Installed application type.
Select Chrome Application and enter your application ID (same ID displayed in the apps and extensions management page).
Once you register your app you need to add something like this to your manifest:
"oauth2": {
"client_id": "YOUR_CLIENT_ID",
"scopes": ["scope1", ...]
}
Turns out that in order to get "identity" working you must publish to the Google WebStore. The reason I stayed away from that is that it often takes weeks to get a site reviewed. I have had that experience in the past. I haven't really nailed down the new URL that will be using and wanted to get the system working before I did that. Now that I submitted for Review, I guess I have some time, and will "dummy up" the steps needed (ie authentication) to continue the development work. Thanks Micah for pointing out the manual. This led to me realizing that there is no way to get "identity" working without getting approval from Google.
I'm building a Chrome extension and would like to use Firebase to persist state shared between users. Firebase authentication doesn't work within Chrome extension because there's no origin domain. The chrome.identity API can be used to ensure that the user is authenticated and to get the access token for OAuth requests.
A couple of considerations:
Use chrome.storage to store a token and use that to authenticate with Firebase. The storage area is not encrypted, so it would be trivial to read a user's token from their disk.
I assume the token returned by chrome.identity.getAuthToken is an OAuth access token and therefore transient - it wouldn't be suitable for a permanent unique identifier for a user.
I could make a request to a Google OAuth API to exchange the access token for the user's profile (https://www.googleapis.com/userinfo/v2/me), which contains an id field, but this is public.
I came across this question on my quest to solve a similar problem. I am sure the question is outdated but maybe my solution helps someone else stumbling over this question.
It is indeed possible to use chrome.identity for Firebase authentication... But the way is not through the custom authentication method. There is another method which accepts the OAuth2 token from chrome.identity.getAuthToken.
Here is everything I did following this tutorial:
(It also mentions a solution for non-Google auth providers that I didn't try)
Identity Permission
First you need permission to use the chrome identity API. You get it by adding this to your manifest.json:
{
...
"permissions": [
"identity"
],
...
}
Consistent Application ID
You need your application ID consistent during development to use the OAuth process. To accomplish that, you need to copy the key in an installed version of your manifest.json.
To get a suitable key value, first install your extension from a .crx file (you may need to upload your extension or package it manually). Then, in your user data directory (on macOS it is ~/Library/Application\ Support/Google/Chrome), look in the file Default/Extensions/EXTENSION_ID/EXTENSION_VERSION/manifest.json. You will see the key value filled in there.
{
...
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgFbIrnF3oWbqomZh8CHzkTE9MxD/4tVmCTJ3JYSzYhtVnX7tVAbXZRRPuYLavIFaS15tojlRNRhfOdvyTXew+RaSJjOIzdo30byBU3C4mJAtRtSjb+U9fAsJxStVpXvdQrYNNFCCx/85T6oJX3qDsYexFCs/9doGqzhCc5RvN+W4jbQlfz7n+TiT8TtPBKrQWGLYjbEdNpPnvnorJBMys/yob82cglpqbWI36sTSGwQxjgQbp3b4mnQ2R0gzOcY41cMOw8JqSl6aXdYfHBTLxCy+gz9RCQYNUhDewxE1DeoEgAh21956oKJ8Sn7FacyMyNcnWvNhlMzPtr/0RUK7nQIDAQAB",
...
}
Copy this line to your source manifest.json.
Register your Extension with Google Cloud APIs
You need to register your app in the Google APIs Console to get the client ID:
Search for the API you what to use and make sure it is activated in your project. In my case Cloud Firestore API.
Go to the API Access navigation menu item and click on the Create an OAuth 2.0 client ID... blue button.
Select Chrome Application and enter your application ID (same ID displayed in the extensions management page).
Put this client ID in your manifest.json. You only need the userinfo.email scope.
{
...
"oauth2": {
"client_id": "171239695530-3mbapmkhai2m0qjb2jgjp097c7jmmhc3.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/userinfo.email"
]
}
...
}
Get and Use the Google Auth Token
chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
// console.log("token: " + token);
let credential = firebase.auth.GoogleAuthProvider.credential(null, token);
firebase.auth().signInWithCredential(credential)
.then((result) => {
// console.log("Login successful!");
DoWhatYouWantWithTheUserObject(result.user);
})
.catch((error) => {
console.error(error);
});
});
Have fun with your Firebase Service...
I'm trying to authorize with chrome.identity.getAuthToken() to get token for Picasa web service. I couldn't find Picasa API in Google Developer Console and set its scope to "https://picasaweb.google.com/data/" oauth2 part of manifest.json. Picasa docs say that I can skip this step.
chrome.identity.getAuthToken({
interactive: true
}, function (token) {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError);
} else {
console.log(token);
}
});
getAuthToken() always ends with an error "OAuth2 request failed: Service responded with error: 'bad client id: {0}'". If no scopes are set, the error looks like "OAuth2 request failed". Where have I mistaken?
Steps I take to make it work
Go to Google Developers Console and create a new project.
Go to APIs & auth > Credentials in the panel to create new Client ID. The application ID of chrome app can be obtained from Chrome Developer Dashboard if you your app is uploaded.
Go to APIs & auth > Consent screen and fill in Email Address and Product Name and Save.
I didn't know step 3 was necessary.
It seems amazing but after 1 day has passed, everything is working :)
UPD: I've tried gdrive sample from chrome-app-samples repo and added scope for Picasa. After everything worked fine, I copied its key and oauth2 section to my app's manifest. Everything worked fine too. After this I deleted client_id for app in developer console and created it again. And after that everything was ok.
You need to register your application in Google Developer Console and obtain a client_id. See the 'Credentials' pane to configure your application.
In my packaged app I call
chrome.identity.getAuthToken({'interactive': true }, function (token) {
console.log('user token: ' + token);
});
but every time i enter with different google accounts it produces the same token. What could possibly go wrong here?
Chrome app identities are tied to the Google account signed into Chrome. You can change the current signed in account in Chrome settings, but I recommend you create a new Chrome profile instead.