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