使用React Native和API后端进行身份验证

Question

我正试图用一个React Native应用程序和一个单独的NodeJS/Express API后端来围绕oauth.我理解https://github.com/adamjmcgrath/react-native-simple-auth为React Native应用程序提供身份验证,http://passportjs.org/为NodeJS后端提供身份验证.我不确定如何连接这两个用于身份验证以便登录和访问API.

我希望用户通过电子邮件和密码或通过Facebook/Twitter/Google登录React Native应用程序.登录应用程序后,我应该向API发送什么以确保它们经过身份验证并可以访问特定路由？

以下是登录和查看登录用户设置的示例流程:

1. 用户通过电子邮件/密码或Facebook/Twitter/Google登录React Native应用程序.
2. 用户已通过身份验证
3. 应用程序向GET/api/settings发出请求
4. API验证用户是否经过身份验证并返回该用户的设置或API验证用户未经过身份验证并返回403.

Answer 1

这个问题有很多,以至于它不能完全适合单一的答案,但这里有一些提示和一般概要,应该大致适合你想要完成的事情.

OAuth2授权

根据它的声音,您有兴趣使用OAuth 2提供社交登录授权,并希望通过电子邮件和密码进行第一方身份验证.对于社交登录,您最终将使用OAuth 2隐式流来检索访问令牌,这是一种广泛认可的模式.由于您还希望使用电子邮件和密码对用户进行身份验证,因此您可能希望熟悉OpenID Connect,它是OAuth 2的扩展,除了授权之外还明确支持身份验证.

在任何一种情况下,一旦您的用户提交了电子邮件/密码组合或通过社交身份提供商授予了权限,您将收到访问令牌和(可选)ID令牌.令牌,可能是JWT(JSON Web令牌,请参阅jwt.io)将作为base64编码的字符串出现,您可以解码以检查JWT的结果,其中包括用户的ID和其他详细信息,如电子邮件地址,姓名等

有关不同类型流的更多信息,请参阅数字海洋的这一优秀概述.

使用令牌进行API身份验证

现在您已拥有访问令牌,您可以将其与所有请求一起传递给API,以证明您已经过适当的身份验证.您可以通过传递HTTP标Authorization头中的访问令牌(特别是标头)来实现此目的,在您的base64编码访问令牌(您最初收到的响应授权请求的内容)前面添加Bearer.所以标题看起来像这样:

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJh...

在您的API方面,您将收到该令牌,对其进行解码,然后验证其中的ID和声明.作为sub属性中令牌的一部分传递将是主题或发出请求的用户的ID.这就是您如何使用相应的用户权限,权限等识别访问权限并开始在API端执行操作的方式.在API端接收访问令牌后验证访问令牌也很重要,以确保它不是欺骗或手工制作.

如何在RN中查看隐式流

以下是React Native for OAuth 2 Implicit流程中的一般过程,您将使用它来为社交身份提供者:

1. 用户点击React Native UI上的一个社交登录按钮
2. 响应按钮的代码将根据每个需要构建一个请求URL(因为它略有不同).
3. 使用LinkingRN中的API,您将在设备上的浏览器中打开该URL,该用户将用户发送给社交提供商,以便他们进行登录/授权跳舞.
4. 完成后,社交提供商会将用户重定向到您提供的URL.在移动设备上,您将使用自己的自定义URL方案将用户从Web视图移动到您的应用程序.此方案是您注册为应用程序的一部分,例如my-awesome-app://,您传递给社交提供商的重定向URL可能如下所示my-awesome-app://auth_complete/.有关如何配置这些URL方案和深层链接,请参阅链接API文档.
5. 在新URL方案/深层链接的处理程序中,您将获得作为URL的一部分传递的标记.无论是手动还是使用库,都可以从URL中解析出令牌并将其存储在您的应用中.此时您可以开始将它们作为JWT进行检查,并在HTTP标头中传递它们以进行API访问.

如何在RN中查找资源所有者密码授予流程

如果您的API和应用程序彼此信任,您可以选择使用您的电子邮件/密码组合来保存您自己的帐户,或者使用隐式流程,或者切换到资源所有者密码授予流程,这意味着您同时创建了这两个应用程序和API.我更喜欢移动应用程序中的ROPG流程,因为UX更好 - 您不必打开单独的Web视图,只需让他们直接在应用程序中将他们的电子邮件和密码输入到UI元素中.所以说,这就是它的样子:

1. 用户点击电子邮件/密码组合登录按钮,RN使用包含电子邮件和密码的TextInputs的UI进行响应
2. 向您的授权服务器(可能是您的API,或可能是单独的服务器)构建POST请求,其中包含通过电子邮件和密码传递的正确制作的URL和正文详细信息.解雇此请求.
3. auth服务器将使用响应正文中的关联令牌进行响应.此时,您可以执行之前在上面步骤5中执行的相同操作,您可以在其中存储令牌以供以后在API请求中使用,并检查它们以获取相关的用户信息.

如您所见,ROPG更直接,但只应在高度可信的情况下使用.

在API

在API端,您检查Authorization标头中的标记,并且如前所述,如果找到,则假定用户已经过身份验证.验证令牌和用户权限仍然是一种很好的安全措施.如果没有随请求一起发送令牌,或者发送的令牌已过期,则拒绝该请求.

希望有所帮助!肯定有很多,但这提供了一个大致的轮廓.