| OLD | NEW |
|---|
| (Empty) |
| 1 <h1 id="lab_7_user_identity">Access User's Data</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="experimental.identity">identity API</a> that m
akes it easy to integrate either with 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 <p class="warning"><b>Warning:</b> | |
| 12 Apps with authentication require the experimental permission in the | |
| 13 <code>manifest.json</code> and, until they came out of experimental state, | |
| 14 they cannot be uploaded to the Chrome Web Store. | |
| 15 If you prefer, you can choose to skip this lab.</p> | |
| 16 | |
| 17 <h2 id="authenticating_with_google">Authenticating with Google</h2> | |
| 18 | |
| 19 <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> | |
| 20 | |
| 21 <h2 id="integrating_with_a_third_party_service">Integrating with a third-party s
ervice</h2> | |
| 22 | |
| 23 <p>Chrome Apps have a dedicated API for lauching the authentication flow to any
third-party OAuth2 service, called $(ref:identity.launchWebAuthFlow). | |
| 24 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> | |
| 25 | |
| 26 <h3 id="register_with_the_provider">Register with the provider</h3> | |
| 27 | |
| 28 <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> | |
| 29 | |
| 30 <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> | |
| 31 | |
| 32 <ol> | |
| 33 <li>Create a new project in the <a href="https://code.google.com/apis/console">G
oogle API console</a>.</li> | |
| 34 <li>Activate the Tasks API on the Services secion.</li> | |
| 35 <li>Create a new OAuth2.0 client ID on API Access section. Select Web applicatio
n and leave other fields unchanged.</li> | |
| 36 <li>Click on Edit settings for the newly created client ID.</li> | |
| 37 <li>In Authorized Redirect URLs, add <code>https://<YOURAPP_ID>.chromiumap
p.org/</code>, | |
| 38 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> | |
| 39 </ol> | |
| 40 | |
| 41 <h3 id="add_permissions">Add permissions</h3> | |
| 42 | |
| 43 <p>Update the | |
| 44 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_use
ridentification/angularjs/manifest.json">AngularJS manifest.json</a> or | |
| 45 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_use
ridentification/javascript/manifest.json">JavaScript manifest.json</a> | |
| 46 to use "experimental" features. | |
| 47 Note that we've also requested permission | |
| 48 to make XHR requests to the Tasks service URL - for security reasons, | |
| 49 you need to request explicit permission in the manifest for every URL you will c
all via XHR. | |
| 50 </p> | |
| 51 | |
| 52 <pre data-filename="manifest.json"> | |
| 53 { | |
| 54 ... , | |
| 55 "permissions": ["storage", "experimental", &q
uot;https://www.googleapis.com/tasks/*"] | |
| 56 } | |
| 57 </pre> | |
| 58 | |
| 59 <h3 id="add_google_tasks_to_the_todo_list">Add Google tasks to the Todo list</h3
> | |
| 60 | |
| 61 <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. | |
| 62 Once we have this token, we are able to call the Google Tasks API directly.</p> | |
| 63 | |
| 64 <ol> | |
| 65 <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">Angular gapi_tasks.js</a> | |
| 66 and <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7
_useridentification/javascript/gapi_tasks.js">JavaScript gapi_tasks.js</a> are t
he same. | |
| 67 This script calls <code>launchWebFlow</code> and | |
| 68 gets a valid access token for the specified client ID. | |
| 69 It also has simple JavaScript methods that, after authenticated, | |
| 70 goes to the Tasks API and gets the user's task lists and the corresponding t
asks. </p> | |
| 71 | |
| 72 <p class="note"><b>Note:</b> This script is NOT intented to be used in productio
n - it is just a very simple, limited and definitely not robust piece of code in
tented to highlight the basic authentication and API calls.</p></li> | |
| 73 <li><p>Add a new method to the existing | |
| 74 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_use
ridentification/angularjs/controller.js">AngularJS controller.js</a> or | |
| 75 <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab7_use
ridentification/javascript/controller.js">JavaScript controller.js</a> that, | |
| 76 using the methods from the script of the previous step, | |
| 77 authenticates the user and imports his Google tasks into the Todo list: | |
| 78 </p> | |
| 79 | |
| 80 <tabs data-group="source"> | |
| 81 | |
| 82 <header tabindex="0" data-value="angular">Angular</header> | |
| 83 <header tabindex="0" data-value="js">JavaScript</header> | |
| 84 | |
| 85 <content> | |
| 86 <pre data-filename="controller.js"> | |
| 87 $scope.importFromGTasks = function() { | |
| 88 var api = new TasksAPI(); | |
| 89 var clientId = "<GET_YOURS_AT_https://code.google.com/apis/console>
"; | |
| 90 api.authenticate(clientId, function() { | |
| 91 api.getLists(function(result) { | |
| 92 console.log(result); | |
| 93 if (!result || !result.items || result.items.length==0) { | |
| 94 throw "No task lists available"; | |
| 95 } | |
| 96 var listId=result.items[0].id; | |
| 97 api.getTasks(listId, function(tasks) { | |
| 98 console.log(tasks); | |
| 99 for (var j=0; j<tasks.items.length; j++) { | |
| 100 $scope.$apply(function() { | |
| 101 $scope.todos.push({text:tasks.items[j].title, done:tasks.items[j].st
atus!="needsAction"}); | |
| 102 }); | |
| 103 } | |
| 104 }); | |
| 105 }); | |
| 106 }); | |
| 107 } | |
| 108 </pre> | |
| 109 </content> | |
| 110 <content> | |
| 111 <pre data-filename="controller.js"> | |
| 112 document.getElementById('importGTasks').addEventListener('click', | |
| 113 function() { | |
| 114 var api = new TasksAPI(); | |
| 115 var clientId = "<GET_YOURS_AT_https://code.google.com/apis/console>
"; | |
| 116 api.authenticate(clientId, function() { | |
| 117 api.getLists(function(result) { | |
| 118 console.log(result); | |
| 119 if (!result || !result.items || result.items.length==0) { | |
| 120 throw "No task lists available"; | |
| 121 } | |
| 122 var listId=result.items[0].id; | |
| 123 api.getTasks(listId, function(tasks) { | |
| 124 console.log(tasks); | |
| 125 for (var j=0; j<tasks.items.length; j++) { | |
| 126 model.addTodo(tasks.items[j].title, tasks.items[j].status!='needsActio
n'); | |
| 127 } | |
| 128 }); | |
| 129 }); | |
| 130 }); | |
| 131 }); | |
| 132 </pre> | |
| 133 | |
| 134 </tabs> | |
| 135 | |
| 136 <p>Replace the following line in the code above: | |
| 137 <pre data-filename="controller.js"> | |
| 138 var clientId = "<GET_YOURS_AT_https://code.google.com/apis/console>
"; | |
| 139 </pre> | |
| 140 with your own project's Client ID that you got from the Google API Console. | |
| 141 Should look like this: | |
| 142 <pre data-filename="controller.js"> | |
| 143 var clientId = "xxxxxxxxxxxxxx.apps.googleusercontent.com"; | |
| 144 </pre></p></li> | |
| 145 <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>: | |
| 146 </p> | |
| 147 | |
| 148 <tabs data-group="source"> | |
| 149 | |
| 150 <header tabindex="0" data-value="angular">Angular</header> | |
| 151 <header tabindex="0" data-value="js">JavaScript</header> | |
| 152 | |
| 153 <content> | |
| 154 <pre data-filename="index.html"> | |
| 155 <script src="gapi_tasks.js"></script> | |
| 156 ... | |
| 157 <button ng-click="importFromGTasks()">import tasks from GTasks&l
t;/button> | |
| 158 </pre> | |
| 159 </content> | |
| 160 <content> | |
| 161 <pre data-filename="index.html"> | |
| 162 <button id="importGTasks">import tasks from GTasks</button> | |
| 163 ... | |
| 164 <script src="gapi_tasks.js"></script> | |
| 165 </pre> | |
| 166 </content> | |
| 167 | |
| 168 </tabs></li> | |
| 169 </ol> | |
| 170 | |
| 171 <h3 id="results">Check the results</h3> | |
| 172 | |
| 173 <p>If you get stuck and want to see the app in action, | |
| 174 go to <code>chrome://extensions</code>, | |
| 175 load the unpacked | |
| 176 <a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab7_use
ridentification/angularjs">AngularJS app</a> or | |
| 177 <a href="https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab7_use
ridentification/javascript">JavaScript app</a>, | |
| 178 and launch the app from a new tab.</p> | |
| 179 | |
| 180 <h2 id="you_should_also_read">You should also read</h2> | |
| 181 | |
| 182 <p><a href="app_identity">Identify User</a> tutorial</p> | |
| 183 | |
| 184 <h2 id="what_39_s_next_">What's next?</h2> | |
| 185 | |
| 186 <p>In <a href="app_codelab8_webresources">7 - Access Web Resources</a>, | |
| 187 you will learn how to load and show images from a remote URL.</p> | |
| 188 | |
| 189 <p class="note"><b>Note:</b> Up until now, the code in each lab builds upon the
previous lab code sample. | |
| 190 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 |
|---|
Chromium Code Reviews
Issue 645693006:
Updated Chrome Apps codelab (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master