Cómo configurar la autenticación React Native con react-native-app-auth

Programación

Versiones

Antes de comenzar, asegúrese de tener instaladas las siguientes versiones:

"Reaccionar": "16.8.3",

"React-native": "0.59.1",

"React-native-contact": "3.1.5",

Aquí está el enlace al repositorio de Github si desea consultarlo : //github.com/FormidableLabs/react-native-app-auth

React-native-app-auth se utiliza para proporcionar autenticación en sus aplicaciones react-native. En mi caso, estaba intentando usarlo con Google, así que aquí hay una explicación de cómo puede instalarlo y usarlo para las versiones anteriores.

En su documentación también se explica como un puente React Native para AppAuth-iOS y AppAuth-Android SDKS para comunicarse con proveedores de OAuth 2.0 y OpenID Connect.

Proveedores de OpenID probados:

Estos proveedores son compatibles con OpenID, lo que significa que puede utilizar el descubrimiento automático:

  • Identity Server4 (configuración de ejemplo)
  • Identity Server3 (configuración de ejemplo)
  • Google (configuración de ejemplo)
  • Okta (configuración de ejemplo)
  • Keycloak (configuración de ejemplo)
  • Azure Active Directory (configuración de ejemplo)
  • AWS Cognito (configuración de ejemplo)

Proveedores de OAuth2 probados:

Estos proveedores implementan la especificación OAuth2, pero no son proveedores de OpenID, lo que significa que usted mismo debe configurar la autorización y los puntos finales del token.

  • Uber (configuración de ejemplo)
  • Fitbit (configuración de ejemplo)
  • Dropbox (configuración de ejemplo)
  • Reddit (configuración de ejemplo)

Instalación

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

IOS

En la documentación, hay tres formas de implementar este estado, pero prefiero CocoaPods.

Si está utilizando CocoaPods por primera vez, complete los pasos a continuación:

sudo gem install cocoapods

Desde su carpeta raíz abierta

cd ios
pod init

El comando pod init inicializará el Podfile en su directorio de iOS.

Luego agregue esta línea a continuación en su Podfile después de que el objetivo 'your_app' haga

pod 'AppAuth', '0.95.0'

Registrar esquema de URL de redireccionamiento

Si tiene la intención de admitir iOS 10 y versiones anteriores, debe definir los esquemas de URL de redireccionamiento admitidos en su Info.plistcomo sigue:

Nota: obtendrá estos valores del proveedor oauth .

Para google: //console.developers.google.com/

CFBundleURLTypes  CFBundleURLName com.your.app.identifier CFBundleURLSchemes  io.identityserver.demo
  • CFBundleURLNamees cualquier cadena única a nivel mundial. Una práctica común es utilizar el identificador de su aplicación.
  • CFBundleURLSchemeses una serie de esquemas de URL que su aplicación necesita manejar. El esquema es el comienzo de su URL de redireccionamiento de OAuth, hasta el carácter separador de esquema ( :).

Definir devolución de llamada openURL en AppDelegate

Debe conservar la sesión de autenticación para continuar con el flujo de autorización desde la redirección. Sigue estos pasos:

Hacer AppDelegateajusta a RNAppAuthAuthorizationFlowManagerlos siguientes cambios AppDelegate.h:

+ #import "RNAppAuthAuthorizationFlowManager.h"
- @interface AppDelegate : UIResponder + @interface AppDelegate : UIResponder 
+ @property(nonatomic, weak)idauthorizationFlowManagerDelegate;

Cambie el siguiente método desde UIApplicationDelegateen AppDelegate.m:

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

Androide

Después de la vinculación exitosa, debe agregar el valor predeterminadoConfig del archivo android / app / build.grandle como URL de redireccionamiento de sus identificadores.

manifestPlaceholders = [
appAuthRedirectScheme: “io.identityserver.demo”
]

Uso

import { authorize } from 'react-native-app-auth';
// base configconst config = { issuer: '', clientId: '', redirectUrl: '', scopes: [''],};
// 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);}

¡Feliz codificación!

Gracias por leer hasta aquí. Si te gustó esta publicación, comparte, comenta y presiona eso. unas cuantas veces (hasta 50 veces). . . Quizás ayude a alguien.

Sígueme en Medium o Github si estás interesado en artículos más detallados e informativos como estos en el futuro. ?