1 回答

• 76

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

  OAuth2授权

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

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

  有关不同类型流的更多信息，请参阅this excellent overview on Digital Ocean .

  使用令牌进行API身份验证

  现在您已拥有访问令牌，您可以将其与所有请求一起传递给API，以证明您已经过适当的身份验证 . 您可以通过传递HTTP标头中的访问令牌，特别是 Authorization 标头，使用 Bearer 为您的base64编码访问令牌（您最初收到的响应授权请求的前缀）添加前缀 . 所以 Headers 看起来像这样：

  Authorization: Bearer eyJ0eXAiOiJKV1QiLCJh...

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

  它如何在RN中查看隐式流

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

  • 用户点击React Native UI上的一个社交登录按钮

  • 响应按钮的代码将构建一个请求URL给这些提供者，具体取决于每个人想要的（因为它略有不同） .

  • 使用RN中的 Linking API，您将在设备上的浏览器中打开该URL，该用户将用户发送给社交提供商，以便他们进行登录/授权舞蹈 .

  • 完成后，社交提供商会将用户重定向到您提供的URL . 在移动设备上，您将使用自己的自定义URL方案将用户从Web视图移动到您的应用程序 . 此方案是您注册为应用程序的一部分，例如 my-awesome-app:// ，您传递给社交提供商的重定向URL可能看起来像 my-awesome-app://auth_complete/ . 有关如何配置这些URL方案和深层链接，请参阅the Linking API docs .

  • 在新URL方案/深层链接的处理程序中，此时您可以开始检查它们作为JWT，并在HTTP标头中传递它们以进行API访问 .

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

  如果您的API和应用程序彼此信任，您可以选择使用您的电子邮件/密码组合来保存您自己的帐户，如果您的API和应用程序彼此信任，则意味着您同时创建了这两个应用程序和API . 我更喜欢可能的移动应用程序上的ROPG流程，因为用户体验更好 - 你看起来像它的样子：

  • 用户点击电子邮件/密码组合登录按钮，RN使用包含电子邮件和密码的TextInputs的UI进行响应

  • 向您的授权服务器（可能是您的API，或可能是单独的服务器）构建POST请求，其中包含通过电子邮件和密码传递的正确制作的URL和正文详细信息 . 解雇此请求 .

  • auth服务器将使用响应正文中的关联令牌进行响应 . 此时，您可以执行之前在上面步骤5中执行的相同操作，您可以在其中存储令牌以供以后在API请求中使用，并检查它们以获取相关的用户信息 .

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

  在API

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

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

  回复于 2024-04-26T05:47:47+08:00