8000 Merge branch 'step-1-dev' into step-2-dev · sparkyfen/sdk-node-tutorial@157efed · GitHub
[go: up one dir, main page]
Skip to content

Commit 157efed

Browse files
william26william26
committed
Merge branch 'step-1-dev' into step-2-dev
2 parents 63dd596 + 491dba9 commit 157efed

File tree

2 files changed

+114
-29
lines changed

2 files changed

+114
-29
lines changed

‎README.md

Lines changed: 112 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ $ git checkout step-1 --force
154154

155155
Note that any change you made will be discarded and replaced by the code shown in this tutorial (except for your config.js file, that is ignored and will remain there).
156156

157-
**step-2** Adding a state token retrieval endpoint server-side
157+
**step-2 Adding a state token retrieval endpoint server-side**
158158

159159
Now that the SDK is initialized, we need to add an endpoint to generate unique state tokens. In the `app.js` file, you'll find the following placeholder :
160160

@@ -181,7 +181,7 @@ That's it for step 2. If you want to get the code right away, just run the follo
181181
$ git checkout step-2 --force
182182
```
183183

184-
**step-3** Adding an authentication endpoint server-side
184+
**step-3 Adding an authentication endpoint server-side**
185185

186186
In this step we'll add an authentication endpoint in the backend so that the front-end can give it the code retrieved from OAuth.io.
187187

@@ -218,7 +218,7 @@ That's it for step 3. If you want to get the code right away, just run the follo
218218
$ git checkout step-3 --force
219219
```
220220

221-
**step-4** Adding a request endpoint server-side
221+
**step-4 Adding a request endpoint server-side**
222222

223223
In this step we'll add a final endpoint to our server which will allow the front-end to get information about the user.
224224

@@ -262,7 +262,7 @@ $ git checkout step-4 --force
262262
Part 2 : client-side code
263263
-------------------------
264264

265-
**step-5** Initializing OAuth.io client-side
265+
**step-5 Initializing OAuth.io client-side**
266266

267267
In this step we'll initialize the OAuth.io client-side JavaScript SDK. The SDK is already pointed by the `public/index.html` file. That file also points to `public/src/script.js` where we'll put our code.
268268

@@ -276,28 +276,20 @@ $('#login_button').click(function() {
276276
init_oauthio();
277277
// calls your function to retrieve a token from your endpoint
278278
retrieve_token(function(err, token) {
279-
// launches the popup authentication, with the retrieved token
280-
OAuth.popup('facebook', {
281-
state: token
282-
})
283-
.done(function(r) {
284-
// calls your function to send the code to the
285-
// authentication endpoint
286-
authenticate(r.code, function(err) {
287-
if (!err) {
288-
// calls your function to call your request endpoint
289-
retrieve_user_info(function(user_data) {
290-
// fills elements in the page with the user info
291-
$('#name_box').html(user_data.name)
292-
$('#email_box').html(user_data.email);
293-
$('#img_box').attr('src', user_data.avatar);
294-
});
295-
}
296-
});
297-
})
298-
.fail(function(e) {
299-
console.log(e);
279+
// calls your function to launch a popup with the state token
280+
// and call the authentication endpoint with the resulting code
281+
authenticate(token, function(err) {
282+
if (!err) {
283+
// calls your function to call your request endpoint
284+
retrieve_user_info(function(user_data) {
285+
// fills elements in the page with the user info
286+
$('#name_box').html(user_data.name)
287+
$('#email_box').html(user_data.email);
288+
$('#img_box').attr('src', user_data.avatar);
289+
});
290+
}
300291
});
292+
})
301293
});
302294
});
303295
```
@@ -326,7 +318,7 @@ That's it for step 5. To get the code right away, just run the following command
326318
$ git clone step-5 --force
327319
```
328320

329-
**step-6** Adding a call to retrieve the state token
321+
**step-6 Adding a call to retrieve the state token**
330322

331323
In this step you'll have to fill the `retrieve_token` function to get a token from the backend. This is a simple GET request, that we'll perform thanks to jQuery's `ajax` method.
332324

@@ -362,7 +354,100 @@ That's it for step 6. If you want to get the code right away, just run the follo
362354
$ git checkout step-6 --force
363355
```
364356

365-
**step-7** Adding a call to authenticate the user
357+
**step-7 Adding a call to authenticate the user**
366358

359+
In this step, you n 6D47 eed to add code to launch a popup from the OAuth.io client-side SDK, giving it the state token you got from the previous step.
367360

361+
Once the user will have logged in the provider's website and accepted the asked permissions, you'll be given a code from OAuth.io that will allow your backend to retrieve the provider access token.
368362

363+
You then need to send the code to the authentication endpoint you created in your backend previously.
364+
365+
To do all that, just replace the placeholder :
366+
367+
```javascript
368+
function authenticate(code, callback) {
369+
// Add the code to authenticate the user here
370+
}
371+
```
372+
373+
with :
374+
375+
```javascript
376+
function authenticate(token, callback) {
377+
// Launches a popup showing the provider's website
378+
// for the user to login and to accept permissions
379+
OAuth.popup('facebook', {
380+
state: token
381+
})
382+
.done(function(r) {
383+
// Sends the code to the authentication endpoint
384+
// we created earlier
385+
$.ajax({
386+
url: '/oauth/signin',
387+
method: 'POST',
388+
data: {
389+
code: r.code
390+
},
391+
success: function(data, status) {
392+
// Here the user is authenticated.
393+
// We can call a request endpoint to retrieve information
394+
// in the callback.
395+
callback(null, data);
396+
},
397+
error: function(data) {
398+
callback(data);
399+
}
400+
});
401+
})
402+
.fail(function(e) {
403+
console.log(e);
404+
});
405+
}
406+
```
407+
408+
409+
That's it for step 7. If you want to get the code right away, just run the following command :
410+
411+
```sh
412+
$ git checkout step-7 --force
413+
```
414+
415+
**step-8 Adding a call to the request endpoint to get user info**
416+
417+
Now we can finally retrieve the user's information through our `/me` endpoint.
418+
419+
To do that, we need to make a GET request to that endpoint. Just replace the following placeholder :
420+
421+
```javascript
422+
function retrieve_user_info(callback) {
423+
// Add the code to perform a user request here
424+
}
425+
```
426+
427+
with the following code :
428+
429+
```javascript
430+
function retrieve_user_info(callback) {
431+
$.ajax({
432+
url: '/me',
433+
success: function (data, status) {
434+
// Here the callbaxk just gets the name, email and avatar field and
435+
// fills the elements of the page.
436+
callback(data);
437+
},
438+
error: function (data) {
439+
console.log(data);
440+
}
441+
});
442+
}
443+
```
444+
445+
That's it for step 8. If you want to get the code right away, just run the following command :
446+
447+
```sh
448+
$ git checkout step-8 --force
449+
```
450+
451+
**Testing**
452+
453+
You can now launch the server and access the page on `localhost:3000`. You can click on the login button, which will show the popup, retrieve your info and display it on the page.

‎public/src/script.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function retrieve_token(callback) {
66
// Add the code to retrieve the state token here
77
}
88

9-
function authenticate(code, callback) {
9+
function authenticate(token, callback) {
1010
// Add the code to authenticate the user here
1111
}
1212

@@ -17,7 +17,7 @@ function retrieve_user_info(callback) {
1717
$('#login_button').click(function() {
1818
init_oauthio();
1919
retrieve_token(function(err, token) {
20-
authenticate(function(err) {
20+
authenticate(token, function(err) {
2121
if (!err) {
2222
retrieve_user_info(function(user_data) {
2323
$('#name_box').html(user_data.name)

0 commit comments

Comments
 (0)
0