With Okta and OpenID Connect (OIDC) you can easily integrate authentication into a React Native application and never have to build it yourself again. OIDC allows you to authenticate directly against the , and this article shows you how to do just that in a React Native application. I’ll demonstrate you how to log in with OIDC redirect, using AppAuth.

使用Okta和OpenID Connect（OIDC），您可以轻松地将身份验证集成到React Native应用程序中，而不必自己再次构建它。 OIDC允许您直接根据进行身份验证，本文向您展示了如何在React Native应用程序中做到这一点。 我将向您演示如何使用AppAuth通过OIDC重定向登录。

React Native is a pretty slick framework. Unlike Ionic and other hybrid mobile frameworks, it allows you to use web technologies (React and JavaScript) to build native mobile apps. There is no browser or WebView involved, so developing a mobile app with React Native is similar to using the native SDK, in that you'll do all your testing on an emulator or device. There is no way to test it in your browser like there is with Ionic. This can be a benefit in that you don't have to write code that works in-browser and on-device separately.

React Native是一个非常漂亮的框架。 与Ionic和其他混合移动框架不同，它允许您使用Web技术（React和JavaScript）来构建本机移动应用。 由于不涉及浏览器或WebView，因此使用React Native开发移动应用程序与使用本机SDK相似，因为您将在模拟器或设备上进行所有测试。 无法像使用Ionic一样在您的浏览器中对其进行测试。 这是有好处的，因为您不必编写在浏览器中和在设备上分别工作的代码。

Today I'm going to show you how to develop a React Native app with the latest and greatest releases. At the time of this writing, that's React 16.2.0 and React Native 0.52.2. You'll create a new app, add for authentication, authenticate with Okta, and see it running on both iOS and Android.

今天，我将向您展示如何开发具有最新和最佳版本的React Native应用程序。 在撰写本文时，这是React 16.2.0和React Native 0.52.2。 您将创建一个新应用，添加进行身份验证，使用Okta进行身份验证，然后查看该应用程序是否同时在iOS和Android上运行。

AppAuth is a client SDK for native apps to authenticate and authorize end-users using OAuth 2.0 and OpenID Connect. Available for iOS, macOS, Android and Native JS environments, it implements modern security and usability for native app authentication and authorization.

AppAuth是用于本机应用程序的客户端SDK，可使用OAuth 2.0和OpenID Connect对最终用户进行身份验证和授权。 它可用于iOS，macOS，Android和Native JS环境，实现了针对本机应用程序身份验证和授权的现代安全性和可用性 。

( )

React has a create-react-app command-line tool (CLI) that you can use to create new React apps. React Native has a similar tool called . Before you install it, make sure you have v6 or later installed.

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

Install create-react-native-app and create a new project called okta-rn:

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

npm install -g create-react-native-appcreate-react-native-app okta-rncd okta-rnnpm start

This will result your terminal prompting you with some options:

这将导致您的终端提示您一些选项：

To view your app with live reloading, point the Expo app to this QR code.You'll find the QR scanner on the Projects tab of the app.[QR Code]Or enter this address in the Expo app's search bar: exp://172.31.98.12:19000Your phone will need to be on the same local network as this computer.For links to install the Expo app, please visit https://expo.io.Logs from serving your app will appear here. Press Ctrl+C at any time to stop.› Press a to open Android device or emulator, or i to open iOS emulator.› Press q to display QR code.› Press r to restart packager, or R to restart packager and clear cache.› Press d to toggle development mode. (current mode: development)

If you're on a Mac, press i to open iOS emulator. You will be prompted to install/open with Expo, then presented with the rendered App.js.

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

If you're on Windows or Linux, I'd suggest trying the Android emulator or your Android device (if you have one). If it doesn't work, don't worry, I'll show you how to make that work later on.

如果您使用的是Windows或Linux，建议您尝试使用Android模拟器或Android设备（如果有）。 如果它不起作用，请不用担心，稍后我将向您展示如何进行该工作。

TIP: You can use TypeScript instead of JavaScript in your React Native app using Microsoft's . If you decide to go this route, I'd recommend following the steps to convert your app after you've completed this tutorial.

提示：您可以使用Microsoft的在React Native应用程序中使用TypeScript代替JavaScript。 如果您决定走这条路，建议您完成本教程后，按照以下步骤转换应用程序。

( )

In this example, I'll use , a library created by . The reason I'm using this library is three-fold: 1) they provide a nice that I was able to make work in just a few minutes, 2) it uses AppAuth (a mature OAuth client implementation), and 3) I was unable to get anything else working.

在此示例中，我将使用 （由创建的库）。 我使用此库的原因有三点：1）他们提供了一个很好的 ，使我能够在短短几分钟内完成工作； 2）它使用AppAuth（成熟的OAuth客户端实现），以及3）无法使其他任何工作。

• I tried , but discovered it required using an existing provider before adding a new one. I only wanted to have Okta as a provider. Also, it's high number of issues and pull requests served as a warning sign.
  我尝试了 ，但是发现添加新的提供程序之前需要使用现有的提供程序。 我只想让Okta作为提供者。 此外，问题数量很多，并且拉取请求也作为警告信号。
• I tried , but had issues getting the deprecated Navigator component to work with the latest React Native release.
  我尝试了 ，但是在使过时的Navigator组件与最新的React Native版本一起使用时遇到了问题。
• I tried doing , but also had problems redirecting back to my app.
  我尝试进行 ，但是在重定向回我的应用程序时也遇到了问题。

在Okta中创建本机应用程序 (Create Native Application in Okta)

Before you add AppAuth to your React Native application, you'll need an application to authorize against. If you don't have a free-forever Okta Developer account, !

在将AppAuth添加到React Native应用程序之前，需要一个应用程序进行授权。 如果您没有永久的Okta Developer永久帐户，请立即 ！

Log in to your Okta Developer account and navigate to Applications > Add Application. Click Native and click Next. Give the app a name you’ll remember (e.g., React Native), select Refresh Token as a grant type, in addition to the default Authorization Code. Copy the Login redirect URI (e.g., com.oktapreview.dev-158606:/callback) and save it somewhere. You'll need this value when configuring your app.

登录到您的Okta Developer帐户，然后导航到Applications > Add Application 。 单击本机 ，然后单击下一步 。 为应用程序命名一个您会记住的名称（例如React Native ），除了默认的Authorization Code之外，选择Refresh Token作为授予类型。 复制登录重定向URI （例如com.oktapreview.dev-158606:/callback ）并将其保存在某处。 在配置应用程序时，您将需要此值。

Click Done and you should see a client ID on the next screen. Copy and save this value as well.

单击完成 ，您应该在下一个屏幕上看到客户端ID。 也复制并保存该值。

添加React Native AppAuth进行身份验证 (Add React Native AppAuth for Authentication)

You'll need to "eject" the native configuration for your app, which is normally hidden by create-react-native-app.

您需要“弹出”应用程序的本机配置，通常由create-react-native-app隐藏。

npm run eject

When prompted to answer questions, use the following answers:

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

Question	Answer
What should your app appear as on a user's home screen?	Okta RN
What should your Android Studio and Xcode projects be called?	OktaRN

题	回答
您的应用应在用户主屏幕上显示为什么？	Okta RN
您的Android Studio和Xcode项目应命名为什么？	OktaRN

To install App Auth for React Native, run the following commands:

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

npm i react-native-app-auth@1.0.1 --savereact-native link

TIP: If you see a "Command link unrecognized" error, run npm i && react-native link.

提示：如果看到“无法识别命令link ”错误，请运行npm i && react-native link 。

After running these commands, you have to . I've copied the steps below for your convenience.

运行这些命令后，您必须 。 为了方便起见，我已复制以下步骤。

iOS设置 (iOS Setup)

React Native App Auth depends on , so you have to configure it as a dependency. The easiest way to do that is to use . To install CocoaPods, run the following command:

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

sudo gem install cocoapods

Create a Podfile in the ios directory of your project that specifies AppAuth-ios as a dependency. Make sure that OktaRN matches the app name you specified when running npm run eject.

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

platform :ios, '11.0'target 'OktaRN' do pod 'AppAuth', '>= 0.91'end

Then run pod install from the ios directory. This can take a while the first time, even on a fast connection. Now is a good time to grab a coffee, or a scotch!

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

Open your project in Xcode by running open OktaRN.xcworkspace from the ios directory.

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

If you intend to support iOS 10 and older, you need to define the supported redirect URL schemes in ios/OktaRN/Info.plist as follows:

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

    
     CFBundleURLTypes
    
     
        
      
       CFBundleURLName
         
      
       $(PRODUCT_BUNDLE_IDENTIFIER)
         
      
       CFBundleURLSchemes
         
           
       
        {yourReversedOktaDomain}
          
       
     
    

Below is what mine looks like after I changed my app identifier and added this key.

下面是我更改应用程序标识符并添加此密钥后的样子。

    
     CFBundleIdentifier
    
    
     com.okta.developer.reactnative.$(PRODUCT_NAME:rfc1034identifier)
    
    
     CFBundleURLTypes
    
     
        
      
       CFBundleURLName
         
      
       $(PRODUCT_BUNDLE_IDENTIFIER)
         
      
       CFBundleURLSchemes
         
           
       
        com.oktapreview.dev-158606
          
       
     
    

Open AppDelegate.h in your Xcode project (OktaRN > OktaRN > AppDelegate.h) and add the lines with the + next to them below.

在Xcode项目中打开AppDelegate.h （OktaRN> OktaRN> AppDelegate.h ），并在下面添加带有+的行。

+ @protocol OIDAuthorizationFlowSession; @interface AppDelegate : UIResponder 
    
     + @property(nonatomic, strong, nullable) id
     
       currentAuthorizationFlow; @property (nonatomic, strong) UIWindow *window; @end
     
    

This property holds the authorization flow information that started before you redirect to Okta. After Okta authorizes you, it redirects to the redirect_uri that's passed in.

此属性保存在重定向到Okta之前启动的授权流信息。 Okta授权您后，它将重定向到传入的redirect_uri 。

The authorization flow starts from an openURL() app delegate method. To add it, open AppDelegate.m and import AppAuth.h.

授权流程从openURL()应用程序委托方法开始。 要添加它，请打开AppDelegate.m并导入AppAuth.h 。

#import "AppAuth.h"

Then at the bottom of the class (before @end), add the openURL() method.

然后在类的底部（ @end之前），添加openURL()方法。

- (BOOL)application:(UIApplication *)app           openURL:(NSURL *)url           options:(NSDictionary
    
      *)options { if ([_currentAuthorizationFlow resumeAuthorizationFlowWithURL:url]) {   _currentAuthorizationFlow = nil;   return YES; } return NO;}
    

Android设置 (Android Setup)

Setting up Android is quite a bit easier. React Native App Auth for Android depends on , but you need to add the correct Android Support library version to your project.

设置Android相当容易。 适用于Android的React Native App Auth取决于 ，但是您需要向项目中添加正确的Android支持库版本。

Add the Google Maven repository to your android/build.gradle and upgrade the Android Tools dependency:

将Google Maven存储库添加到您的android/build.gradle并升级Android Tools依赖项：

buildscript{
       repositories {
           jcenter()       google()   }   dependencies {
           classpath 'com.android.tools.build:gradle:3.0.1'   }}

Upgrade the appcompat dependency in android/app/build.gradle to 25.3.1 to match the one expected by AppAuth.

将android/app/build.gradle的appcompat依赖项升级到25.3.1以匹配AppAuth期望的依赖项。

dependencies{
     compile "com.android.support:appcompat-v7:25.3.1"}

Remove buildToolsVersion "23.0.1" as its no longer necessary.

删除不再需要的buildToolsVersion "23.0.1" 。

Update the compileSdkVersion:

更新compileSdkVersion ：

android{
     compileSdkVersion 25}

Add the appAuthRedirectScheme property the defaultConfig in android/app/build.gradle:

在android/app/build.gradle中将appAuthRedirectScheme属性添加为defaultConfig ：

android{
     defaultConfig {
       ...   manifestPlaceholders = [     appAuthRedirectScheme: '{yourReversedOktaDomain}'   ] }}

After making this change, my defaultConfig looks as follows.

进行此更改后，我的defaultConfig如下所示。

defaultConfig{
       applicationId "com.oktarn"   minSdkVersion 16   targetSdkVersion 22   versionCode 1   versionName "1.0"   ndk {
           abiFilters "armeabi-v7a", "x86"   }   manifestPlaceholders = [       appAuthRedirectScheme: 'com.oktapreview.dev-158606'   ]}

( )

Replace the code in App.js with the following JavaScript. This code allows you to authorize, refresh your access token, and revoke it.

用以下JavaScript替换App.js的代码。 此代码使您可以授权，刷新访问令牌并撤销它。

import React, {
     Component } from 'react';import {
     UIManager, LayoutAnimation } from 'react-native';import AppAuth from 'react-native-app-auth';import {
     Page, Button, ButtonContainer, Form, Heading } from './components';UIManager.setLayoutAnimationEnabledExperimental &&UIManager.setLayoutAnimationEnabledExperimental(true);const scopes = ['openid', 'profile', 'email', 'offline_access'];type State = {
     hasLoggedInOnce: boolean, accessToken: ?string, accessTokenExpirationDate: ?string, refreshToken: ?string};export default class App extends Component<{
    }, State> {
     auth = new AppAuth({
       issuer: 'https://{yourOktaDomain}.com/oauth2/default',   clientId: '{clientId}',   redirectUrl: 'com.{yourReversedOktaDomain}:/callback' }); state = {
       hasLoggedInOnce: false,   accessToken: '',   accessTokenExpirationDate: '',   refreshToken: '' }; animateState(nextState: $Shape
    
     , delay: number = 0) {
       setTimeout(() => {
         this.setState(() => {
           LayoutAnimation.easeInEaseOut();       return nextState;     });   }, delay); } authorize = async () => {
       try {
         const authState = await this.auth.authorize(scopes);     this.animateState(       {
             hasLoggedInOnce: true,         accessToken: authState.accessToken,         accessTokenExpirationDate: authState.accessTokenExpirationDate,         refreshToken: authState.refreshToken       },       500     );   } catch (error) {
         console.error(error);   } }; refresh = async () => {
       try {
         const authState = await this.auth.refresh(this.state.refreshToken, scopes);     this.animateState({
           accessToken: authState.accessToken || this.state.accessToken,       accessTokenExpirationDate:       authState.accessTokenExpirationDate || this.state.accessTokenExpirationDate,       refreshToken: authState.refreshToken || this.state.refreshToken     });   } catch (error) {
         console.error(error);   } }; revoke = async () => {
       try {
         await this.auth.revokeToken(this.state.accessToken);     this.animateState({
           accessToken: '',       accessTokenExpirationDate: '',       refreshToken: ''     });   } catch (error) {
         console.error(error);   } }; render() {
       const {
    state} = this;   return (     
     
             {
    !!state.accessToken ? (         
      
           
       
        accessToken
                  
       
        {
    state.accessToken}
                  
       
        accessTokenExpirationDate
                  
       
        {
    state.accessTokenExpirationDate}
                  
       
        refreshToken
                  
       
        {
    state.refreshToken}
                
      
       ) : (         
      
       {
    state.hasLoggedInOnce ? 'Goodbye.' : 'Hello, stranger.'}
             )}       
      
                {
    !state.accessToken && (           
                )}         {
    !!state.refreshToken && 
       }         {
    !!state.accessToken && 
       }       
           
        ); }}
    

Make sure to adjust the initialization of AppAuth with your settings.

确保使用您的设置调整AppAuth的初始化。

auth = new AppAuth({   issuer: 'https://{yourOktaDomain}.com/oauth2/default',   clientId: '{clientId}',   redirectUrl: 'com.{yourReversedOktaDomain}:/callback '});

Change index.js to use OktaRN as the name of your app.

更改index.js以使用OktaRN作为应用程序的名称。

AppRegistry.registerComponent('OktaRN', () => App);

This code uses , so you'll need to install that as a dependency.

这段代码使用了 ，因此您需要将其安装为依赖项。

npm i styled-components --save

Then copy the components directory into your project's root directory from Formidable's example.

然后从Formidable的示例中将components目录复制到项目的根目录中。

svnexport https://github.com/FormidableLabs/react-native-app-auth/trunk/Example/components

Grab the background image that's referenced in the Page.js component too.

也获取Page.js组件中引用的背景图像。

svnexport https://github.com/FormidableLabs/react-native-app-auth/trunk/Example/assets

在iOS模拟器上运行 (Run on iOS Simulator)

Run your app with npm run ios.

使用npm run ios运行您的应用npm run ios 。

You should see a screen that says "Hello, stranger." Click on Authorize and you'll be prompted to continue or cancel.

您应该看到一个屏幕，上面写着“你好，陌生人”。 点击授权 ，系统将提示您继续或取消。

Click Continue and you should see an Okta sign-in form. Enter your credentials and you'll be redirected back to the application.

单击继续 ，您应该会看到Okta登录表单。 输入您的凭据，您将被重定向回该应用程序。

You can click Refresh to watch the values for the access token and expire date change.

您可以单击刷新以查看访问令牌的值和到期日期更改。

TIP: If animations happen slowly in iOS Simulator, toggle Debug > Slow Animations.

提示：如果动画在iOS Simulator中缓慢发生，请切换调试 > 慢动画 。

在Android上运行 (Run on Android)

To try it on an Android emulator, run npm run android. If you don't have a phone plugged in or an Android Virtual Device (AVD) created, you'll see an error:

要在Android模拟器上进行尝试，请运行npm run android 。 如果您没有插入电话或未创建Android虚拟设备（AVD），则会看到错误消息：

* What went wrong:Execution failedfor task ':app:installDebug'.> com.android.builder.testing.api.DeviceException: No connected devices!

To fix this, open Android Studio, choose open existing project, and select the android directory in your project. If you're prompted to update anything, approve it.

要解决此问题，请打开Android Studio，选择打开现有项目 ，然后在项目中选择android目录。 如果系统提示您更新任何内容，请批准它。

If you get an error Could not find method google(), edit build.gradle to remove this line, then reload the project.

如果遇到错误Could not find method google() ，请编辑build.gradle以删除此行，然后重新加载项目。

To create a new AVD, navigate to Tools > Android > AVD Manager. Create a new Virtual Device and click Play. I chose a Pixel 2 as you can see from my settings below.

要创建新的AVD，请导航至工具 > Android > AVD Manager 。 创建一个新的虚拟设备，然后单击播放。 从下面的设置中可以看到，我选择了Pixel 2。

Modify android/build.gradle to add google() back in, then run npm run android again. You should see a welcome screen and be able to authorize successfully.

修改android/build.gradle以重新添加google() ，然后再次运行npm run android 。 您应该会看到一个欢迎屏幕，并且能够成功进行授权。

升级到最新版本的React Native (Upgrade to the Latest Release of React Native)

The tool is a handy way to upgrade your project to use the latest versions. Install it and run it.

工具是将项目升级为使用最新版本的便捷方法。 安装并运行它。

npm i-g react-native-git-upgradereact-native-git-upgradenpm i

Or, you can just change your package.json to have react-native": "0.52.2 and then run npm i.

或者，您可以只将package.json更改为react-native": "0.52.2 ，然后运行npm i 。

获取和查看ID令牌 (Get and View an ID Token)

If you'd like to get an ID token in addition to an access token, add idToken as a property of type State and the state variable in App.js.

如果除了访问令牌之外，还想获取ID令牌，请将idToken添加为State类型的属性，并在App.js添加state变量。

type State= {
     ... idToken: ?string};export default class App extends Component<{
    }, State> {
     ... state = {
       ...   idToken: '' };

Then update the authorize() method to set the property from authState. You'll want to do add similar logic in the refresh() and revoke() methods.

然后更新authorize()方法以从authState设置属性。 您需要在refresh()和revoke()方法中添加类似的逻辑。

authorize= async () => {
     try {
       const authState = await this.auth.authorize(scopes);   this.animateState(     {
           hasLoggedInOnce: true,       accessToken: authState.accessToken,       accessTokenExpirationDate: authState.accessTokenExpirationDate,       refreshToken: authState.refreshToken,       idToken: authState.idToken     },     500   ); } catch (error) {
       console.error(error); }};

To see what's in your ID token, install .

要查看ID令牌中的内容，请安装 。

npm i buffer--save

Import it at the top of App.js.

将其导入App.js的顶部。

import {
     Buffer } from 'buffer';

Then change the render() method to decode it.

然后更改render()方法对其进行解码。

render() {
     const {
    state} = this; if (state.idToken) {
       const jwtBody = state.idToken.split('.')[1];   const base64 = jwtBody.replace('-', '+').replace('_', '/');   const decodedJwt = Buffer.from(base64, 'base64');   state.idTokenJSON = JSON.parse(decodedJwt); } ...

Finally, add a <Form.Label> and <Form.Value> row after the one that displays the access token.

最后，在显示访问令牌的行之后添加<Form.Label>和<Form.Value>行。

    
     ID Token
    
    
     {JSON.stringify(state.idTokenJSON)}
    

NOTE: There's a that prevents this from working on Android.

注意： 中有一个 ，阻止该 Android上运行。

Run npm run ios and you should see the claims in the ID token after authorizing with Okta.

运行npm run ios ，使用Okta授权后，您应该在ID令牌中看到声明。

使用您的访问令牌调用API (Call an API with Your Access Token)

Now that you have an access token, what can you do with it? You can call an Okta-protected API with it in an Authorization header!

现在您有了访问令牌，该怎么办？ 您可以在Authorization标头中调用受Okta保护的API！

I wrote about how to create a "Good Beers" API in . You can use the backend of that application to prove it works.

我写了关于如何在创建“ Good Beers” API的 。 您可以使用该应用程序的后端来证明它可以工作。

Clone the project from GitHub and checkout the okta branch.

从GitHub克隆项目并签出okta分支。

git clone https://github.com/oktadeveloper/spring-boot-react-example.gitgit checkout okta

Modify spring-boot-react-example/server/src/main/resources/application.properties to set the issuer and clientId.

修改spring-boot-react-example/server/src/main/resources/application.properties以设置issuer和clientId 。

okta.oauth2.issuer=https://{yourOktaDomain}.com/oauth2/defaultokta.oauth2.clientId={clientId}

NOTE: You'll need to have installed to run this Spring Boot application.

注意：您需要安装才能运行此Spring Boot应用程序。

Start the app by running ./mvnw from the server directory.

通过从server目录运行./mvnw来启动应用程序。

Back to the React Native client. In App.js, add beers as a property of state.

回到React Native客户端。 在App.js ，将beers添加为state的属性。

state= {
     ... beers: []};

Set it to this same value in the revoke() method. Add a fetchGoodBeers() method that uses the access token to call the backend.

在revoke()方法中将其设置为相同的值。 添加一个fetchGoodBeers()方法，该方法使用访问令牌来调用后端。

fetchGoodBeers= async () => {
     if (this.state.beers.length) {
       // reset to id token if beers is already populated   this.animateState({
    beers: []}) } else {
       fetch('http://localhost:8080/good-beers', {
         headers: {
           'Authorization': `Bearer ${
      this.state.accessToken}`     }   }).then(response => response.json())     .then(data => {
           this.animateState({
    beers: data})     })     .catch(error => console.error(error)); }};

TIP: For this to work in the Android emulator (and on a real phone), you'll need to change localhost to your IP address.

提示：要使其在Android模拟器（和真实电话）中正常工作，您需要将localhost更改为您的IP地址。

In the <ButtonContainer> at the bottom, add a "Good Beers" button that allows you to call the API, as well as press it again to view the ID Token.

在底部的<ButtonContainer>中，添加一个“ Good Beers”按钮，您可以调用该API，然后再次按一下以查看ID令牌。

{
    !!state.accessToken && }

Modify the row where you display the ID token to show the JSON from the API.

修改显示ID令牌的行，以显示API中的JSON。

    
     {state.beers.length ? 'Good Beers' : 'ID Token'}
    
    
     {JSON.stringify(state.beers.length ? state.beers : state.idTokenJSON)}
    

In iOS Simulator, press Command + R (on Mac, CTRL + R on others)to reload everything and you should see the JSON when you click on the Good Beers button. You can reload in Android using Command + M (on Mac, CTRL + M on other operating systems).

在iOS模拟器中，按Command + R （在Mac上为CTRL + R，在其他情况下）以重新加载所有内容，并且在单击“ Good Beers”按钮时应看到JSON。 您可以使用Command + M （在Mac上为CTRL + M在其他操作系统上）在Android中重新加载。

( )

I hope you've enjoyed this whirlwind tour of how to do authentication with Okta and React Native. You can learn more about React Native on . You can also add to its ~60K stars .

我希望您喜欢这个关于如何使用Okta和React Native进行身份验证的旋风之旅。 您可以在React Native 上了解更多信息。 您还可以添加约6万颗星。

You can find the source code for this application at .

您可以在找到此应用程序的源代码。

If you're interested in seeing how to do regular React development with Okta, I encourage you to check out the following resources:

如果您有兴趣了解如何使用Okta进行常规的React开发，建议您查看以下资源：

If you have any questions about this article, please hit me up on Twitter .

如果您对本文有任何疑问，请在Twitter 上打我。

翻译自: