在本教程中,我们将在Node.js Web应用程序中通过Facebook和GitHub实现身份验证。 为此,我们将使用Passport ,它是Node.js的身份验证中间件。 Passport支持使用OpenId / OAuth提供程序进行身份验证。
Express Web App
我们将从为应用程序创建文件夹开始,然后在终端上访问该文件夹:
mkdir AuthApp
cd AuthApp
要创建节点应用程序,我们将使用以下命令:
npm init
系统将提示您为Node的package.json
提供一些信息。 只需按Enter直到最后退出即可保留默认配置。
接下来,我们需要一个HTML文件发送给客户端。 在应用程序的根文件夹中创建一个名为auth.html
的文件,其内容如下:
<html>
<head>
<title>Node.js OAuth</title>
</head>
<body>
<a href=auth/facebook>Sign in with Facebook</a>
<br></br>
<a href=auth/github>Sign in with Github</a>
</body>
</html>
这就是本教程所需的全部HTML。
您还将需要Express ,这是一个受Ruby的Sinatra启发而构建Web应用程序的框架。 为了安装Express,请从终端输入以下命令:
npm install express --save
完成此操作后,就该编写一些代码了。
在您应用的根文件夹中创建一个文件index.js
,并向其中添加以下内容:
/* EXPRESS SETUP */
const express = require('express');
const app = express();
app.get('/', (req, res) => res.sendFile('auth.html', { root : __dirname}));
const port = process.env.PORT || 3000;
app.listen(port , () => console.log('App listening on port ' + port));
在上面的代码中,我们需要Express并通过调用express()创建Express应用。 然后,我们声明应用程序主页的路线。 在那里,我们将创建的HTML文件发送给访问该路由的客户端。 然后,我们使用process.env.PORT
将端口设置为环境端口变量(如果存在)。 否则,我们将默认设置为3000
,这是我们将在本地使用的端口。 这为您提供了足够的灵活性,可以从开发直接切换到生产环境,在该生产环境中,端口可以由服务提供商(例如Heroku)设置 。 在下面,我们使用设置的port变量调用app.listen() ,并通过一个简单的日志让我们知道它一切正常,并且应用程序在哪个端口上监听。
现在,我们应该启动我们的应用程序,以确保所有功能均正常运行。 只需在终端上编写以下命令:
node index.js
您应该看到以下消息: App listening on port 3000
。 如果不是这种情况,您可能错过了一步。 返回并重试。
继续,让我们看看我们的页面是否正在提供给客户端。 转到您的Web浏览器并导航到http://localhost:3000
。
如果您可以看到我们在auth.html
创建的页面,那么我们很好。
ctrl + c停止应用程序。 所以请记住,当我说启动应用程序时,编写node index.js
,当我说停止应用程序时,则编写ctrl + c
设置护照
您很快就会意识到,Passport轻而易举地为我们的用户提供身份验证。 让我们使用以下命令安装Passport:
npm install passport --save
现在我们必须设置Passport。 在index.js
文件的底部添加以下代码:
/* PASSPORT SETUP */
const passport = require('passport');
app.use(passport.initialize());
app.use(passport.session());
app.get('/success', (req, res) => res.send("You have successfully logged in"));
app.get('/error', (req, res) => res.send("error logging in"));
passport.serializeUser(function(user, cb) {
cb(null, user);
});
passport.deserializeUser(function(obj, cb) {
cb(null, obj);
});
在这里,我们需要Passport并将其连同其会话身份验证中间件一起直接在Express应用程序中进行初始化。 然后,我们设置了'/success'
和'/error'
路由,这将呈现一条消息,告诉我们认证如何进行。 这是我们最后的路线相同的语法,只是这一次,而不是使用[res.SendFile()](http://expressjs.com/en/api.html#res.sendFile)
我们使用[res.send()](http://expressjs.com/en/api.html#res.send)
,它将在浏览器中将给定的字符串呈现为text/html
。 然后,我们使用serializeUser
和deserializeUser
回调。 第一个将在身份验证时被调用,其工作是序列化用户实例并通过cookie将其存储在会话中。 第二个请求将在随后的每个请求中调用,以反序列化该实例,并为其提供唯一的cookie标识符作为“凭据”。 您可以在Passport 文档中阅读有关此内容的更多信息。
附带说明一下,我们的这个非常简单的示例应用程序在没有deserializeUser
情况下也可以正常工作,但是它杀死了保持会话的目的,而这在每个需要登录的应用程序中都需要。
这就是实际护照设置的全部内容。 现在我们终于可以开始业务了。
实施Facebook身份验证
为了提供Facebook身份验证,我们需要做的第一件事是安装passport-facebook软件包。 你知道怎么回事:
npm install passport-facebook --save
现在已经完成所有设置,添加Facebook身份验证非常容易。 在index.js
文件的底部添加以下代码:
/* FACEBOOK AUTH */
const FacebookStrategy = require('passport-facebook').Strategy;
const FACEBOOK_APP_ID = 'your app id';
const FACEBOOK_APP_SECRET = 'your app secret';
passport.use(new FacebookStrategy({
clientID: FACEBOOK_APP_ID,
clientSecret: FACEBOOK_APP_SECRET,
callbackURL: "/auth/facebook/callback"
},
function(accessToken, refreshToken, profile, cb) {
return cb(null, profile);
}
));
app.get('/auth/facebook',
passport.authenticate('facebook'));
app.get('/auth/facebook/callback',
passport.authenticate('facebook', { failureRedirect: '/error' }),
function(req, res) {
res.redirect('/success');
});
让我们逐步看一下这段代码。 首先,我们需要passport-facebook
模块。 然后,我们声明将在其中存储我们的应用程序ID和应用程序密钥的变量(我们将很快了解如何获取这些变量)。 之后,我们告诉Passport use
我们所需的FacebookStrategy
实例。 为了实例化上述策略,我们为它提供了我们的应用程序ID和应用程序秘密变量,以及将用于验证用户身份的callbackURL
。 作为第二个参数,它使用一个函数,该函数将返回用户提供的配置文件信息。
再往下,我们设置了提供身份验证的路由。 如您在callbackURL
所见,我们将用户重定向到我们之前定义的/error
和/success
路由。 我们使用的是password.authenticate ,它尝试使用给定策略的第一个参数(在本例中为facebook
进行身份验证。 您可能已经注意到我们做了两次。 在第一个应用程序上,它将请求发送到我们的Facebook应用程序。 第二个是由回调URL触发的,Facebook将使用该URL来响应登录请求。
现在,您需要创建一个Facebook应用程序。 有关如何执行此操作的详细信息,请参阅Facebook非常详细的指南“ 创建Facebook应用程序” ,其中提供了有关如何创建应用程序的逐步说明。
创建应用程序后,请转到应用程序配置页面上的设置 。 在这里,您会看到自己的应用程序ID和应用程序密码 。 不要忘记使用相应的值更改在index.js
文件中为它们声明的变量。
接下来,在“ 应用程序域”字段中输入“ localhost”。 然后,转到页面底部的添加平台 ,然后选择网站 。 使用http://localhost:3000/auth/facebook/callback
作为站点URL 。
在左侧边栏的“ 产品”部分下,您应该看到Facebook登录 。 点击进入那里。
最后,将有效OAuth重定向URI字段设置为http://localhost:3000/auth/facebook/callback
。
如果您现在启动应用程序并单击“ 使用Facebook登录”链接, Facebook会提示您提供所需的信息,并且登录后,应将您重定向到/success
路由,您将在其中看到You have successfully logged in
的消息。
而已! 您刚刚设置了Facebook身份验证 。 很简单,对不对?
实施GitHub身份验证
添加GitHub身份验证的过程与我们对Facebook所做的过程非常相似。 首先,我们将安装passport-github模块:
npm install passport-github --save
现在转到index.js
文件,并在底部添加以下行:
/* GITHUB AUTH */
const GitHubStrategy = require('passport-github').Strategy;
const GITHUB_CLIENT_ID = "your app id"
const GITHUB_CLIENT_SECRET = "your app secret";
passport.use(new GitHubStrategy({
clientID: GITHUB_CLIENT_ID,
clientSecret: GITHUB_CLIENT_SECRET,
callbackURL: "/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: '/error' }),
function(req, res) {
res.redirect('/success');
});
这看起来很熟悉! 几乎和以前一样。 唯一的区别是我们使用的是GithubStrategy而不是FacebookStrategy 。
到目前为止……相同。 如果您还没有弄清楚,下一步就是创建我们的GitHub App 。 GitHub有一个非常简单的指南“ 创建GitHub应用程序” ,它将指导您完成该过程。
完成后,在配置面板中,您需要将Homepage URL设置为http://localhost:3000/
,并将Authorization回调URL设置为http://localhost:3000/auth/github/callback
,就像我们在Facebook上做了。
现在,只需重新启动节点服务器,然后尝试使用GitHub链接登录。
有用! 现在,您可以让您的用户使用GitHub登录。
结论
在本教程中,我们看到了Passport如何使身份验证任务变得非常简单。 实施Google和Twitter身份验证遵循的模式几乎相同。 我要求您使用“ passport-google”和“ passport-twitter”模块来实现这些功能。 同时,此应用程序的代码可在GitHub上获得 。