精通 MEAN 使用 OAuth 和 Passport 管理身份验证（2）

look_w

介绍 OAuth 和 Passport

“您不再需要编写算法来执行强密码，或者处理忘记密码的问题，或者强制用户定期更改其密码。”

OAuth 是一种分布式身份验证和授权的开放标准。它于 2006 年由 Twitter 和业务合作伙伴 Ma.gnolia                开发，用来方便地创建一些桌面小部件，这些小部件可以显示来自已身份验证服务的信息。从那时起，数百家大型网站采用了 OAuth，这些网站包括                Google、Facebook、Twitter、GitHub、LinkedIn 等。（参见  。）
  是一个为 Node.js 编写的 OAuth                库。具体地讲，它是一个中间件，用于与 Express 应用程序无缝地合并在一起。有 140 多个 Passport                插件（称为策略）可用，它们是为每个 OAuth 提供商而量身订造。
如果在文本编辑器中打开 UGLI 应用程序的 package.json 文件（如清单 1 所示），您可看到 4 个主要服务商的 Passport                策略（Facebook、Twitter、LinkedIn 和 Google），以及一个用于直接在 MongoDB 中存储凭据的本地策略。
清单 1. package.json 中的 Passport                    策略

1 2 3 4 5 6 7 8

"dependencies": {     "passport": "~0.2.0",     "passport-local": "~1.0.0",     "passport-facebook": "~1.0.2",     "passport-twitter": "~1.0.2",     "passport-linkedin": "~0.1.3",     "passport-google-oauth": "~0.1.5" }

使用现有的示例作为指南，您将添加第六个策略来整合 Meetup.com，作为 UGLI 的 OAuth 提供商。
安装 Meetup.com Passport 策略如果访问  ，您将看到 Meetup.com 提供了 OAuth 服务。在网上快速搜索                meetup.com passport.js strategy 就会得到您寻找的库的链接： 。
键入 npm install passport-meetup --save 来将该库下载到 node_modules，并更新                package.json 中的依赖关系代码块。
这是最简单的部分。有了该策略，下一步是将它合并到注册和登录阶段中。

将一个 Meetup.com 链接添加到注册和登录阶段中在文本编辑器中打开 public/modules/users/views/signup.client.view.html。在该文件顶部，您可看到各种                OAuth 提供商的链接（如清单 2 所示）。
清单 2. public/modules/users/views/signup.client.view.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<h3 class="col-md-12 text-center">Sign up using your social accounts</h3> <div class="col-md-12 text-center">     <a href="/auth/facebook" class="undecorated-link">         <img src="/modules/users/img/buttons/facebook.png">     </a>     <a href="/auth/twitter" class="undecorated-link">         <img src="/modules/users/img/buttons/twitter.png">     </a>     <a href="/auth/google" class="undecorated-link">         <img src="/modules/users/img/buttons/google.png">     </a>     <a href="/auth/linkedin" class="undecorated-link">         <img src="/modules/users/img/buttons/linkedin.png">     </a> </div>

将现有的链接替换为一个指向要创建的 /auth/meetup 路由，并显示为 Meetup.com 图标的链接（如清单 3 所示）。
清单 3. auth/meetup                的链接

1 2 3 4 5 6

<h3 class="col-md-12 text-center">Sign up using your Meetup.com account</h3> <div class="col-md-12 text-center">     <a href="/auth/meetup" class="undecorated-link">         <img src="/modules/users/img/buttons/meetup.png">     </a> </div>

访问   页面，将这个 128x128 像素的图像保存到                public/modules/users/img/buttons/ 中，其他社交媒体图标也存储在这里。
现在，注册页面存根的创建已完成，在文本编辑器中打开                public/modules/users/views/signin.client.view.html，对注册页面采取的相同方式来调整它（如清单 4                所示）。
清单 4. public/modules/users/views/signin.client.view.html

1 2 3 4 5 6

<h3 class="col-md-12 text-center">Sign in using your Meetup.com account</h3> <div class="col-md-12 text-center">     <a href="/auth/meetup" class="undecorated-link">         <img src="/modules/users/img/buttons/meetup.png">     </a>     </div>

如果一切按计划进行，那么您的新注册页面将类似于图 2。当然，如果没有路由，单击该链接时就会获得一个404 Page Not Found                错误。接下来修复此错误。
图 2. 新的 UGLI 注册页面