如何使HTML身份验证表单和JSON Web令牌在Ionic / Angular中一起通信

如何解决如何使HTML身份验证表单和JSON Web令牌在Ionic / Angular中一起通信

我正在开发离子应用程序。
一方面，我有一个auth基本表单，人们可以在其中填写用户名和密码。另一方面，我想使用JSON Web令牌和Node JS进行身份验证。
工作流程就是这样：用户填写凭据后，便会发送POST请求。如果这些凭据正确，则用户可以访问该应用程序并获得访问令牌作为响应。

问题是我对所有这些概念有些迷茫。我建立了一个表单，并通过POST请求发送了信息。我设法用Node JS创建了一些API，没关系。我也看到了如何构建经过身份验证的网络服务（例如：https://github.com/jkasun/stack-abuse-express-jwt/blob/master/auth.js）。
但是我具体不理解html表单和授权检查部分之间的链接。.
更清楚地说，如何使html部分和Node JS脚本一起通信？

在发布该问题之前，我进行了许多研究，并发现了许多有关构建经过身份验证的API的内容。但是，关于如何使其与客户部分进行沟通（我的意思是表格）的建议很少，这是我必须要做的。
如果有人对此有任何资源（文档，Github示例..），我将不胜感激。但是如果有人试图让我理解这些概念，我也将非常高兴。我想我必须提高所有这些知识，以便可以测试一些POC。

非常感谢！

解决方法

JWT的一般流程：

1-使用策略进行身份验证（您已完成）

2-随同传递一个accessToken（您已完成）

3-客户端必须存储此accessToken（LocalStorage是最好的位置，而不是cookie：它们容易受到csrf攻击）

4-在将要发送到保护区（应该对用户进行身份验证和授权）的每个请求上，确保将其随同发送给accessToken，您可以将其放在Authorization标头（自定义标头）上，直接在请求正文中...基本上，只需确保将其正确发送即可。

5-在接收客户端请求的服务器上，您需要验证令牌（通过检查accessToken的签名来验证令牌）。

6-如果他被授权，那么，如果没有，则发回HTTP未经授权错误。

这是我在标头+护照js-jwt上使用accessToken的实现：

客户代码

要存储令牌：

localStorage.setItem('accessToken',myAccessToken);

发送：

const myAccessToken = localStorage.getItem('accessToken');

{
  headers: {'Authorization',`Bearer ${myAccessToken}`}
}

服务器代码

1-配置护照

passport.use('jwt',new JwtStrategy({
  jwtFromRequest: jwtPassport.ExtractJwt.fromAuthHeaderAsBearerToken(),secretOrKey: myAccessTokenSecret,passReqToCallback: true
},(req,payload,done: (err?,user?) => void): void {
User
  .findOne({where: {id: req.params.id}})
  .then((user: User) => {

    if (!user) {
      return done(new Error(`No user found with id: ${req.params.id}`),null);
    }

    return done(null,user);
  })
  .catch((e: Error) => done(e,null));
}));

注意回调：如果调用了回调，则表示护照已经成功验证了令牌（有效）。在我的示例中，我获取了数据库中的用户详细信息，这是将要返回的用户，并将其放入传递给以下控制器的req.user对象中：

2-最后，控制器路由（保护区）：

.get('/users/:id',passport.authenticate('jwt'),res,next) => {
  // do stuff in protected area.
}

就是这样。如果需要更高的安全性，请检查refreshTokens实施。

我之所以使用护照是因为我发现它与我的情况有关，但是您可以使用jsonwebtoken并调用其“验证”功能来编写自己的处理程序。

您可以在此处找到有关护照轻型卡车策略的文档=> http://www.passportjs.org/packages/passport-jwt/