chrome.identity User Authentication in a Chrome Extension

Question

I'm trying to write a chrome extension that requires user authentication.
Google's tutorial suggests that I need to upload to the web store first to get a key:

Login to the Google APIs Console using the same Google account used to upload your app to the Chrome Web Store.

I uploaded a non-functioning version to just get the key, but it's hanging there pending for over a week now. How could I get that key or somehow inspire Google to approve this app that I don't want on the Web Store? Am I doing this all wrong?

score 46 · Accepted Answer · edited Sep 10 '16 at 07:19

46

You don't have to upload an extension to the Chrome Web Store in order to use the chrome.identity API. It suffices to have a valid extension ID. The easiest way to get started is to copy the 32-character extension ID from chrome://extensions/ to your project's credentials section at the API console ^{see screenshot below}.
Though if you ever want to publish the extension or use it in a different profile or computer, then you'd better choose an extension ID that you control. This can be done by setting the "key" key in the manifest file. See Obtaining Chrome Extension ID for development for a detailed answer on generating these keys.

For example, try out the following extension, using a key that I just generated. It will print your user info in a dialog.

manifest.json

{
    "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0W0/YVPvLrj2cWBOXfPBBYwPp56R+OJb9QLudyMpigF+V4DFV0NEUnbo9iA6m+7cVPiD6YbhbIaiAoHSdtqEKwaYvrEJRGuGsLjDq+RMwG2x+FcGIsO4ny0BuZaZ/Q2+DaL33NBUl2h9dIi1xa0Suq6qpoJ4yykTu9y7Q6rB9ulJze6DiZL7LWU5NzHCEWt21zAhpLZOqvYY8wzY69pMf+P0+uOLuy87x84rvCRNegbSmEYLC5f4y6ikjVnFUxJBxMlpMg3bByxbrLVBFPuHj4khkr6adUXgks2vBBHFcrRh5EYXopI+PLwUJPfFtzyN8+L7swen9kcK8gXMwX28KwIDAQAB",
    "name": "Identity test",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },  
    "permissions": [
        "identity"
    ],  
    "oauth2": {
        "client_id": "1014705257182-52dddl9dbiec2ln22stokphlaq0v7gor.apps.googleusercontent.com",
        "scopes": ["profile"]   
    }   
}

background.js

chrome.identity.getAuthToken({
    interactive: true
}, function(token) {
    if (chrome.runtime.lastError) {
        alert(chrome.runtime.lastError.message);
        return;
    }
    var x = new XMLHttpRequest();
    x.open('GET', 'https://www.googleapis.com/oauth2/v2/userinfo?alt=json&access_token=' + token);
    x.onload = function() {
        alert(x.response);
    };
    x.send();
});

edited Sep 10 '16 at 07:19

answered Jul 30 '14 at 20:19

Rob W

341,306
83
791
678

Where the ID should be copied to (in the credentials section at the Google API console).? Don't see any appropriate field for this. – sdespolit Jan 23 '15 at 15:39
3

@sdespolit See screenshot. Put your extension ID after "/detail/" (the field marked 6). – Rob W Jan 23 '15 at 15:47
1

I have done everything as specified, but all I get is a prompt to log-in to Chrome again. No alert. Ideas? – Raine Revere Jul 04 '15 at 21:55
@Raine At which step? – Rob W Jul 04 '15 at 21:56
@RobW When I refresh the Extension in Chrome. – Raine Revere Jul 04 '15 at 21:57
@Raine Is the login prompt generated by the `chrome.identity.getAuthToken` call? If yes, just log in. If not, please triple-check whether you've followed all steps, write down which steps you've followed, and let me know, then I can follow the steps and see if there's anything different. – Rob W Jul 04 '15 at 21:59
@RobW Appreciating your help. I had changed the manifest key to my own key, but not the client_id, and I guess that's why it wasn't working. When I reverted it back to your key it worked. Your instructions didn't specify changing client_id. The Chrome documentation is quite complex and hard to get started with :/. Hopefully having your working example will give me a basis to get started. – Raine Revere Jul 04 '15 at 22:01
@Raine After creating the key at the API console, the `client_id` will be displayed (last time I checked, it was there). Did you manage to find this client_id at the API console? – Rob W Jul 04 '15 at 22:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82387/discussion-between-raine-and-rob-w). – Raine Revere Jul 04 '15 at 23:50
HELP!!! https://stackoverflow.com/questions/51937727/implement-auth0-into-chrome-extension-with-one-time-use-tokens?noredirect=1#comment90845062_51937727 – Aug 23 '18 at 09:25
for me `chrome.identity.getAuthToken` is not firing at all and not giving any error either :/ – Zeeshan Ahmad Khalil Sep 06 '22 at 09:29

score 11 · Answer 2 · answered May 26 '15 at 21:20

11

A bit late, but here is the source of my earlier confusion

It is a bit counterintuitive, but immediately after beginning a chrome extension / app, you have to 'publish' on the web store to obtain a consistent key and ID. If you are using the Chrome Dev Editor, hit the upper-left hamburger menu and click "Publish to the Chrome Web Store".

Once it finishes, you can then click "Open the developer dashboard" and save your app as a draft. Then you will see your full list of published apps and click 'more info' next to your app and copy the key between -----BEGIN PUBLIC KEY----- and -----END PUBLIC KEY-----. Paste that into your manifest as"key" and you can move on to develop offline.

answered May 26 '15 at 21:20

Vincent

1,454
2
17
24

2

I believe you have to 'upload' your extension but not 'publish'. 'Publish' your extension only when you are willing to release it to the public. For your chrome extension on the dashboard there is a link 'More info'. Clicking it will display the 'id' and public key for the extension. – Efe Ariaroo Sep 03 '16 at 11:04
https://stackoverflow.com/questions/51937727/implement-auth0-into-chrome-extension-with-one-time-use-tokens?noredirect=1#comment90845062_51937727 – Aug 23 '18 at 09:25

chrome.identity User Authentication in a Chrome Extension

2 Answers2

Linked