关键词：

【中文标题】使用 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 视为用户的证明，并通过将其传递给后端来使用它。

api 请求在 react-native 中不起作用

...native【发布时间】：2021-08-1202:15:08【问题描述】：我正在使用react-native当我虚拟运行模拟器时，后端路由器很好地请求了api。但是，当我在我的Android设备上实际测试它时，api请求并没有到达后端。我的前端端口号是8081，后端是3... 查看详情

使用 React Native 前端和 Java Spring 后端创建推送通知系统？

】使用ReactNative前端和JavaSpring后端创建推送通知系统？【英文标题】：CreatingapushnotificationsystemwithaReactNativefrontendandaJavaSpringbackend?【发布时间】：2019-02-2302:19:19【问题描述】：目前正在构建一个移动应用程序，理想情况下该应用... 查看详情

React Native 和 Firestore

...项目决策方面需要一些帮助。我正在为某人和我正在考虑使用firebase的数据库构建一个reactnative应用程序，但是当我浏览文档时，我意识到firestore提供后端服务，这是否意味着我不必为后端。我原本打算使用Django，但如果f 查看详情

如何使用 java 后端在 react-native 中实现消息传递服务？

】如何使用java后端在react-native中实现消息传递服务？【英文标题】：Howtoimplementamessagingserviceinreact-nativewithajavabackend?【发布时间】：2018-01-2320:52:12【问题描述】：我正在创建一个应用，前端使用React-Native，后端使用Java，数据库... 查看详情

Jhipster Spring 后端 - 社交登录和 React Native 前端

】JhipsterSpring后端-社交登录和ReactNative前端【英文标题】：JhipsterSpringbackend-Sociallogin&ReactNativefrontend【发布时间】：2019-08-1608:00:11【问题描述】：我创建了Spring作为后端并启用了社交登录以进行google身份验证。/signin/google是带... 查看详情

带有 Laravel 后端和 React Native 应用程序的 Facebook 和 JWT Auth

...ejs前端和laravel后端的网站。登录的唯一方式是通过Facebook使用Socialite登录一切正常。现在我正在构建一些ReactNat 查看详情

React Native 的后端堆栈

】ReactNative的后端堆栈【英文标题】：backendstackforReactnative【发布时间】：2019-04-2004:21:33【问题描述】：考虑在ReactNative中创建一个APP，执行以下操作：带有提要、图片、cmets、喜欢、个人资料的最小社交媒体等在地图上重新渲染... 查看详情

使用 React Native 和 useEffect 获取

】使用ReactNative和useEffect获取【英文标题】：FetchusingReactNativeanduseEffect【发布时间】：2021-03-2323:53:36【问题描述】：尝试调用API以获取一些数据并将其存储在我的组件状态中。我使用useEffect和[]依赖项只触发一次。setEntries行导致E... 查看详情

如何在 React Native 中使用 Animated API 同时隐藏 Header 和 Footer

】如何在ReactNative中使用AnimatedAPI同时隐藏Header和Footer【英文标题】：HowtohideHeaderandFooteratthesametimewiththeAnimatedAPIinReactNative【发布时间】：2021-03-2201:07:35【问题描述】：我只是想知道如何以相同的动画值同时隐藏页眉和页脚？因为... 查看详情

我在 react-native 和 redux 中处理 API 调用的地方

...dredux【发布时间】：2016-11-0811:04:40【问题描述】：我正在使用react-native+redux+immutable构建一个Android应用程序我的应用是这样构建的/src-/components-/actions(whereIhaveactiontypesan 查看详情

使用 React Native 的 Auth0 身份验证 API

】使用ReactNative的Auth0身份验证API【英文标题】：Auth0AuthenticationAPIwithReactNative【发布时间】：2018-09-2201:19:24【问题描述】：我目前正在开发一个响应原生的移动应用程序，并使用Auth0进行用户管理。我使用的是我自己的登录、注... 查看详情

React-Native，条纹卡元素未显示实时 API 密钥

...2021-02-1810:39:31【问题描述】：在我的react-native项目中，我使用了react-native-webview和stripejs(https://js.stripe.com/v3)我正在使用条纹js创建卡片元素来收集 查看详情

Fastlane 和 React-Native：Google Api 错误：无效请求 - 未配置访问

...布时间】：2020-10-0310:51:47【问题描述】：在运行此程序后使用Fastlane和React-Native时导致以下错误的原因：fastlanebeta[22:36:3 查看详情

如何使用 api 获取 SQL 数据并在 react-native-svg 图表中使用该数据？我有一个我想用来获取数据和显示的 API

】如何使用api获取SQL数据并在react-native-svg图表中使用该数据？我有一个我想用来获取数据和显示的API【英文标题】：HowtofetchSQLdatausingapiandusethatdatainreact-native-svgcharts?IamhavinganAPIthatIwanttousetofetchdataanddisplay【发布时间】：2021-04-2116... 查看详情

如何使用 Stripe (stripe.js) 和 react-native

】如何使用Stripe(stripe.js)和react-native【英文标题】：howtouseStripe(stripe.js)andreact-native【发布时间】：2016-03-3118:03:54【问题描述】：我正在尝试找到一种将条带与react-native结合使用的好方法。最好是不涉及将信用卡详细信息发送到我... 查看详情

如何在不影响实时功能的情况下为 React 和 React-native 托管通用的 Firebase 后端代码？

】如何在不影响实时功能的情况下为React和React-native托管通用的Firebase后端代码？【英文标题】：Howtohostacommonback-endcodeofFirebaseforReactandReact-nativewithoutcompromisingthereal-timefeature?【发布时间】：2016-06-0611:06:29【问题描述】：我们（我... 查看详情

调用 Fetch API 后没有得到任何东西 - React Native

...6:50:23【问题描述】：我正在创建一个ReactNative，在其中我使用Fetch将表单的数据发送到后端Node.js，一切正常，但在fetchapi后我无法执行任何操作，即使console.log没有运行。Re 查看详情

React Native Android 不包括一些内置组件和 API

...一个奇怪的问题。假设我正在尝试将ToastAndroidAPI与RN一起使用。根据文档，它可以像这样包含：\'usestrict\';varReact=require(\'r 查看详情