by Melih Yumak

通过Melih Yumak

如何使用react-native-app-auth设置React Native身份验证 (How to set up React Native authentication with react-native-app-auth)

版本号 (Versions)

Before we start, make sure you have the following versions installed:

在开始之前，请确保已安装以下版本：

“react”: “16.8.3”,“react-native”: “0.59.1”,“react-native-contacts”: “3.1.5”,

“React”：“ 16.8.3”，“React本机”：“ 0.59.1”，“React本机接触”：“ 3.1.5”，

Here’s the link to the Github repo if you want to check it out: https://github.com/FormidableLabs/react-native-app-auth

如果您想检出Github仓库，请点击以下链接 ： https : //github.com/FormidableLabs/react-native-app-auth

React-native-app-auth is used to provide authentication in your react-native applications. In my case, I was trying to use it with Google, so here is an explanation how you can install and use it for the versions above.

React-native-app-auth用于在您的react-native应用程序中提供身份验证。 就我而言，我正尝试在Google上使用它，因此这里说明了如何在上述版本中安装和使用它。

In their documentation it’s also explained as a React Native bridge for AppAuth-iOS and AppAuth-Android SDKS for communicating with OAuth 2.0 and OpenID Connect providers.

在他们的文档中，它还被解释为用于AppAuth-iOS和AppAuth-Android SDKS的React Native桥，用于与OAuth 2.0和OpenID Connect提供程序进行通信。

经过测试的OpenID提供程序： (Tested OpenID providers:)

These providers are OpenID compliant, which means you can use autodiscovery:

这些提供程序符合OpenID，这意味着您可以使用自动发现 ：

• Identity Server4 (Example configuration)

  Identity Server4 ( 示例配置 )

• Identity Server3 (Example configuration)

  Identity Server3 ( 示例配置 )

• Google (Example configuration)

  Google ( 示例配置 )

• Okta (Example configuration)

  Okta ( 示例配置 )

• Keycloak (Example configuration)

  Keycloak ( 示例配置 )

• Azure Active Directory (Example configuration)

  Azure Active Directory ( 示例配置 )

• AWS Cognito (Example configuration)

  AWS Cognito ( 示例配置 )

经过测试的OAuth2提供程序： (Tested OAuth2 providers:)

These providers implement the OAuth2 spec, but are not OpenID providers, which means you must configure the authorization and token endpoints yourself.

这些提供程序实现OAuth2规范，但不是OpenID提供程序，这意味着您必须自己配置授权和令牌终结点。

• Uber (Example configuration)

  Uber ( 示例配置 )

• Fitbit (Example configuration)

  Fitbit ( 示例配置 )

• Dropbox (Example configuration)

  Dropbox ( 示例配置 )

• Reddit (Example configuration)

  Reddit ( 示例配置 )

安装 (Installation)

npm install react-native-app-auth --savereact-native link react-native-app-auth

IOSIn the documentation, there are three ways to implement this state but I prefer CocoaPods.

IOS在文档中，有三种方法可以实现此状态，但我更喜欢CocoaPods。

If you are using CocoaPods for the first time, please complete the steps below:

如果您是第一次使用CocoaPods，请完成以下步骤：

sudo gem install cocoapods

From your root folder open

从您的根文件夹中打开

cd ios

pod init

The pod init command will initialise the Podfile in your iOS directory.

pod init命令将在您的iOS目录中初始化Podfile。

Then add this line below in your Podfile after target ‘your_app’ do

然后，在目标“ your_app”执行完之后，在您的Podfile中添加以下行

pod 'AppAuth', '0.95.0'

注册重定向URL方案 (Register redirect URL scheme)

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

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

Note: you will get these values from oauth provider. For google: https://console.developers.google.com/

注意：您将从oauth provider获得这些值。 对于Google： https ： //console.developers.google.com/

<key>CFBundleURLTypes</key><array>  <dict>    <key>CFBundleURLName</key>    <string>com.your.app.identifier</string>    <key>CFBundleURLSchemes</key>    <array>      <string>io.identityserver.demo</string>    </array>  </dict></array>

• CFBundleURLName is any globally unique string. A common practice is to use your app identifier.

  CFBundleURLName是任何全局唯一的字符串。 一种常见的做法是使用您的应用标识符。

• CFBundleURLSchemes is an array of URL schemes your app needs to handle. The scheme is the beginning of your OAuth Redirect URL, up to the scheme separator (:) character.

  CFBundleURLSchemes是您的应用程序需要处理的一系列URL方案。 该方案是您的OAuth重定向URL的开始，一直到计划分隔符( : )字符。

在AppDelegate中定义openURL回调 (Define openURL callback in AppDelegate)

You need to retain the auth session in order to continue the authorization flow from the redirect. Follow these steps:

您需要保留身份验证会话，以便继续进行重定向中的授权流程。 跟着这些步骤：

Make AppDelegate conform to RNAppAuthAuthorizationFlowManager with the following changes to AppDelegate.h:

通过对AppDelegate.h进行以下更改，使AppDelegate符合RNAppAuthAuthorizationFlowManager ：

+ #import "RNAppAuthAuthorizationFlowManager.h"

- @interface AppDelegate : UIResponder <UIApplicationDelegate>+ @interface AppDelegate : UIResponder <UIApplicationDelegate, RNAppAuthAuthorizationFlowManager>

+ @property(nonatomic, weak)id<RNAppAuthAuthorizationFlowManagerDelegate>authorizationFlowManagerDelegate;

Change the following method from UIApplicationDelegate in AppDelegate.m:

从AppDelegate.m UIApplicationDelegate更改以下方法：

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString *, id> *)options { return [self.authorizationFlowManagerDelegate resumeExternalUserAgentFlowWithURL:url];}

Android

安卓

After successful linking you should add android/app/build.grandle file defaultConfig value as your identifiers redirect url.

成功链接后，您应该添加android / app / build.grandle文件defaultConfig值作为您的标识符重定向网址。

manifestPlaceholders = [

appAuthRedirectScheme: “io.identityserver.demo”

]

用法 (Usage)

import { authorize } from 'react-native-app-auth';

// base configconst config = {  issuer: '<YOUR_ISSUER_URL>',  clientId: '<YOUR_CLIENT_ID>',  redirectUrl: '<YOUR_REDIRECT_URL>',  scopes: ['<YOUR_SCOPES_ARRAY>'],};

// use the client to make the auth request and receive the authStatetry {  const result = await authorize(config);  // result includes accessToken, accessTokenExpirationDate and refreshToken} catch (error) {  console.log(error);}

Happy Coding!

编码愉快！

Thank you for reading this far. If you enjoyed this post, please share, comment, and press that ? a few times (up to 50 times). . . Maybe it will help someone.

感谢您阅读本文。 如果您喜欢这篇文章，请分享，评论并按此？ 几次(最多50次)。 。 。 也许会帮助某人。

Follow me on Medium or Github if you’re interested in more in-depth and informative write-ups like these in the future. ?

如果您将来对此类更深入，内容更丰富的文章感兴趣，请在Medium或Github上关注我。 ？

翻译自: https://www.freecodecamp.org/news/how-to-set-up-react-native-authentication-with-react-native-app-auth-f6fd66e0e6d0/