OLD | NEW |
(Empty) | |
| 1 <h1 class="page_title">Identify User</h1> |
| 2 <div id="pageData-showTOC" class="pageData">true</div> |
| 3 <p> |
| 4 Web authentication protocols utilize HTTP features, |
| 5 but packaged apps run inside the app container; |
| 6 they don’t load over HTTP and can’t perform redirects or set cookies. |
| 7 </p> |
| 8 <p> |
| 9 Use the <a href="experimental.identity.html">Chrome Identity API</a> |
| 10 to authenticate users: |
| 11 the <code>getAuthToken</code> for users logged into their Google Account and |
| 12 the <code>launchWebAuthFlow</code> for users logged into a non-Google account. |
| 13 If your app uses its own server to authenticate users, you will need to use the
latter. |
| 14 </p> |
| 15 <p class="note"> |
| 16 <b>API Samples: </b> |
| 17 Want to play with the code? |
| 18 Check out the |
| 19 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/identity
">identity</a> sample. |
| 20 </p> |
| 21 <h2 id="how">How it works</h2> |
| 22 <p> |
| 23 Apps that use Google accounts |
| 24 need to specify the OAuth2 client ID |
| 25 and scopes in their manifest. |
| 26 When users install the apps, |
| 27 the OAuth2 permissions are displayed along with the Chrome permissions. |
| 28 Once a user accepts the permissions, |
| 29 the apps can get the access token |
| 30 using <code>getAuthToken</code>. |
| 31 </p> |
| 32 <p> |
| 33 Apps that want to perform authentication |
| 34 with any provider must call <code>launchAuthFlow</code>. |
| 35 This method uses a browser pop-up to show the provider pages |
| 36 and captures redirects to the specific URL patterns. |
| 37 The redirect URLs are passed to the app |
| 38 and the app extracts the token from the URL. |
| 39 </p> |
| 40 <h2 id="google">Google account authentication</h2> |
| 41 <p> |
| 42 Here are the five steps you need to complete: |
| 43 </p> |
| 44 <ol> |
| 45 <li>Add permissions to your manifest and upload your app.</li> |
| 46 <li>Copy key in the installed <code>manifest.json</code> to your source
manifest.</li> |
| 47 <li>Get your client ID.</li> |
| 48 <li>Update your manifest to include the client ID and scopes.</li> |
| 49 <li>Get the authentication token.</li> |
| 50 </ol> |
| 51 <h3>Add permissions and upload app</h3> |
| 52 <p> |
| 53 The identity API is still experimental. |
| 54 You need to make sure the experimental |
| 55 and identity permissions are in your manifest. |
| 56 You can then upload your app to the apps and extensions management page |
| 57 (see <a href="publish_app.html">Publish</a>). |
| 58 </p> |
| 59 <pre> |
| 60 "permissions": [ |
| 61 "experimental", |
| 62 "identity" |
| 63 ] |
| 64 </pre> |
| 65 <h3>Copy key to your manifest</h3> |
| 66 <p> |
| 67 You need to copy the key in the installed |
| 68 <code>manifest.json</code> to your source manifest. |
| 69 This ensures that the key isn't overridden anytime your reload your app |
| 70 or share the app with other users. |
| 71 It's not the most graceful task, but here's how it goes: |
| 72 </p> |
| 73 <ol> |
| 74 <li>Go to your |
| 75 <a href="http://www.chromium.org/user-experience/user-data-direc
tory">user data directory</a>. |
| 76 Example on MacOs: <code>~/Library/Application\ Support/Google/Ch
rome/Default/Extensions</code></li> |
| 77 <li>List the installed apps and extensions and match your app ID on the
apps and extensions management page |
| 78 to the same ID here.</li> |
| 79 <li>Go to the installed app directory (this will be a version within the
app ID). |
| 80 Open the installed <code>manifest.json</code> |
| 81 (pico is a quick way to open the file).</li> |
| 82 <li>Copy the "key" in the installed <code>manifest.json</code> and paste
it into your app's source manifest file.</li> |
| 83 </ol> |
| 84 <h3>Get your client ID</h3> |
| 85 <p> |
| 86 Setting up the client ID is currently not available externally |
| 87 via <a href="https://devconsole-canary.corp.google.com/apis/">Google APIs Consol
e</a>. |
| 88 So to setup the OAuth2 client ID, |
| 89 email <a href="mailto:chrome-apps-auth-requests@google.com">chrome-apps-auth-req
uest@google.com</a> |
| 90 with your stable app ID and |
| 91 we will reply appropriately with your OAuth2 client ID. |
| 92 </p> |
| 93 <h3>Update your manifest</h3> |
| 94 <p> |
| 95 You need to update your manifest to include |
| 96 the client ID and scopes. |
| 97 Here's the sample "oauth2" for the |
| 98 <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/gdocs">g
docs sample</a>: |
| 99 </p> |
| 100 <pre> |
| 101 "oauth2": { |
| 102 "client_id": "665859454684.apps.googleusercontent.com", |
| 103 "scopes": [ |
| 104 "https://docs.google.com/feeds/", |
| 105 "https://docs.googleusercontent.com/", |
| 106 "https://spreadsheets.google.com/feeds/", |
| 107 "https://www.googleapis.com/auth/drive.file" |
| 108 ] |
| 109 } |
| 110 </pre> |
| 111 <h3>Get the token</h3> |
| 112 <p> |
| 113 You are now ready to get the auth token: |
| 114 </p> |
| 115 <pre> |
| 116 chrome.experimental.identity.getAuthToken(function(token) { }) |
| 117 </pre> |
| 118 <h2 id="non">Non-Google account authentication</h2> |
| 119 <p> |
| 120 Here are the three steps you need to complete: |
| 121 </p> |
| 122 <ol> |
| 123 <li>Register with the provider.</li> |
| 124 <li>Add permissions for provider resources that your app will access.</l
i> |
| 125 <li>Get the authentication token.</li> |
| 126 </ol> |
| 127 <h3>Register with the provider</h3> |
| 128 <p> |
| 129 You need to register an OAuth2 client ID with the provider |
| 130 and configure the client ID as a website. |
| 131 For the redirect URI to be entered during registration, |
| 132 use the URL of the form: |
| 133 <code>https://<extension-id>.chromiumapp.org/<anything-here></code> |
| 134 </p> |
| 135 <p> |
| 136 For example, if you app ID is abcdefghijklmnopqrstuvwxyzabcdef and |
| 137 you want provider_cb to be the path, |
| 138 to distinguish it with redirect URIs from other providers, |
| 139 you should use: |
| 140 <code>https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb</code
> |
| 141 </p> |
| 142 <h3>Add permissions for provider</h3> |
| 143 <p> |
| 144 To make cross-original XHRs to Google API endpoints, |
| 145 you need to whitelist those patterns in the permissions: |
| 146 </p> |
| 147 <pre> |
| 148 "permissions": [ |
| 149 ... |
| 150 "https://docs.google.com/feeds/", |
| 151 "https://docs.googleusercontent.com/", |
| 152 “https://www.website-of-provider-with-user-photos.com/photos/” |
| 153 ] |
| 154 </pre> |
| 155 <h3>Get the token</h3> |
| 156 <p> |
| 157 To get the token: |
| 158 </p> |
| 159 <pre> |
| 160 chrome.experimental.identity.launchWebAuthFlow( |
| 161 {‘url’: ‘<url-to-do-auth>’, ‘interactive’: true}, |
| 162 function(redirect_url) { // Extract token from redirect_url }); |
| 163 </pre> |
| 164 <p> |
| 165 The <url-to-do-auth> is whatever the URL is to do auth to the provider from a
website. |
| 166 For example, let us say that you are performing OAuth2 flow with a provider |
| 167 and have registered your app with client id 123456789012345 and |
| 168 you want access to user’s photos on the provider’s website: |
| 169 <code>https://www.website-of-provider-with-user-photos.com/dialog/oauth?client_i
d=123456789012345&<br>redirect_uri=https://abcdefghijklmnopqrstuvwxyzabcdef.
chromiumapp.org/provider_cb&response_type=token&scope=user_photos</code> |
| 170 </p> |
| 171 <p> |
| 172 The provider will perform authentication and if appropriate, |
| 173 will show login and/or approval UI to the user. |
| 174 It will then redirect to |
| 175 <code>https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authT
oken=<auth-token></code> |
| 176 </p> |
| 177 <p> |
| 178 Chrome will capture that and invoke the callback |
| 179 of the app with the full redirect URL. |
| 180 The app should extract the token out of the URL. |
| 181 </p> |
| 182 <h3>Interactive versus silent mode</h3> |
| 183 <p> |
| 184 When calling <code>launchWebAuthFlow</code>, |
| 185 you can pass a flag (‘interactive’: true in the example above) |
| 186 indicating whether you want the API to be called |
| 187 in interactive mode or not (aka silent mode). |
| 188 If you invoke the API in interactive mode, |
| 189 the user is shown UI, if necessary, |
| 190 to get the token (signin UI and/or approval UI; |
| 191 or for that matter any provider specific UI). |
| 192 </p> |
| 193 <p> |
| 194 If you invoke the API in silent mode, |
| 195 the API will only return a token if the provider is able |
| 196 to provide a token without showing any UI. |
| 197 This is useful in cases when an app is doing the flow at app startup, for exampl
e, |
| 198 or in general in cases where there is no user gesture involved. |
| 199 </p> |
| 200 <p> |
| 201 The best practice we suggest is to use silent mode |
| 202 when there is no user gesture involved and use interactive mode |
| 203 if there is a user gesture (for example, the user clicked the Sign In button in
your app). |
| 204 Note that we do not enforce gesture requirement. |
| 205 </p> |
| 206 <p class="backtotop"><a href="#top">Back to top</a></p> |
OLD | NEW |