Express.js+Passport.js 实现 OAuth2 授权登陆-JavaScript中文网-JavaScript教程资源分享门户

介绍

OAuth2是一种流行的认证授权机制，可以让用户使用第三方平台的账号登录你的网站，比如我们常用的QQ、微信、Github等，还可以授权使用用户在这些平台上的资源，如头像、昵称等。本文主要介绍如何在Express.js平台上使用Passport.js实现OAuth2认证授权登录。

准备工作

在开始前，需要确保以下几个环节的准备工作已完成。

Node.js和npm的安装。
Express.js和Passport.js的安装：在终端中执行 npm install express passport passport-oauth passport-github –save，其中passport-oauth是OAuth2插件，passport-github是GitHub登录插件。
创建GitHub OAuth App：前往https://github.com/settings/developers，创建OAuth App，并获取Client ID和Client Secret，供后续使用。

实现思路

首先，我们需要在后端设置响应路由，根据路由返回对应的授权页面。具体步骤如下：

引入相关依赖：const passport = require('passport')。
在Express中配置passport。

app.use(passport.initialize())
app.use(passport.session())

使用passport的GithubStrategy设置Github登录策略。在终端中执行如下命令创建配置文件config.js，用于存储我们的GitHub Client ID和Client Secret。

module.exports = {
    github: {
        clientID: 'xxxxxxxxxxxxxxxxxxx',
        clientSecret: 'xxxxxxxxxxxxxxxxxxxxxxxxx'
    }
};

在启动文件中引入配置文件，配置GithubStrategy。

// www.javascriptcn.com code example
const GitHubStrategy = require('passport-github').Strategy;
const config = require('./config');
passport.use(new GitHubStrategy({
        clientID: config.github.clientID,
        clientSecret: config.github.clientSecret,
        callbackURL: 'http://localhost:3000/auth/github/callback'
    },
    function(accessToken, refreshToken, profile, cb) {
        return cb(null, profile);
    }
));

实现路由。

app.get('/auth/github', passport.authenticate('github'));
app.get('/auth/github/callback',
    passport.authenticate('github', { failureRedirect: '/login' }),
    function(req, res) {
        res.redirect('/');
    });

其中，/auth/github路由会调用GitHub登录策略，并返回GitHub OAuth授权页面，/auth/github/callback会在用户确认授权后取回GitHub授权码，再次发起请求，获取用户账号信息。

登出。

app.get('/logout', function(req, res){
    req.logout();
    res.redirect('/');
});

最后是前端按钮，用于发起授权请求。HTML代码如下：

<a class="btn btn-default" href="/auth/github">Gihhub 登录</a>

完整代码示例

// www.javascriptcn.com code example
const express = require('express');
const passport = require('passport');
const GitHubStrategy = require('passport-github').Strategy;
const session = require('express-session');
const cookieParser = require('cookie-parser');

const app = express();

app.use(cookieParser());
app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true,
    cookie: { secure: false }
}));

app.use(passport.initialize());
app.use(passport.session());

passport.serializeUser(function(user, done) {
    done(null, user);
});

passport.deserializeUser(function(obj, done) {
    done(null, obj);
});

const config = require('./config'); //引入配置文件

passport.use(new GitHubStrategy({ //配置GithubStrategy
        clientID: config.github.clientID,
        clientSecret: config.github.clientSecret,
        callbackURL: 'http://localhost:3000/auth/github/callback'
    },
    function(accessToken, refreshToken, profile, cb) {
        return cb(null, profile);
    }
));

app.get('/', function(req, res) {
    let html;
    if (req.isAuthenticated()) { //已登录
        html = `<p>Hello ${req.user._json.name}</p>
                <a href="/logout">退出登录</a>`;
    } else { //未登录
        html = `<p>Hello 您还没有登录！</p>
                <a class="btn btn-default" href="/auth/github">Gihhub 登录</a>`;
    }
    res.send(html);
});

app.get('/auth/github', passport.authenticate('github')); //获取授权
app.get('/auth/github/callback', passport.authenticate('github', { failureRedirect: '/login' }), function(req, res) { //获取用户信息
    res.redirect('/');
});

app.get('/logout', function(req, res) { //登出
    req.logout();
    res.redirect('/');
});

app.listen(3000, function() {
    console.log('Example app listening on port 3000!');
});

指导意义

本文介绍了如何在Express.js环境中使用Passport.js和OAuth2认证协议实现第三方登录认证，这种技术能够方便用户使用已有的社交账号授权登录你的网站，提高用户体验和流量，同时也为开发者降低了认证开发门槛。

另外，值得注意的是，OAuth2协议原生支持Client Credentails Flow、Authorization Code Flow、Password Credentials Flow、Implicit Flow等四种认证方式，而Passport.js还支持其他身份验证策略，如LDAP、OpenID、SAML等，可以根据业务需求选择合适的策略进行开发。

参考资料

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d663fda941bf7134c211e0

Express.js+Passport.js 实现 OAuth2 授权登陆

介绍

准备工作

实现思路

完整代码示例

指导意义

参考资料

接着读