如何在 node.js backEnd 和 angular 2 frontEnd 中使用 jwt 实现社交登录

Question

how to implement the social login such as facebook and google authentication using Json Web token (jwt) ,same as Auth0 has implemented. i am using node js as back end and angular 2 as front end.

Answer 1

Perhaps I'm confused by your phrasing but facebook, google, and JWT are distinct, individual authentication strategies.

But check out passport.js it offers hundreds of authentication strategies:

defined strategy: (this example uses mongoose)

const jwtOptions = {
  jwtFromRequest: PJWT.ExtractJwt.fromAuthHeader(),
  secretOrKey: SECRET, // externally defined private encryption key
}

export const jwtStrategy = new PJWT.Strategy(jwtOptions,
  function (jwt_payload, done) {
    MongoUser.findOne({ email: jwt_payload.email }, function (err, user) { // presumes the user's email is in the jwt
      if (err) return done(err, false);
      if (user) return done(null, user);
      else return done(null, false);
    });
  });

also these are needed by passport:

type Done = (err: any, user?: {}) => void;

export const serializeMongoUser = function (user: UserDoc, done: Done) {
  done(null, user._id);
}

export const deserializeMongoUser = function (_id: any, done: Done) {
  MongoUser.findById(_id, function (err, user) {
    done(err, user);
  });
}

add the middleware to your server:

app.use(passport.initialize());
app.use(passport.session());
passport.serializeUser(ppt.serializeMongoUser);
passport.deserializeUser(ppt.deserializeMongoUser);
passport.use(ppt.jwtStrategy);

authenticate from a service in your app:

  authenticate(): Observable<any> {
    if (!this.security.jwt) return Observable.of({sucess: false})
    return this.http.get('/api/authenticate', authHeaders(this.security))
      .map(res => res.json());
  }

call this function when you need to authenticate:

*note the authHeaders(this.security)

this.security is a subscription to the JWT token in my ngrx store, but you could also put it in localStorage .

export function authHeaders(security: Security) {
  const headers = new Headers();
  headers.append('Content-Type', 'application/json; charset=utf-8');
  headers.append('Authorization', `JWT ${security.jwt}`);
  return { headers };
}

calling authenticate() will return {success: true} or {success: false}

Answer 2

Here is a little example I created to show the basics of socket.io security with JWT authentication. The backend is nodeJS, socket.io, and express.

In the long run you should use passport for user sessions but the below is good to see so you get the whole picture.

Overview

When browsing to http://127.0.0.1:3001 , the express middleware socketAuthenticated will create a jwt based on the hard coated user credentials (should use passport sessions for real user info).

This token is then passed to the server EJS view and used to establish a socket connection.

1. Create a new folder for the app and run npm install express socketio-jwt jsonwebtoken ejs-locals socket.io

2. Create a "public" folder within the root folder and put the socket.io-client JS file inside (you can run bower install socket.io-client to get the js file)

3. Create app.js file within the root folder with the following:

    let express = require('express'), socketioJwt = require('socketio-jwt'), jwt = require('jsonwebtoken'), port = 3001 engine = require('ejs-locals'); let app = express(); let socketAuthenticated = (req, res, next) => { let token = jwt.sign({firstName:"jason", lastName:"owl"}, "secret", { expiresIn: 60*5 }); // assuming you have some user object in req res.token = token; // front end will use this token to authenticate its socket connection next(); }; app.engine('ejs', engine); app.set('view engine', 'ejs'); app.set('view options', {defaultLayout: 'layout'}); app.use(express.static('public')); app.use(socketAuthenticated); app.route('/') .get((req, res) => { console.log(`Server Passing Token: ${res.token} to client`); res.render('index', { jwt: res.token }); }); let server = require('http').Server(app); let io = require('socket.io')(server); // Setup socket server to use JWT io.set('authorization', socketioJwt.authorize({ secret: "secret", handshake: true })); io.of('/default').on('connection', (socket) => { socket.on('data', (newConfig) => { console.log('Data Event Recieved!'); }); }); server.listen(port); console.log(`\\Application: ${process.pid} Listening On Port: ${port}`);

4) Create a new folder called views and create a file called index.ejs :

<script type="text/javascript" src="/socket.io.js"></script>
<script>

    var jwttoken = <%- JSON.stringify(jwt) %>;

    function connect_socket (token) {
      var socket = io.connect('/default', {
        query: 'token=' + token
      });
      return socket;
    }

    var socket = connect_socket(jwttoken);
    socket.emit('data');
</script>

5. run node app.js and open the browser to localhost:3001.