Identify User

Web authentication protocols utilize HTTP features, but packaged apps run inside the app container; they don’t load over HTTP and can’t perform redirects or set cookies.

Use the Chrome Identity API to authenticate users: the getAuthToken for users logged into their Google Account and the launchWebAuthFlow for users logged into a non-Google account. If your app uses its own server to authenticate users, you will need to use the latter.

API Samples: Want to play with the code? Check out the identity sample.

How it works

Apps that use Google accounts need to specify the OAuth2 client ID and scopes in their manifest. When users install the apps, the OAuth2 permissions are displayed along with the Chrome permissions. Once a user accepts the permissions, the apps can get the access token using getAuthToken.

Apps that want to perform authentication with any provider must call launchAuthFlow. This method uses a browser pop-up to show the provider pages and captures redirects to the specific URL patterns. The redirect URLs are passed to the app and the app extracts the token from the URL.

Google account authentication

Here are the five steps you need to complete:

  1. Add permissions to your manifest and upload your app.
  2. Copy key in the installed manifest.json to your source manifest.
  3. Get your client ID.
  4. Update your manifest to include the client ID and scopes.
  5. Get the authentication token.

Add permissions and upload app

The identity API is still experimental. You need to make sure the experimental and identity permissions are in your manifest. You can then upload your app to the apps and extensions management page (see Publish).

"permissions": [
  "experimental",
  "identity"
 ]

Copy key to your manifest

You need to copy the key in the installed manifest.json to your source manifest. This ensures that the key isn't overridden anytime your reload your app or share the app with other users. It's not the most graceful task, but here's how it goes:

  1. Go to your user data directory. Example on MacOs: ~/Library/Application\ Support/Google/Chrome/Default/Extensions
  2. List the installed apps and extensions and match your app ID on the apps and extensions management page to the same ID here.
  3. 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).
  4. Copy the "key" in the installed manifest.json and paste it into your app's source manifest file.

Get your client ID

You need to register your app in the Google APIs Console to get the client ID:

  1. Login to the Google APIs Console using the same Google account used to upload your app to the Chrome Web Store.
  2. Create a new project by expanding the drop-down menu in the top-left corner and selecting the Create... menu item.
  3. Once created and named, go to the "Services" navigation menu item and turn on any Google services your app needs.
  4. Go to the "API Access" navigation menu item and click on the Create an OAuth 2.0 client ID... blue button.
  5. Enter the requested branding information, select the Installed application type.
  6. Select Chrome Application and enter your application ID (same ID displayed in the apps and extensions management page).

Warning: If the app ID here does not match your app ID, an error will occur when your app calls getAuthToken().

Update your manifest

You need to update your manifest to include the client ID and scopes. Here's the sample "oauth2" for the gdocs sample:

"oauth2": {
    "client_id": "665859454684.apps.googleusercontent.com",
    "scopes": [
      "https://docs.google.com/feeds/",
      "https://docs.googleusercontent.com/",
      "https://spreadsheets.google.com/feeds/",
      "https://www.googleapis.com/auth/drive.file"
    ]
  }

Get the token

You are now ready to get the auth token:

chrome.experimental.identity.getAuthToken(function(token) { })

Non-Google account authentication

Here are the three steps you need to complete:

  1. Register with the provider.
  2. Add permissions for provider resources that your app will access.
  3. Get the authentication token.

Register with the provider

You need to register an OAuth2 client ID with the provider and configure the client ID as a website. For the redirect URI to be entered during registration, use the URL of the form: https://.chromiumapp.org/

For example, if you app ID is abcdefghijklmnopqrstuvwxyzabcdef and you want provider_cb to be the path, to distinguish it with redirect URIs from other providers, you should use: https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb

Add permissions for provider

To make cross-original XHRs to Google API endpoints, you need to whitelist those patterns in the permissions:

"permissions": [
  ...
  "https://docs.google.com/feeds/",
  "https://docs.googleusercontent.com/",
  “https://www.website-of-provider-with-user-photos.com/photos/”
]

Get the token

To get the token:

chrome.experimental.identity.launchWebAuthFlow(
  {‘url’: ‘<url-to-do-auth>’, ‘interactive’: true},
  function(redirect_url) { // Extract token from redirect_url });

The <url-to-do-auth> is whatever the URL is to do auth to the provider from a website. For example, let us say that you are performing OAuth2 flow with a provider and have registered your app with client id 123456789012345 and you want access to user’s photos on the provider’s website: https://www.website-of-provider-with-user-photos.com/dialog/oauth?client_id=123456789012345&
redirect_uri=https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb&response_type=token&scope=user_photos

The provider will perform authentication and if appropriate, will show login and/or approval UI to the user. It will then redirect to https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>

Chrome will capture that and invoke the callback of the app with the full redirect URL. The app should extract the token out of the URL.

Interactive versus silent mode

When calling launchWebAuthFlow, you can pass a flag (‘interactive’: true in the example above) indicating whether you want the API to be called in interactive mode or not (aka silent mode). If you invoke the API in interactive mode, the user is shown UI, if necessary, to get the token (signin UI and/or approval UI; or for that matter any provider specific UI).

If you invoke the API in silent mode, the API will only return a token if the provider is able to provide a token without showing any UI. This is useful in cases when an app is doing the flow at app startup, for example, or in general in cases where there is no user gesture involved.

The best practice we suggest is to use silent mode when there is no user gesture involved and use interactive mode if there is a user gesture (for example, the user clicked the Sign In button in your app). Note that we do not enforce gesture requirement.

Back to top