Added href to empty <a> tag in social auth implementation II (#38002)
* Added href to empty <a> tag in social auth implementation II * corrected typos in authentication with socketIO challenge * corrected typo as suggested Co-Authored-By: Eric Leung <eric@erictleung.com> Co-authored-by: Eric Leung <eric@erictleung.com>
This commit is contained in:
committed by
Christopher McCormack
parent
8e605d8b85
commit
fe1c6b24ab
@ -8,7 +8,7 @@ forumTopicId: 301548
|
||||
## Description
|
||||
<section id='description'>
|
||||
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/edit/#!/remix/clone-from-repo?REPO_URL=https://github.com/freeCodeCamp/boilerplate-socketio/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-socketio/'>GitHub</a>.
|
||||
Currently, you cannot determine who is connected to your web socket. While 'req.user' containers the user object, thats only when your user interacts with the web server and with web sockets you have no req (request) and therefore no user data. One way to solve the problem of knowing who is connected to your web socket is by parsing and decoding the cookie that contains the passport session then deserializing it to obtain the user object. Luckily, there is a package on NPM just for this that turns a once complex task into something simple!
|
||||
Currently, you cannot determine who is connected to your web socket. While 'req.user' contains the user object, that's only when your user interacts with the web server and with web sockets you have no req (request) and therefore no user data. One way to solve the problem of knowing who is connected to your web socket is by parsing and decoding the cookie that contains the passport session then deserializing it to obtain the user object. Luckily, there is a package on NPM just for this that turns a once complex task into something simple!
|
||||
<hr>Add 'passport.socketio' as a dependency and require it as 'passportSocketIo'.
|
||||
Now we just have to tell Socket.IO to use it and set the options. Be sure this is added before the existing socket code and not in the existing connection listener. For your server it should look as follows:
|
||||
|
||||
@ -21,7 +21,7 @@ io.use(passportSocketIo.authorize({
|
||||
}));
|
||||
```
|
||||
|
||||
You can also optionally pass 'success' and 'fail' with a function that will be called after the authentication process completes when a client trys to connect.
|
||||
You can also optionally pass 'success' and 'fail' with a function that will be called after the authentication process completes when a client tries to connect.
|
||||
The user object is now accessible on your socket object as <code>socket.request.user</code>. For example, now you can add the following: <code>console.log('user ' + socket.request.user.name + ' connected');</code> and it will log to the server console who has connected!
|
||||
Submit your page when you think you've got it right. If you're running into errors, you can check out the project up to this point <a href='https://gist.github.com/JosephLivengood/a9e69ff91337500d5171e29324e1ff35'>here</a>.
|
||||
</section>
|
||||
|
@ -9,7 +9,7 @@ forumTopicId: 301557
|
||||
<section id='description'>
|
||||
As a reminder, this project is being built upon the following starter project on <a href='https://glitch.com/edit/#!/remix/clone-from-repo?REPO_URL=https://github.com/freeCodeCamp/boilerplate-socialauth/'>Glitch</a>, or cloned from <a href='https://github.com/freeCodeCamp/boilerplate-socialauth/'>GitHub</a>.
|
||||
The last part of setting up your GitHub authentication is to create the strategy itself. For this, you will need to add the dependency of 'passport-github' to your project and require it as GithubStrategy like <code>const GitHubStrategy = require('passport-github').Strategy;</code>.
|
||||
To set up the GitHub strategy, you have to tell <b>passport</b> to <b>use</b> an instantiated <b>GitHubStrategy</b>, which accepts 2 arguments: An object (containing <em>clientID</em>, <em>clientSecret</em>, and <em>callbackURL</em>) and a function to be called when a user is successfully authenticated which we will determine if the user is new and what fields to save initially in the user's database object. This is common across many strategies but some may require more information as outlined in that specific strategy's github README; for example, Google requires a <em>scope</em> as well which determines what kind of information your request is asking returned and asks the user to approve such access. The current strategy we are implementing has its usage outlined <a>here</a>, but we're going through it all right here on freeCodeCamp!
|
||||
To set up the GitHub strategy, you have to tell <b>passport</b> to <b>use</b> an instantiated <b>GitHubStrategy</b>, which accepts 2 arguments: An object (containing <em>clientID</em>, <em>clientSecret</em>, and <em>callbackURL</em>) and a function to be called when a user is successfully authenticated which we will determine if the user is new and what fields to save initially in the user's database object. This is common across many strategies but some may require more information as outlined in that specific strategy's github README; for example, Google requires a <em>scope</em> as well which determines what kind of information your request is asking returned and asks the user to approve such access. The current strategy we are implementing has its usage outlined <a href='https://github.com/jaredhanson/passport-github/'>here</a>, but we're going through it all right here on freeCodeCamp!
|
||||
Here's how your new strategy should look at this point:
|
||||
|
||||
```js
|
||||
|
Reference in New Issue
Block a user