构建一个反应本机应用程序并使用OAuth 2.0进行身份验证

使用Okta和OpenID Connect (OIDC)轻松集成React Native应用的身份验证功能，无需自行构建。OIDC允许您直接对Okta API进行身份验证，本文将演示如何在React Native应用中实现此功能。我们将学习如何使用AppAuth库通过OIDC重定向登录用户。

React Native是一个高效的框架。与Ionic和其他混合移动框架不同，它允许您使用Web技术（React和JavaScript）构建原生移动应用。它不涉及浏览器或WebView，因此使用React Native开发移动应用类似于使用原生SDK，您将在模拟器或设备上进行所有测试。不像Ionic那样可以在浏览器中进行测试。这可以带来好处，因为您无需分别编写在浏览器和设备上运行的代码。

如果您查看Google Trends，您会发现React Native在原生开发方面的流行程度甚至超过了Android和iOS！

本文将指导您如何使用最新版本的React Native开发应用。在撰写本文时，最新版本为React 16.2.0和React Native 0.54.0。我们将创建一个新应用，添加AppAuth进行身份验证，使用Okta进行身份验证，并在iOS和Android上运行它。

AppAuth是一个原生应用客户端SDK，用于使用OAuth 2.0和OpenID Connect对最终用户进行身份验证和授权。它适用于iOS、macOS、Android和原生JS环境，实现了原生应用身份验证和授权的现代安全性和可用性最佳实践。

创建React Native应用

React有一个名为create-react-app的命令行工具（CLI），可用于创建新的React应用。React Native也有类似的工具，名为Create React Native App。在安装它之前，请确保已安装Node v6或更高版本。

安装create-react-native-app并创建一个名为okta-rn的新项目：

<code>npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start</code>

运行这些命令后，您的终端将提示您一些选项：

<code>...（省略终端输出，与原文相同）</code>

如果您使用的是Mac，请按i打开iOS模拟器。系统将提示您安装/打开Expo，然后呈现渲染后的App.js。

如果您使用的是Windows或Linux，建议尝试使用Android模拟器或您的Android设备（如果您有的话）。如果不起作用，请不要担心，稍后我们将介绍如何解决这个问题。

提示：您可以使用Microsoft的TypeScript React Native Starter在React Native应用中使用TypeScript而不是JavaScript。如果您决定采用这种方法，建议您在本教程完成后按照步骤转换您的应用。

React Native和OAuth 2.0

在本例中，我将使用React Native App Auth，这是一个由Formidable创建的库。我使用这个库的原因有三点：1）他们提供了一个很好的示例，我只需几分钟就能使其运行；2）它使用AppAuth（一个成熟的OAuth客户端实现）；3）我无法使其他任何方法运行。

• 我尝试过react-native-oauth，但发现它需要在添加新提供程序之前使用现有提供程序。我只想使用Okta作为提供程序。此外，其大量的问题和请求也发出警告信号。
• 我尝试过react-native-simple-auth，但在尝试使已弃用的Navigator组件与最新的React Native版本一起工作时遇到问题。
• 我尝试过这个React Native OAuth 2教程，但在重定向回我的应用时也遇到问题。

在Okta中创建原生应用

在将AppAuth添加到您的React Native应用之前，您需要一个要授权的应用。如果您还没有免费的Okta开发者帐户，请立即注册一个！

登录您的Okta开发者帐户，然后导航到Applications > Add Application。点击Native，然后点击Next。为应用命名（例如，React Native），选择Refresh Token作为授权类型，以及默认的Authorization Code。复制登录重定向URI（例如，com.oktapreview.dev-158606:/callback）并将其保存到某个位置。配置应用时需要此值。

点击Done，您应该在下一个屏幕上看到一个客户端ID。复制并保存此值。

添加React Native AppAuth进行身份验证

您需要“弹出”应用的原生配置，该配置通常由create-react-native-app隐藏。

<code>npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start</code>

当系统提示您回答问题时，请使用以下答案：

问题 答案

您希望如何从create-react-native-app弹出？ React Native 您的应用在用户的首页上应显示为何内容？ Okta RN 您的Android Studio和Xcode项目应命名为何内容？ OktaRN

要安装React Native的App Auth，请运行以下命令：

<code>npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start</code>

运行这些命令后，您必须配置原生iOS项目。为了方便起见，我已经复制了以下步骤。

iOS设置

React Native App Auth依赖于AppAuth-ios，因此您必须将其配置为依赖项。最简单的方法是使用CocoaPods。要安装CocoaPods，请运行以下命令：

<code>...（省略终端输出，与原文相同）</code>

在项目的ios目录中创建一个Podfile，该文件指定AppAuth-ios作为依赖项。确保OktaRN与运行npm run eject时指定的应用名称匹配。

<code>npm run eject</code>

然后从ios目录运行pod install。第一次运行可能需要一段时间，即使在快速连接的情况下也是如此。现在是喝咖啡或威士忌的好时机！?

通过从ios目录运行open OktaRN.xcworkspace在Xcode中打开您的项目。

如果您打算支持iOS 10及更早版本，则需要在ios/OktaRN/Info.plist中定义支持的重定向URL方案，如下所示：

<code>npm i react-native-app-auth@2.2.0
npm i
react-native link</code>

（以下内容与原文相同，略去重复部分，只保留必要的修改和说明）

...（剩余部分与原文相同，略去重复的代码和说明）

以上是构建一个反应本机应用程序并使用OAuth 2.0进行身份验证的详细内容。更多信息请关注PHP中文网其他相关文章！