设置基本OAuth登录

FeatusJS的Auk版本包括一个强大的新的 认证 建立在 PassportJS 之上.现在, 这使Feathers社区可以访问Passport社区中的数百种身份验证策略.由于许多Passport策略都是针对OAuth的, 因此我们创建了两个auth插件 OAuth1 身份验证 和 OAuth2身份验证. 这些新插件使用Passport策略允许OAuth登录到您的应用程序.

向应用添加OAuth身份验证是快速允许用户登录的好方法.它允许用户使用现有的Internet帐户和其他服务登录您的应用程序.有很多好的理由,它通常不需要电子邮件地址验证舞蹈.对于非常常见的OAuth提供商,例如GitHub,Google和Facebook,这种情况更有可能发生.

简化登录几乎总是一个好主意,但对于许多开发人员而言,实施OAuth可能很困难.我们来看看它的工作原理.之后,我们将看到新的 认证 服务器插件如何让它易于启动和运行.

OAuth的工作原理

您可以使用几种不同的方法来实施OAuth.以下是 feathers-authentication-oauth1 和 feathers-authentication-oauth2 插件使用的流程的基本步骤.

1. 您向OAuth提供商注册您的应用程序.这包括为提供商提供回调URL(稍后将详细介绍).提供商将为您提供应用标识符和应用密钥.秘密基本上是您的应用程序的特殊密码.

2. 您将用户的浏览器定向到OAuth提供商的站点, 在查询字符串中提供应用程序标识符.

3. 内容提供商使用应用标识符来检索有关您的应用的信息.然后使用登录表单将该信息呈现给用户.用户可以授予或拒绝访问您的应用程序.

4. 做出决定后, 提供商会将用户的浏览器重定向到您在第一步中设置的回调URL.它包含查询字符串中的短期授权代码.

5. 您的服务器向OAuth提供商的服务器发送请求.它包括授权代码和秘密.如果授权代码和机密有效,则提供程序会向您的服务器返回OAuth访问令牌.还可以发送一些用户数据.

6. 您的服务器可以将用户信息保存到 /users 表中.它还可以使用此访问令牌向提供者的API发出请求.也可以将相同的信息发送到浏览器以供使用.

7. 有了Feathers, 还有一个额外的步骤.登录后, JWT访问令牌存储在cookie中并发送到浏览器.客户端使用JWT在后续请求中对服务器进行身份验证.

用Feathers实现OAuth

Feathers CLI允许您使用OAuth轻松设置新应用程序.以下是生成应用程序的步骤:

1. npm install -g @feathersjs/cli

2. mkdir feathers-demo-oauth; cd feathers-demo-oauth或您喜欢的文件夹名称.

3. feathers generate app 使用默认提示.

4. Feathers 生成认证

   • 当提示提供者时, 选择 Facebook, GitHub, or Google. 本指南将说明如何使用GitHub.

   • 选择其余提示的默认值.

设置OAuth提供程序

要设置提供程序, 请使用每个提供程序的网站.以下是常见提供商的链接:

• Facebook

• GitHub

• Google

设置好应用后, OAuth提供商将为您提供 Client ID 和 Client Secret.

配置应用程序

一旦你有你的应用程序的 Client ID 和 Client Secret,就可以设置应用程序与提供商进行通信了.打开 default.json 配置文件.生成器为您选择的提供程序的配置添加了一个密钥.下面的配置示例有一个 github 配置.复制并用 clientID 和 clientSecret 替换占位符.

config/default.json

{
  "host": "localhost",
  "port": 3030,
  "public": "../public/",
  "paginate": {
    "default": 10,
    "max": 50
  },
  "authentication": {
    "secret": "cc71e4f97a80c878491197399aabf74e9c0b115c9f8071e75b306c99c891a54b7171852f8c5508e1fe4dcfaedbb603178b0935261928592e487e628f2f669f3a752f2beb3661b29d521b36c8a39e1be6823c0362df5ef1e212d7f2daae789df1065293b98ec9b43309ffe24dba3a2ec2362c5ce5c9155c6438ec380bc7c56d6a169988c0f6754077c5129e8a0ee5fd85b2182d87f84312387e1bbefebe49ad1bf2dcf783e7d8cbee40272b141358b8e23150eee5ea8fc04b2a0f3d824e7fa9d46c025c619c3281af91b7a19fd760bccedae379b735c85024b25a9c91749935b2f29d5b69b2c1ff29368b4aa9cf426d9960302e5e7b903d53e18ccbe2325cf3b6",
    "strategies": [
      "jwt"
    ],
    "path": "/authentication",
    "service": "users",
    "jwt": {
      "header": {
        "typ": "access"
      },
      "audience": "https://yourdomain.com",
      "subject": "anonymous",
      "issuer": "feathers",
      "algorithm": "HS256",
      "expiresIn": "1d"
    },
    "github": {
      "clientID": "your github client id", // Replace this with your app's Client ID
      "clientSecret": "your github client secret", // Replace this with your app's Client Secret
      "callbackURL": "/"
    },
    "cookie": {
      "enabled": true,
      "name": "feathers-jwt",
      "httpOnly": false,
      "secure": false
    }
  },
  "nedb": "../data"
}

使用OAuth测试登录

您的应用已准备好进行OAuth登录.我们就这么简单了！我们来试试吧.打开文件 public/index.html 并滚动到底部.在 h2 下添加以下代码:

<p class="center-text"><br/>
  <a href="/auth/github">Login With GitHub</a>
</p>

现在将以下代码添加到同一页面.第一个脚本标记从CDN加载Feathers Client. 第二个脚本加载Socket.io. 第三个脚本创建一个Feathers Client实例, 并尝试在页面加载时使用JWT策略进行身份验证. 身份验证客户端插件配置了 cookie 值为 feathers-jwt.

注解

此代码从CDN加载 feathers-client 包. 这 不是 大多数应用程序的推荐用法, 但是出于演示目的而有用.我们建议使用如下文所述的捆绑器 Feathers 客户端.

<script src="//unpkg.com/feathers-client@2.0.0/dist/feathers.js"></script>
<script src="//unpkg.com/socket.io-client@1.7.3/dist/socket.io.js"></script>
<script>
  // Socket.io is exposed as the `io` global.
  var socket = io('http://localhost:3030', {transports: ['websocket']});
  // feathers-client is exposed as the `feathers` global.
  var feathersClient = feathers()
    .configure(feathers.hooks())
    .configure(feathers.socketio(socket))
    .configure(feathers.authentication({
      cookie: 'feathers-jwt'
    }));

  feathersClient.authenticate()
    .then(response => {
      console.info('Feathers Client has Authenticated with the JWT access token!');
      console.log(response);
    })
    .catch(error => {
      console.info('We have not logged in with OAuth, yet.  This means there\'s no cookie storing the accessToken.  As a result, feathersClient.authenticate() failed.');
      console.log(error);
    });
</script>

现在, 运行服务器, 打开 http://localhost:3030.在单击 “Login with GitHub” 链接之前, 请打开控制台.如果刷新, 您将在catch块中看到该消息.由于我们尚未登录, 因此我们没有存储的JWT访问令牌.现在, 单击 Login with GitHub 按钮.假设您没有使用此应用程序登录Github, 之前, 您将看到GitHub登录页面.登录GitHub后, 您将被重定向回 http://localhost:3030.现在, 如果您查看控制台, 您应该会看到成功消息.

刚刚发生了什么？当你点击该链接时, 它打开了 /auth/github 链接, 这只是用你的 Client ID 重定向到GitHub的快捷方式.我们之前描述的整个OAuth流程都已发生.浏览器从服务器收到一个 feathers-jwt cookie.最后, 我们在最后一步中添加的脚本使用 feathers-authentication-client 来使用从服务器返回的JWT进行身份验证.在很短的时间内发生了很多步骤.最好的消息是您使用OAuth进行了身份验证.

包起来

您现在已经了解了如何使用新的Feathers Authentication插件大大简化OAuth登录.在PassportJS之上构建插件可以提供很大的灵活性.您现在可以构建几乎任何可以想象的身份验证体验.在本指南的最后部分,您可以对Feathers客户端进行身份验证.希望这会让您开始将OAuth集成到您的应用程序中.