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

Posted 2023-03-08

【中文标题】使用 React Native 和 API 后端进行身份验证

【英文标题】：Authentication with React Native and API backend

【发布时间】：2016-08-24 21:43:18

【问题描述】：

我正试图用一个 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 发送什么以确保他们经过身份验证并可以访问特定路由？

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

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

【问题讨论】：

这个例子可能会有所帮助。它演示了使用 Express/Passport.js 和 React Native 来执行身份验证操作。 >react-native-login 是一个示例 React Native 项目，展示了如何使用 WebView 和 react-native-cookies 登录到您现有的后端。 >链接：github.com/ryanmcdermott/react-native-login

【参考方案1】：

这个问题有很多，以至于它不能全部放在一个 SO 答案中，但这里有一些提示和一般大纲，应该大致适合您想要完成的任务。

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 标头，在您的 base64 编码访问令牌（您最初收到的授权请求的响应）前面加上 Bearer 来做到这一点。所以标题看起来像这样：

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJh...

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

如何在 RN 中查看隐式流

以下是 React Native 中用于 OAuth 2 隐式流的一般流程，您将使用该流程用于社交身份提供者：

用户在 React Native UI 上点击您的社交登录按钮之一 响应按钮的代码将为这些提供者构建一个请求 URL，具体取决于每个提供者的需求（因为略有不同）。 使用 RN 中的 Linking API，您将在设备上的浏览器中打开该 URL，该 URL 将用户发送到社交服务提供商，让他们进行登录/授权。 完成后，社交服务提供商会将用户重定向到您提供的 URL。在移动设备上，您将使用自己的自定义 URL 方案将用户从 Web 视图移动到您的应用程序。此方案是您在应用程序中注册的内容，例如 my-awesome-app://，而您传递给社交提供者的重定向 URL 可能类似于 my-awesome-app://auth_complete/。有关如何配置这些 URL 方案和深度链接的信息，请参阅 the Linking API docs。 在该新 URL 方案/深层链接的处理程序中，您将获得作为 URL 一部分传递的令牌。手动或使用库，从 URL 中解析出令牌并将它们存储在您的应用程序中。此时，您可以开始将它们作为 JWT 进行检查，并在 HTTP 标头中传递它们以供 API 访问。

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

您可以为自己的帐户选择电子邮件/密码组合，要么坚持使用隐式流程，要么切换到资源所有者密码授予流程如果您的 API 和应用程序受到每个人的信任其他，这意味着您正在制作应用程序和 API。我更喜欢移动应用程序上的 ROPG 流程，因为用户体验要好得多——您不必打开单独的 Web 视图，只需让他们直接在应用程序的 UI 元素中输入他们的电子邮件和密码。话虽如此，这就是它的样子：

用户点击电子邮件/密码组合登录按钮，RN 以包含用于电子邮件和密码的 TextInputs 的 UI 进行响应 向您的授权服务器（可能是您的 API，也可能是单独的服务器）构建一个 POST 请求，其中包括正确制作的 URL 和传递电子邮件和密码的正文详细信息。触发此请求。 身份验证服务器将使用响应正文中的关联令牌进行响应。此时，您可以执行之前在上述第 5 步中所做的相同操作，存储令牌以供以后在 API 请求中使用，并检查它们以获取相关用户信息。

如您所见，ROPG 更直接，但只应在高度信任的场景中使用。

在 API 上

在 API 方面，您检查 Authorization 标头中的令牌，如前所述，如果找到，则假定用户已通过身份验证。验证令牌和用户权限仍然是一种很好的安全实践。如果没有随请求发送的令牌，或者发送的令牌已过期，则拒绝该请求。

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

【讨论】：

嗨 Joshua，感谢您的回答，但我仍然感到困惑。我在我的 RN 应用程序中从 Twitter 获得了一个令牌（感谢这个库：github.com/GoldenOwlAsia/react-native-twitter-signin）我不需要在后端检查令牌吗？

@Lasharela 是的，如果您使用后端处理任何内容，您确实需要在后端验证它。 （这就是为什么在“使用令牌”部分中强调“验证”和“验证”的原因。）当您向后端发出请求并传递 JWT 时，后端会验证 JWT 是否已正确签名，然后可以使用JWT 要么向 Twitter 发出请求，要么做一些事情，比如使用“sub”声明在你的后端根据用户的 ID 做一些事情。您可以将 JWT 视为用户的证明，并通过将其传递给后端来使用它。