ReactJs + Webapi 怎么做外部认证？

Question

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

但我不知道该怎么做。

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

1. 用户访问我的网站并点击注册/登录
2. 选择然后要使用的提供商（google、facebook 等）。我只想支持外部提供商（即我不想处理用户名/密码）
3. 用户将其发送到网站的经过身份验证的部分
4. 用户单击“添加课程”，数据通过 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 令牌一起存储在本地客户端（或者您可以通过将它们存储在 DB 中来将其降级为单个 API？。这是一种设计选择，我更愿意存储它们分开，省去了很多麻烦）。