erui _ eruie 003使用OAuth 2.0构建React Native应用并进行身份验证

本文最初发表于Okta开发人员博客。 感谢您支持使SitePoint成为可能的合作伙伴。

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

今天，我将向您展示如何使用最新和最佳版本开发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和Native JS环境，实现了现代化的安全性和可用性最佳实践用于本机应用程序的身份验证和授权。

React has a

create-react-app

Install

create-react-native-app

okta-rn

npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start

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:19000

Your 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)

App.js

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

在此示例中，我将使用反应本机应用程序身份验证，由创建的库强大。 我使用此库的原因有三点：1）它们提供了出色的例我可以在短短几分钟内完成工作，2）它使用AppAuth（成熟的OAuth客户端实现），并且3）我无法使其他任何工作正常进行。

• 我试过了react-native-oauth但发现添加新提供商之前需要使用现有提供商。 我只想让Okta作为提供者。 此外，问题数量很多，并且拉取请求也作为警告信号。我试过了反应本机简单身份验证但在使已弃用的Navigator组件与最新的React Native版本一起使用时遇到问题。我试过了doing 带有React Native的本OAuth 2教程，但在重定向回我的应用程序时遇到了问题。

将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

Refresh Token

Authorization Code

com.oktapreview.dev-158606:/callback

npm run eject

React Native

Okta RN

OktaRN

npm i react-native-app-auth@2.2.0
npm i
react-native link

React Native App Auth取决于AppAuth-ios，因此您必须将其配置为依赖项。 最简单的方法是使用可可豆. To install 可可豆, run the following command:

sudo gem install cocoapods

Podfile

ios

OktaRN

npm run eject

platform :ios, '11.0'

target 'OktaRN' do
pod 'AppAuth', '>= 0.91'
end

Then run

pod install

ios

Open your project in Xcode by running

open OktaRN.xcworkspace

ios

If you intend to support iOS 10 and older, you need to define the supported redirect URL schemes in

ios/OktaRN/Info.plist

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleURLSchemes</key>
<array>
<string>{yourReversedOktaDomain}</string>
</array>
</dict>
</array>

<key>CFBundleIdentifier</key>
<string>com.okta.developer.reactnative.$(PRODUCT_NAME:rfc1034identifier)</string>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleURLSchemes</key>
<array>
<string>com.oktapreview.dev-158606</string>
</array>
</dict>
</array>

AppDelegate.h

AppDelegate.h

+

+ @protocol OIDAuthorizationFlowSession;

@interface AppDelegate : UIResponder <UIApplicationDelegate>
+ @property(nonatomic, strong, nullable) id<OIDAuthorizationFlowSession> 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

The authorization flow starts from an

openURL()

AppDelegate.m

AppAuth.h

#import "AppAuth.h"

Then at the bottom of the class (before

@end

openURL()

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

Replace the code in

App.js

import React, { Component } from 'react';
import { UIManager, LayoutAnimation } from 'react-native';
import { authorize, refresh, revoke } 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
};

const config = {
issuer: 'https://{yourOktaDomain}/oauth2/default',
clientId: '{clientId}',
redirectUrl: 'com.{yourReversedOktaDomain}:/callback',
additionalParameters: {},
scopes: ['openid', 'profile', 'email', 'offline_access']
};

export default class App extends Component<{}, State> {
state = {
hasLoggedInOnce: false,
accessToken: '',
accessTokenExpirationDate: '',
refreshToken: ''
};

animateState(nextState: $Shape<State>, delay: number = 0) {
setTimeout(() => {
this.setState(() => {
LayoutAnimation.easeInEaseOut();
return nextState;
});
}, delay);
}

authorize = async () => {
try {
const authState = await authorize(config);
this.animateState(
{
hasLoggedInOnce: true,
accessToken: authState.accessToken,
accessTokenExpirationDate: authState.accessTokenExpirationDate,
refreshToken: authState.refreshToken
},
500
);
} catch (error) {
Alert.alert('Failed to log in', error.message);
}
};

refresh = async () => {
try {
const authState = await refresh(config, {
refreshToken: this.state.refreshToken
});

this.animateState({
accessToken: authState.accessToken || this.state.accessToken,
accessTokenExpirationDate:
authState.accessTokenExpirationDate || this.state.accessTokenExpirationDate,
refreshToken: authState.refreshToken || this.state.refreshToken
});
} catch (error) {
Alert.alert('Failed to refresh token', error.message);
}
};

revoke = async () => {
try {
await revoke(config, {
tokenToRevoke: this.state.accessToken,
sendClientId: true
});
this.animateState({
accessToken: '',
accessTokenExpirationDate: '',
refreshToken: ''
});
} catch (error) {
Alert.alert('Failed to revoke token', error.message);
}
};

render() {
const {state} = this;
return (
<Page>
{!!state.accessToken ? (
<Form>
<Form.Label>accessToken</Form.Label>
<Form.Value>{state.accessToken}</Form.Value>
<Form.Label>accessTokenExpirationDate</Form.Label>
<Form.Value>{state.accessTokenExpirationDate}</Form.Value>
<Form.Label>refreshToken</Form.Label>
<Form.Value>{state.refreshToken}</Form.Value>
</Form>
) : (
<Heading>{state.hasLoggedInOnce ? 'Goodbye.' : 'Hello, stranger.'}</Heading>
)}

<ButtonContainer>
{!state.accessToken && (
<Button onPress={this.authorize} text="Authorize" color="#017CC0"/>
)}
{!!state.refreshToken && <Button onPress={this.refresh} text="Refresh" color="#24C2CB"/>}
{!!state.accessToken && <Button onPress={this.revoke} text="Revoke" color="#EF525B"/>}
</ButtonContainer>
</Page>
);
}
}

Make sure to adjust

config

const config = {
issuer: 'https://{yourOktaDomain}/oauth2/default',
clientId: '{clientId}',
redirectUrl: 'com.{yourReversedOktaDomain}:/callback',
...
};

Change

index.js

OktaRN

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

该代码使用样式化的组件，因此您需要将其安装为依赖项。

npm i styled-components

components

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

Grab the background image that’s referenced in the

Page.js

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

Run your app with

npm run ios

cd android
./gradlew wrapper --gradle-version 4.6

Add the Google Maven repository to your

android/build.gradle

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

Upgrade the

appcompat

android/app/build.gradle

25.3.1

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

Remove

buildToolsVersion "23.0.1"

Update the

compileSdkVersion

android {
compileSdkVersion 25
}

Add the

appAuthRedirectScheme

defaultConfig

android/app/build.gradle

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

After making this change, my

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'
]
}

To try it on an Android emulator, run

npm run android

* What went wrong:
Execution failed for 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

Run

npm run android

TIP: To fix

Configuration 'compile' in project ':app' is deprecated. Use 'implementation' instead.

compile

dependencies

implementation

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

npm i -g react-native-git-upgrade
react-native-git-upgrade
npm i

package.json

"react-native": "0.54.2"

npm i

If you’d like to get an ID token in addition to an access token, add

idToken

State

state

App.js

type State = {
...
idToken: ?string
};

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

Then update the

authorize()

authState

refresh()

revoke()

authorize = async () => {
try {
const authState = await authorize(config);
this.animateState(
{
hasLoggedInOnce: true,
accessToken: authState.accessToken,
accessTokenExpirationDate: authState.accessTokenExpirationDate,
refreshToken: authState.refreshToken,
idToken: authState.idToken
},
500
);
} catch (error) {
Alert.alert('Failed to log in', error.message);
}
};

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

npm i buffer

App.js

import { Buffer } from 'buffer';

Then change the

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>

<Form.Value>

<Form.Label>ID Token</Form.Label>
<Form.Value>{JSON.stringify(state.idTokenJSON)}</Form.Value>

Run

npm run ios

npm run android

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

我写了关于如何在中创建“ Good Beers” API的文章。使用Spring Boot和React进行Bootiful开发。 您可以使用该应用程序的后端来证明它可以工作。

Clone the project from GitHub and check out the

okta

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

Modify

spring-boot-react-example/server/src/main/resources/application.properties

issuer

clientId

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

注意：您需要Java 8已安装以运行此Spring Boot应用程序。

Start the app by running

./mvnw

server

Back to the React Native client. In

App.js

beers

state

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

Set it to this same value in the

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

In the

<ButtonContainer>

{!!state.accessToken && <Button onPress={this.fetchGoodBeers} text={!this.state.beers.length ? 'Good Beers' : 'ID Token'} color="#008000" />}

<Form.Label>{state.beers.length ? 'Good Beers' : 'ID Token'}</Form.Label>
<Form.Value>{JSON.stringify(state.beers.length ? state.beers : state.idTokenJSON)}</Form.Value>

NOTE: There is an open issue in react-native-app-auth about revoke not working with Okta because an

Authorization

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

您可以在以下位置找到此应用程序的源代码https://github。com/oktadeveloper/okta-react-native-app-auth-example。

• 在15分钟内使用用户身份验证构建React应用程序使用身份验证构建预先应用使用Spring Boot和React进行Bootiful开发

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

from: https://www.sitepoint.com//build-a-react-native-application-authenticate-with-oauth-2-0/