使用Passport为Node.js应用程序提供社交认证

密码本质上是脆弱的,这已经是一个公认的事实。因此,要求最终用户为他们使用的每个应用程序创建强密码只会让事情变得更糟。

一个简单的解决方法是让用户通过现有的社交帐户(例如 Facebook、Twitter、Google 等)进行身份验证。在本文中,我们将做到这一点,并将此社交登录功能添加到在这是本身份验证系列的第一部分,以便我们能够使用 Passport 中间件通过 Facebook 和 Twitter 帐户进行身份验证。

如果您还没有阅读过上一篇文章,我建议您阅读一下它,因为我们将在此文章奠定的基础上构建新的策略、路线和视图。

社交登录

对于外行来说,社交登录是一种使用来自 Facebook、Twitter 等社交网站的现有信息的单点登录,用户通常应该已经创建了帐户。

社交登录主要依赖于 OAuth 2.0 等身份验证方案。要了解有关 OAuth 支持的不同登录流程的更多信息,请阅读本文。我们选择 Passport 来处理社交登录,因为它为各种 OAuth 提供商提供了不同的模块,无论是 Facebook、Twitter、Google、GitHub 等。在本文中,我们将使用 Passport-facebook 和 Passport-twitter 模块通过现有的 Facebook 或 Twitter 帐户提供登录功能。

Facebook 身份验证

要启用 Facebook 身份验证,我们首先需要使用 Facebook 开发者门户创建 Facebook 应用。记下应用 ID 和应用密钥,然后转至设置并在网站部分指定网站 URL,以指定回调 URL。应用。另请确保在联系电子邮件字段中输入有效的电子邮件地址。需要能够公开此应用程序并可供公众访问。

接下来,转到状态和审核部分,并将滑块转到以使应用公开。我们创建一个配置文件 fb.js 来保存连接到 Facebook 所需的配置信息。

// facebook app settings - fb.jsmodule.exports = {  'appID' : '',  'appSecret' : '',  'callbackUrl' : 'http://localhost:3000/login/facebook/callback'}

Facebook 登录策略

回到我们的 Node 应用程序,我们现在使用 FacebookStrategy 模块定义用于 Facebook 身份验证的 Passport 策略,利用上述设置来获取用户的 Facebook 个人资料并在视图中显示详细信息。

passport.use('facebook', new FacebookStrategy({  clientID        : fbConfig.appID,  clientSecret    : fbConfig.appSecret,  callbackURL     : fbConfig.callbackUrl},  // facebook will send back the tokens and profile  function(access_token, refresh_token, profile, done) {// asynchronousprocess.nextTick(function() {      // find the user in the database based on their facebook id  User.findOne({ 'id' : profile.id }, function(err, user) {    // if there is an error, stop everything and return that    // ie an error connecting to the database    if (err)      return done(err);  // if the user is found, then log them in      if (user) {        return done(null, user); // user found, return that user      } else {        // if there is no user found with that facebook id, create them        var newUser = new User();// set all of the facebook information in our user model        newUser.fb.id    = profile.id; // set the users facebook id                        newUser.fb.access_token = access_token; // we will save the token that facebook provides to the user                        newUser.fb.firstName  = profile.name.givenName;        newUser.fb.lastName = profile.name.familyName; // look at the passport user profile to see how names are returned        newUser.fb.email = profile.emails[0].value; // facebook can return multiple emails so we'll take the first// save our user to the database        newUser.save(function(err) {          if (err)            throw err;          // if successful, return the new user          return done(null, newUser);        });     }   });    });}));

配置路由

现在我们需要添加某些路由,以启用 Facebook 登录以及在用户授权应用程序使用其 Facebook 帐户后处理回调。

// route for facebook authentication and login// different scopes while logging inrouter.get('/login/facebook',   passport.authenticate('facebook', { scope : 'email' }));// handle the callback after facebook has authenticated the userrouter.get('/login/facebook/callback',  passport.authenticate('facebook', {    successRedirect : '/home',failureRedirect : '/'  }));

我们的演示应用程序的登录页面如下所示:

使用Passport为Node.js应用程序提供社交认证

当您点击使用 Facebook 登录按钮时,它将尝试通过 Facebook 进行身份验证。如果您已经登录 Facebook,它将显示以下对话框,请求您的许可,否则它将要求您登录 Facebook,然后显示此对话框。

使用Passport为Node.js应用程序提供社交认证

AppMall应用商店 AppMall应用商店

AI应用商店,提供即时交付、按需付费的人工智能应用服务

AppMall应用商店 56 查看详情 AppMall应用商店

如果您允许应用接收您的公开个人资料和电子邮件地址,那么我们注册的回调函数将与用户一起调用细节。我们可以保存这些信息以供将来参考,或者显示它们,或者干脆选择忽略它们,具体取决于您想要如何处理这些信息。请随时跳转并查看此 git 存储库中的完整代码。

值得注意的是,除了此演示应用程序提供的基本信息之外,您还可以使用相同的身份验证机制通过使用适当的范围并使用Facebook API 以及通过用户个人资料收到的访问令牌。

Twitter 身份验证

需要连接一个类似的身份验证模块来通过 Twitter 处理身份验证,并插入 Passport 芯片以帮助其 passport-twitter 模块。

首先,您需要使用其应用程序管理界面创建一个新的 Twitter 应用程序。这里需要注意的一件事是,在指定回调 URL 时,如果在回调 URL 字段中给出“localhost”,Twitter 似乎无法很好地使用它。为了在开发时克服此限制,您可以使用特殊的环回地址或“127.0.0.1”来代替“localhost”。创建应用程序后,在配置文件中记下以下 API 密钥和机密信息,如下所示:

// twitter app settings - twitter.jsmodule.exports = {    'apikey' : '','apisecret' : '','callbackUrl' : 'http://127.0.0.1:3000/login/twitter/callback'}

Twitter 登录策略

Twitter 的登录策略是 TwitterStrategy 的一个实例,如下所示:

passport.use('twitter', new TwitterStrategy({    consumerKey     : twitterConfig.apikey,    consumerSecret  : twitterConfig.apisecret,    callbackURL     : twitterConfig.callbackURL  },  function(token, tokenSecret, profile, done) {    // make the code asynchronous    // User.findOne won't fire until we have all our data back from Twitter    process.nextTick(function() {   User.findOne({ 'twitter.id' : profile.id },         function(err, user) {          // if there is an error, stop everything and return that  // ie an error connecting to the database      if (err)        return done(err);// if the user is found then log them in        if (user) {           return done(null, user); // user found, return that user        } else {           // if there is no user, create them           var newUser                 = new User();   // set all of the user data that we need           newUser.twitter.id          = profile.id;           newUser.twitter.token       = token;           newUser.twitter.username = profile.username;           newUser.twitter.displayName = profile.displayName;           newUser.twitter.lastStatus = profile._json.status.text;   // save our user into the database           newUser.save(function(err) {             if (err)               throw err;             return done(null, newUser);           });        }     });  });    }));

配置路由

// route for twitter authentication and login// different scopes while logging inrouter.get('/login/twitter',    passport.authenticate('twitter'));// handle the callback after facebook has authenticated the userrouter.get('/login/twitter/callback',  passport.authenticate('twitter', {successRedirect : '/twitter',failureRedirect : '/'  }));/* GET Twitter View Page */router.get('/twitter', isAuthenticated, function(req, res){  res.render('twitter', { user: req.user });});

现在要对此进行测试,请务必使用 http://127.0.0.1: 而不是使用 http: //localhost:.正如我们上面已经提到的,在使用“localhost”作为主机名与 Twitter 交换令牌时似乎存在问题。单击使用 Twitter 登录按钮时,正如预期的那样,它会请求用户同意允许此应用程序使用 Twitter。

使用Passport为Node.js应用程序提供社交认证

当您允许应用程序访问您的 Twitter 帐户和有限信息时,登录策略中注册的回调处理程序为调用,然后用于将这些详细信息存储在后端数据库中

结论

这就是你拥有的!我们成功地将 Facebook 和 Twitter 登录添加到示例应用程序中,而无需编写大量代码并通过让 Passport 完成繁重的工作来处理与身份验证机制相关的复杂问题。可以为 Passport 支持的各种提供程序编写类似的登录策略。整个应用程序的代码可以在此 git 存储库中找到。请随意扩展它并在您自己的项目中使用它。

以上就是使用Passport为Node.js应用程序提供社交认证的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/534553.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月9日 12:13:40
下一篇 2025年11月9日 12:19:00

相关推荐

  • 配置 Tailwind CSS:初始化指南 |设置 Tailwind CSS:初始化指南

    简介 |简介意大利语:本文有意大利语和英语版本。向下滚动查看英文版本。英语:本文有意大利语和英语版本。向下滚动查看英文版本。 意大利语版 如何开始使用 tailwind css:项目完整指南 简介 在项目中配置 tailwind css 第一次似乎令人畏惧,特别是对于像我这样第一次尝试这个库的人来说…

    2025年12月24日
    000
  • 如何设置独立 CLI:在 Shopify 中使用 Tailwind CSS,而不使用 Nodejs

    依赖关系 Shopify CLI:一种命令行界面工具,可帮助您开发和管理 Shopify 主题。TailwindCSS:实用程序优先的 CSS 框架,用于快速构建自定义设计。 设置 我们使用 Tailwind 作为独立的 CLI 工具。更多信息可以参考官方指南。 注意:如果您在配备 Intel 处理…

    2025年12月24日
    000
  • 谷歌怎么下载html5_HTML5无需下载浏览器直接渲染运行页面文件【说明】

    HTML5不是需下载的软件,而是浏览器原生标准;Chrome默认支持,可通过file://协议直接打开本地.html文件,或用http-server启动本地服务器以支持完整API功能。 如果您已编写好HTML5页面文件,但误以为需要“下载HTML5”才能运行,则需明确:HTML5不是可下载的独立软件…

    2025年12月23日
    000
  • 手机编程html5工具_移动端代码编辑器推荐【指南】

    推荐五款移动端HTML5编辑器:Acode Editor支持一键预览;DroidEdit Pro可FTP/SFTP远程编辑;Codeanywhere提供云端IDE与Git集成;SpckEditor专注极简单页开发;Termux组合方案实现命令行本地服务。 如果您希望在手机上直接编写、调试和预览 HT…

    2025年12月23日
    000
  • Linux polybar状态栏,HTML+CSS加载进度实时!

    可通过 Bash 脚本在 Polybar 中模拟 HTML+CSS 风格进度条,利用 %{F#color} 标记和块字符 ▮ 动态显示已完成与未完成部分,结合实时任务进度输出格式化文本。 如果您希望在 Linux 的 Polybar 状态栏中显示一个基于 HTML+CSS 风格的加载进度条,并实时反…

    2025年12月23日
    000
  • Node.js Puppeteer爬虫的部署与自动化运行指南

    本教程详细指导如何部署基于node.js和puppeteer的网络爬虫,并实现其自动化定时执行。文章区分了前端静态网站与后端node.js脚本的部署策略,重点介绍了在windows环境下使用任务计划程序(task scheduler)进行定时任务配置的方法,同时提及了cors问题产生的原因及解决方案…

    2025年12月23日
    000
  • Linux Debian用Gulp自动化,CSS编译HTML零等待!

    首先安装Node.js与npm,再初始化项目并安装Gulp及插件,接着配置gulpfile.js定义Sass编译与浏览器同步任务,最后通过gulp命令启动自动化流程,实现CSS即时编译与HTML实时更新。 如果您希望在Linux Debian系统中通过Gulp实现自动化工作流,以达到CSS即时编译、…

    2025年12月23日
    000
  • Node.js爬虫的服务器端部署与定时任务配置指南

    本文旨在指导开发者如何部署基于%ignore_a_1%的puppeteer网络爬虫,并实现其定时自动化运行。针对本地开发环境,文章详细介绍了利用windows任务计划程序配置定时任务的步骤,确保node.js脚本能按预设时间自动执行,更新数据。同时,文章也探讨了生产环境下的部署思路,强调了客户端与服…

    2025年12月23日
    000
  • Node.js爬虫的部署、调度与静态网站数据集成指南

    本教程详细阐述如何部署和自动化运行node.js网络爬虫,实现定时数据抓取并更新静态网站内容。我们将探讨node.js脚本的服务器端运行机制、windows任务计划程序等调度工具的配置,以及爬取数据与静态html页面集成的策略,旨在帮助您构建高效且自动化的数据更新流程。 1. 理解Node.js爬虫…

    2025年12月23日
    000
  • 部署与自动化运行Node.js网络爬虫:使用Windows任务计划程序

    本文将指导您如何部署一个基于node.js和puppeteer的网络爬虫,并利用windows任务计划程序实现其每日定时自动运行。我们将深入探讨服务器端脚本与静态网页的区别,提供详细的步骤配置任务计划,并讨论在自动化过程中需要注意的关键事项,如资源管理、错误处理及跨平台部署思路。 理解Node.js…

    2025年12月23日
    000
  • 部署与调度Node.js爬虫:从本地执行到云端集成

    本教程详细指导如何部署和调度一个基于node.js的网页爬虫,使其能够每日自动运行并将其数据提供给前端应用。文章将区分客户端与服务器端javascript的运行环境,介绍本地任务调度方法,并探讨将爬虫集成到在线服务以实现数据共享的策略,同时涵盖数据持久化、cors处理及部署最佳实践。 1. 理解No…

    2025年12月23日
    000
  • nodejs如何打开html_Node.js环境中HTML文件打开方法

    如果您在Node.js环境中需要打开或提供HTML文件的访问,通常意味着您希望启动一个本地服务器来渲染并展示HTML页面。以下是实现该功能的具体方法: 一、使用内置http模块创建服务器 通过Node.js的内置http模块可以快速搭建一个简易服务器,用于读取并返回HTML文件内容给客户端浏览器。 …

    2025年12月23日
    000
  • WSL2里写HTML+CSS,Windows秒变Linux开发机!

    使用WSL2可在Windows中高效进行Linux环境下的HTML与CSS开发。首先启用WSL2并安装Ubuntu 22.04,确保运行版本为2;接着安装Visual Studio Code及Remote – WSL插件,将项目存于Linux文件系统以实现编辑同步;通过Python内置服…

    2025年12月23日
    000
  • Windows WSL2中Linux环境运行HTML+CSS开发服务器

    在WSL2中配置Linux环境进行HTML+CSS开发,首先启用WSL2并安装Ubuntu等发行版,运行wsl –install后重启并设置用户;接着更新系统包sudo apt update && sudo apt upgrade;推荐使用Python3内置服务器,在项目…

    2025年12月23日
    000
  • Linux用stylelint实时校验CSS是否符合HTML规范

    Stylelint用于校验CSS书写规范,可通过配置文件和编辑器插件在Linux中实现实时检查,并结合chokidar监听文件变化,确保CSS代码质量并与HTML协同工作。 Stylelint 是一个强大的 CSS 代码检查工具,但它主要用于校验 CSS 的书写规范(如格式、可维护性、错误预防等),…

    2025年12月23日
    000
  • Windows用Prettier同时格式化HTML和CSS代码

    答案:在Windows中使用Prettier格式化HTML和CSS需先安装Node.js,再通过npm安装Prettier,可全局或项目本地安装,推荐配合VS Code插件实现保存自动格式化,注意文件扩展名正确以确保语言识别。 在 Windows 系统中使用 Prettier 格式化 HTML 和 …

    2025年12月23日
    000
  • 如何在Atom中集成HTML预处理器Sass的详细教程

    首先安装Node.js和Dart Sass,再在Atom中安装atom-sass等插件,配置文件结构与编译规则,通过插件或命令行监听实现.scss文件自动编译为CSS,并在HTML中引入生成的CSS文件,从而提升开发效率。 要在Atom中集成Sass预处理器,让HTML开发更高效,关键在于安装合适的…

    2025年12月23日
    000
  • Linux Ubuntu用BrowserSync同步HTML与CSS多设备

    首先安装Node.js和npm,再全局安装BrowserSync,进入项目目录启动服务器并监听HTML与CSS文件,通过局域网IP在多设备访问,修改代码后页面自动同步刷新,支持CSS热替换,需确保设备同Wi-Fi且端口开放。 要在Linux Ubuntu系统中使用BrowserSync实现HTML与…

    2025年12月23日
    000
  • nodejs如何添加html_Node.js服务端HTML渲染与响应方法

    Node.js中返回HTML可通过原生HTTP模块直接发送字符串或使用模板引擎动态渲染。直接返回时需设置Content-Type为text/html并用res.end()发送HTML内容;对于动态数据,可结合EJS等模板引擎读取模板文件并渲染数据后返回;更推荐在中大型项目中使用Express框架,配…

    2025年12月23日
    000
  • termux如何运行html_Termux终端中HTML文件运行与预览方法

    推荐使用Python启动本地服务器预览HTML文件:进入项目目录后运行python -m http.server 8000,再通过手机浏览器访问http://localhost:8000即可查看页面效果。 在Termux中运行和预览HTML文件,虽然不能像桌面浏览器那样直接双击打开,但通过简单的工具…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信