OLD | NEW |
(Empty) | |
| 1 <h1 id="lab_7_user_identity">Lab 7 - User Identity</h1> |
| 2 |
| 3 <p>Most modern applications are attached to the web to synchronize data. When sy
nchronizing data, you need to identify who the user is. |
| 4 Chrome apps come with an <a href="http://developer.chrome.com/trunk/apps/experim
ental.identity.html">identity API</a> that makes it easy to integrate either wit
h Google accounts or with any other service that supports OAuth.</p> |
| 5 |
| 6 <ol> |
| 7 <li> Built in - Google Authenticiation</li> |
| 8 <li> Third Party Authentication (Twitter, Foursquare, etc.)</li> |
| 9 </ol> |
| 10 |
| 11 <h2 id="you_should_also_read">You should also read</h2> |
| 12 |
| 13 <p><a href="http://developer.chrome.com/trunk/apps/app_identity.html">Identify U
ser</a> in Chrome app docs</p> |
| 14 |
| 15 <p class="note"><b>Note:</b> Apps with authentication require the experimental
permission in the <code>manifest.json</code> and, until they came out of experim
ental state, they cannot be uploaded to the Chrome Web Store. |
| 16 If you prefer, you can choose to skip this lab.</p> |
| 17 |
| 18 <h2 id="authenticating_with_google">Authenticating with Google</h2> |
| 19 |
| 20 <p>We are working on a very easy integration flow for apps that authenticate wit
h Google accounts. However, this flow is not yet available for general use. In t
he meantime, you may still use the third-party flow described below, even for Go
ogle services.</p> |
| 21 |
| 22 <h2 id="integrating_with_a_third_party_service">Integrating with a third-party s
ervice</h2> |
| 23 |
| 24 <p>Chrome apps have a dedicated API for lauching the authentication flow to any
third-party OAuth2 service, called <a href="http://developer.chrome.com/trunk/ap
ps/experimental.identity.html#method-launchWebAuthFlow">launchWebAuthFlow</a>. |
| 25 To show how this flow works, we're going to update our sample to import <a h
ref="https://developers.google.com/google-apps/tasks/">Google Tasks</a> into the
Todo list.</p> |
| 26 |
| 27 <h3 id="register_with_the_provider">Register with the provider</h3> |
| 28 |
| 29 <p>To use a third-party OAuth2 provider, you will first need to register your ap
plication with the provider. Each provider has a different way of registering ap
plications, but in general it will be in a section called Developer or API at th
e provider's website.</p> |
| 30 |
| 31 <p>Here we are treating Google as a third-party service. Just follow Google'
s own registration procedure for apps requiring API access below:</p> |
| 32 |
| 33 <ol> |
| 34 <li>Create a new project in the <a href="https://code.google.com/apis/console">G
oogle API console</a>.</li> |
| 35 <li>Activate the Tasks API on the Services secion.</li> |
| 36 <li>Create a new OAuth2.0 client ID on API Access section. Select Web applicatio
n and leave other fields unchanged.</li> |
| 37 <li>Click on Edit settings for the newly created client ID.</li> |
| 38 <li>In Authorized Redirect URLs, add <code>https://<YOURAPP_ID>.chromiumap
p.org/</code>, |
| 39 replacing <YOURAPP_ID> with your app ID (this is the app's long alphan
umeric ID you can find in <code>chrome://extensions</code>).</li> |
| 40 </ol> |
| 41 |
| 42 <h3 id="add_permissions">Add permissions</h3> |
| 43 |
| 44 <p>Update the <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/m
aster/lab7_useridentification/angularjs/manifest.json">manifest.json</a> to use
"experimental" features. Note that we've also requested permission
to make XHR requests to the Tasks service URL - for security reasons, you need
to request explicit permission in the manifest for every URL you will call via X
HR. |
| 45 <pre> |
| 46 { |
| 47 ... , |
| 48 "permissions": ["storage", "experimental", &q
uot;https://www.googleapis.com/tasks/*"] |
| 49 } |
| 50 </pre></p> |
| 51 |
| 52 <h3 id="add_google_tasks_to_the_todo_list">Add Google tasks to the Todo list</h3
> |
| 53 |
| 54 <p>Now we are ready to ask user's authorization, so we can connect to the Ta
sks service and import his tasks into our Todo list. First, we will need to requ
est an access token - which, at the first run will automatically pops up an auth
entication and authorization window to the user. |
| 55 Once we have this token, we are able to call the Google Tasks API directly.</p> |
| 56 |
| 57 <ol> |
| 58 <li><p>Since this is time consuming and error prone, you can cheat and copy our
JavaScript that handles the authentication to the Google Tasks API from here: <a
href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_useri
dentification/angularjs/gapi_tasks.js">gapi_tasks.js</a>. |
| 59 This script calls <code>launchWebFlow</code> and gets a valid access token for t
he specified client ID. It also has simple JavaScript methods that, after authen
ticated, goes to the Tasks API and gets the user's task lists and the corres
ponding tasks. </p> |
| 60 |
| 61 <p class="note"><b>Note:</b> this script is NOT intented to be used in producti
on - it is just a very simple, limited and definitely not robust piece of code i
ntented to highlight the basic authentication and API calls.</p></li> |
| 62 <li><p>Add a new method to the existing <a href="https://github.com/GoogleChrome
/chrome-app-codelab/blob/master/lab7_useridentification/angularjs/controller.js"
>controller.js</a> that, using the methods from the script of the previous step,
authenticates the user and imports his Google tasks into the Todo list: |
| 63 <pre> |
| 64 $scope.importFromGTasks = function() { |
| 65 var api = new TasksAPI(); |
| 66 var clientId = "<GET_YOURS_AT_https://code.google.com/apis/console>
"; |
| 67 api.authenticate(clientId, function() { |
| 68 api.getLists(function(result) { |
| 69 console.log(result); |
| 70 if (!result || !result.items || result.items.length==0) { |
| 71 throw "No task lists available"; |
| 72 } |
| 73 var listId=result.items[0].id; |
| 74 api.getTasks(listId, function(tasks) { |
| 75 console.log(tasks); |
| 76 for (var j=0; j<tasks.items.length; j++) { |
| 77 $scope.$apply(function() { |
| 78 $scope.todos.push({text:tasks.items[j].title, done:tasks.items[j].st
atus!="needsAction"}); |
| 79 }); |
| 80 } |
| 81 }); |
| 82 }); |
| 83 }); |
| 84 } |
| 85 </pre> </p> |
| 86 |
| 87 <p>Replace the following line in the code above: |
| 88 <pre> |
| 89 var clientId = "<GET_YOURS_AT_https://code.google.com/apis/console>
"; |
| 90 </pre> |
| 91 with your own project's Client ID that you got from the Google API Console.
Should look like this: |
| 92 <pre> |
| 93 var clientId = "xxxxxxxxxxxxxx.apps.googleusercontent.com"; |
| 94 </pre></p></li> |
| 95 <li><p>Now we just need a button that starts the import process. Update the <cod
e>index.html</code> to include <code>gapi_tasks.js</code> and add a new button t
o call <code>importFromGTasks</code>: |
| 96 <pre> |
| 97 <script src="gapi_tasks.js"></script> |
| 98 ... |
| 99 <button ng-click="importFromGTasks()">import tasks from GTasks&l
t;/button> |
| 100 </pre></p></li> |
| 101 </ol> |
| 102 |
| 103 <p class="note"><b>Note:</b> If you get stuck and want to see the app in action
, |
| 104 go to <code>chrome://extensions</code>, load the unpacked <a href="app_codelab7_
useridentification.html">lab7_useridentification</a> app, |
| 105 and launch the app from a new tab.</p> |
| 106 |
| 107 <h1 id="what_39_s_next_">What's next?</h1> |
| 108 |
| 109 <p>In <a href="app_codelab8_webresources.html">lab8_webresources</a>, |
| 110 you will learn how to load and show images from a remote URL.</p> |
| 111 |
| 112 <p class="note"><b>Note:</b> Up until now, the code in each lab builds upon the
previous lab code sample. |
| 113 We've decided not to include the user identification code changes in the rem
ainder of the lab since the <code>identity API</code> is still experimental and
as such it would prevent you from publishing your final code to the Chrome Web S
tore.</p> |
OLD | NEW |