Sådan konfigureres React Native-godkendelse med react-native-app-auth

Versioner

Før vi starter, skal du sørge for at have følgende versioner installeret:

“Reagere”: “16.8.3”,

“React-native”: “0.59.1”,

“React-native-contacts”: “3.1.5”,

Her er linket til Github repo, hvis du vil tjekke det ud : //github.com/FormidableLabs/react-native-app-auth

React-native-app-auth bruges til at give godkendelse i dine react-native applikationer. I mit tilfælde prøvede jeg at bruge det med Google, så her er en forklaring på, hvordan du kan installere og bruge det til ovenstående versioner.

I deres dokumentation forklares det også som en React Native bridge til AppAuth-iOS og AppAuth-Android SDKS til kommunikation med OAuth 2.0 og OpenID Connect-udbydere.

Testede OpenID-udbydere:

Disse udbydere er OpenID-kompatible, hvilket betyder, at du kan bruge autodiscovery:

  • Identity Server4 (eksempelkonfiguration)
  • Identity Server3 (eksempelkonfiguration)
  • Google (eksempelkonfiguration)
  • Okta (eksempelkonfiguration)
  • Keycloak (eksempelkonfiguration)
  • Azure Active Directory (eksempelkonfiguration)
  • AWS Cognito (eksempelkonfiguration)

Testede OAuth2-udbydere:

Disse udbydere implementerer OAuth2-spec, men er ikke OpenID-udbydere, hvilket betyder, at du selv skal konfigurere autorisationen og token-slutpunkter.

  • Uber (eksempelkonfiguration)
  • Fitbit (eksempelkonfiguration)
  • Dropbox (eksempelkonfiguration)
  • Reddit (eksempelkonfiguration)

Installation

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

IOS

I dokumentationen er der tre måder at implementere denne tilstand på, men jeg foretrækker CocoaPods.

Hvis du bruger CocoaPods for første gang, skal du udføre nedenstående trin:

sudo gem install cocoapods

Åbn fra din rodmappe

cd ios
pod init

Pod init-kommandoen initialiserer Podfilen i din iOS-mappe.

Tilføj derefter denne linje nedenfor i din Podfile efter mål 'your_app' do

pod 'AppAuth', '0.95.0'

Registrer ordnings-URL-ordning

Hvis du agter at understøtte iOS 10 og ældre, skal du definere de understøttede omdirigerings-URL-ordninger i din Info.plistsom følger:

Bemærk: Du får disse værdier fra oauth-udbyderen .

For google: //console.developers.google.com/

CFBundleURLTypes  CFBundleURLName com.your.app.identifier CFBundleURLSchemes  io.identityserver.demo
  • CFBundleURLNameer enhver globalt unik streng. En almindelig praksis er at bruge din app-id.
  • CFBundleURLSchemeser en række webadresseskemaer, som din app skal håndtere. Ordningen er begyndelsen på din OAuth-omdirigerings-URL, op til skemaseparatortegnet ( :).

Definer openURL callback i AppDelegate

Du skal bevare godkendelsessessionen for at fortsætte godkendelsesstrømmen fra omdirigering. Følg disse trin:

Foretag AppDelegateoverensstemmelse RNAppAuthAuthorizationFlowManagermed følgende ændringer til AppDelegate.h:

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

Skift følgende metode fra UIApplicationDelegatei AppDelegate.m:

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

Android

Efter vellykket sammenkædning skal du tilføje android / app / build.grandle- fil defaultConfig-værdi, da dine identifikatorer omdirigerer url.

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

Anvendelse

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);}

Glad kodning!

Tak fordi du læste så langt. Hvis du kunne lide dette indlæg, så del, kommenter og tryk på det? et par gange (op til 50 gange). . . Måske hjælper det nogen.

Følg mig på Medium eller Github, hvis du er interesseret i mere dybtgående og informative skrivninger som disse i fremtiden. ?