A React Native hitelesítés beállítása a reag-native-app-auth használatával

Programozás

Verziók

Mielőtt elkezdenénk, ellenőrizze, hogy a következő verziók vannak-e telepítve:

„Reagál”: „16.8.3”,

„Reagál-natív”: „0.59.1”,

„Reagál-bennszülött-kapcsolatok”: „3.1.5”,

Itt van a link a Github repóhoz, ha meg akarja nézni : //github.com/FormidableLabs/react-native-app-auth

A React-native-app-auth hitelesítésre szolgál a reakció-natív alkalmazásokban. Esetemben a Google-lal próbáltam használni, ezért íme egy magyarázat, hogyan telepítheti és használhatja a fenti verziókhoz.

Dokumentációjukban ez az AppAuth-iOS és az AppAuth-Android SDKS React Native hídjaként is ismertetésre kerül az OAuth 2.0 és az OpenID Connect szolgáltatókkal való kommunikációhoz.

Tesztelt OpenID szolgáltatók:

Ezek a szolgáltatók OpenID kompatibilisek, ami azt jelenti, hogy használhatja az automatikus felderítést:

  • Identity Server4 (példa konfigurációra)
  • Identity Server3 (Konfigurációs példa)
  • Google (példa konfigurációra)
  • Okta (példa konfigurációra)
  • Kulcstartó (példa konfigurációra)
  • Azure Active Directory (konfigurációs példa)
  • AWS Cognito (konfigurációs példa)

Tesztelt OAuth2 szolgáltatók:

Ezek a szolgáltatók implementálják az OAuth2 specifikációt, de nem OpenID szolgáltatók, ami azt jelenti, hogy magának kell konfigurálnia az engedélyezést és a token végpontokat.

  • Uber (Konfigurációs példa)
  • Fitbit (konfigurációs példa)
  • Dropbox (példa konfigurációra)
  • Reddit (példa konfigurációra)

Telepítés

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

IOS

A dokumentációban három módja van ennek az állapotnak a megvalósítására, de én inkább a CocoaPod-okat részesítem előnyben.

Ha először használja a CocoaPodokat, kérjük, hajtsa végre az alábbi lépéseket:

sudo gem install cocoapods

Nyissa meg a gyökérmappát

cd ios
pod init

A pod init parancs inicializálja a Podfile-t az iOS könyvtárban.

Ezután adja hozzá ezt a sort alább a Podfile-be, miután a 'your_app' csinálás megtörtént

pod 'AppAuth', '0.95.0'

Regisztrálja az átirányítási URL-sémát

Ha támogatni kívánja az iOS 10 vagy újabb rendszert, akkor a következőképpen kell meghatároznia a támogatott átirányítási URL sémákat Info.plist:

Megjegyzés: Ezeket az értékeket az oauth szolgáltatótól kapja meg .

A Google számára: //console.developers.google.com/

CFBundleURLTypes  CFBundleURLName com.your.app.identifier CFBundleURLSchemes  io.identityserver.demo
  • CFBundleURLNamebármely globálisan egyedi karakterlánc. Általános gyakorlat az alkalmazásazonosító használata.
  • CFBundleURLSchemesegy olyan URL-séma tömb, amelyet az alkalmazásnak kezelnie kell. A séma az OAuth átirányítási URL kezdete, a séma elválasztó ( :) karakterig.

Definiálja az openURL visszahívást az AppDelegate alkalmazásban

Meg kell őriznie a hitelesítési munkamenetet az átirányításból származó engedélyezési folyamat folytatásához. Kovesd ezeket a lepeseket:

Tedd AppDelegatefelelnie RNAppAuthAuthorizationFlowManageraz alábbi módosításokat AppDelegate.h:

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

Változás az alábbi módszert UIApplicationDelegatea AppDelegate.m:

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

Android

A sikeres összekapcsolás után adja hozzá az android / app / build.grandle file defaultConfig értéket, mint az azonosítók átirányítják az URL-t.

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

Használat

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

Boldog kódolás!

Köszönöm, hogy idáig elolvastad. Ha tetszett ez a bejegyzés, kérjük, ossza meg, kommentálja és nyomja meg? néhányszor (legfeljebb 50-szer). . . Talán segít valakinek.

Kövessen engem a Mediumon vagy a Githubon, ha a jövőben ilyen részletesebb és informatívabb írásokra kíváncsi. ?