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

但我不知道该怎么做.

我知道要在很高的层次上实现这一目标

>用户来到我的网站并点击注册/日志
>选择当时想要使用的提供商(谷歌,脸书等).我只想支持外部提供商(即我不想处理用户名/ pwds)
>用户将其发送到站点的经过身份验证的部分
>用户通过某种令牌点击数据通过ajax发送到webapi的“添加课程”,以证明他们可以访问这些方法.

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

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

有没有一些简单的例子如何实现这一目标？

最佳答案

1. Reactjs I guess is handling the authentication part? then once they been authenticated it would have to be saved in my db via webapi so it knows about this new user

最好在这里使用一些第三方auth库,比如PassportJS使用Passport-Facebook这样的策略为你做验证.这将在验证时从Facebook给你一个Oauth访问令牌.您现在可以在cookie(或localStorage)中保存此令牌,请查看security considerations.

你应该把它存放在数据库中吗？ Here are some arguments about it.

1. Reactjs would have to block users from going to secure pages till they are authenticated

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

1. Web api would have to generate a token for the user for that session so they can access the web api(I want to stop people from consuming my api).

这可以通过使用JSON Web Tokens轻松实现.请注意,您必须在本地客户端存储JWT,与FB-Google oauth令牌一起存储(或者您可以通过将它们存储在DB中来将其转换为单个API？一个设计选择,我宁愿单独存储它们,省去了很多麻烦).