ReactJs + Webapi如何进行外部身份验证？

Question

我正在建立一个与asp.net web api 2进行通信的reactjs网站，以保存和检索数据。

但我不知道该怎么做。

我知道要在高层次上实现这一点，就像

1. 用户访问我的网站并点击注册/日志
2. 选择当时想要使用的提供商（谷歌，脸书等）。我只想支持外部提供商（即我不想要处理用户名/密码）
3. 用户将其发送到网站的经过身份验证的部分
4. 用户点击＆＃34;添加课程＆＃34;这些数据通过ajax发送到带有某种令牌的webapi，以证明他们可以访问这些方法。

我不确定如何实现我看到的这个问题

1. Reactjs我想是在处理身份验证部分？然后，一旦他们被认证，它将不得不通过webapi保存在我的数据库中，所以它知道这个新用户？
2. Reactjs必须阻止用户访问安全页面，直到他们通过身份验证
3. Web api必须为该会话的用户生成一个令牌，以便他们可以访问web api（我想阻止人们使用我的API）。

那里有一些简单的例子如何实现这个目标吗？

Answer 1

  

  
1. Reactjs我想是在处理身份验证部分？然后，一旦他们被认证，它将不得不通过webapi保存在我的数据库中，所以它知道这个新用户
  

最好使用像PassportJS这样的第三方授权库，使用Passport-Facebook等策略为您执行身份验证。这将在验证时从Facebook为您提供Oauth访问令牌。您现在可以在Cookie（或localStorage）中保存此令牌，请查看security considerations。

您应该将其存储在数据库中吗？ Here are some arguments about it

  

  
1. Reactjs必须阻止用户访问安全页面，直到他们通过身份验证
  

这可以通过检查它们是否具有有效令牌来完成。

  

  
1. Web api必须为该会话的用户生成一个令牌，以便他们可以访问web api（我想阻止人们使用我的API）。
  

使用JSON Web Tokens可以轻松实现。请注意，您必须将JWT本地存储在客户端，与FB-Google oauth令牌一起存储（或者您可以通过将它们存储在数据库中将其放到单个API中。它是一个设计选择，我更愿意存储它们分开并节省了很多麻烦。）