L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Créer une application native React et authentifier avec OAuth 2.0 –
Cet article a été publié à l'origine le Okta Developer Blog . Nous vous remercions de soutenir les partenaires qui rendent SitePoint possible.
Avec Okta et OpenID Connect (OIDC), vous pouvez facilement intégrer l'authentification dans une application React Native et ne jamais avoir à la reconstruire vous-même. OIDC vous permet de vous authentifier directement sur l'API Okta et cet article vous montre comment faire exactement cela dans une application React Native. Aujourd'hui, vous verrez comment connecter un utilisateur dans votre application React Native à l'aide d'une redirection OIDC via la bibliothèque AppAuth
React Native est un framework assez sophistiqué. Contrairement aux frameworks mobiles hybrides Ionic et autres, il vous permet d'utiliser les technologies Web (React et JavaScript) pour créer des applications mobiles natives. Aucun navigateur ou WebView n'étant impliqué, le développement d'une application mobile avec React Native est similaire à l'utilisation du SDK natif dans la mesure où vous effectuez tous vos tests sur un émulateur ou un périphérique. Il n'y a aucun moyen de le tester dans votre navigateur comme il est avec Ionic. Cela peut être un avantage dans la mesure où vous n'avez pas besoin d'écrire du code qui fonctionne dans le navigateur et sur le périphérique séparément.
Si vous regardez Google Trends, vous pouvez voir que React Native est encore plus populaire qu'Android et iOS pour le développement natif!
Aujourd'hui, je vais vous montrer comment développer une application React Native avec les dernières et meilleures versions. Au moment d'écrire ces lignes, c'est React 16.2.0 et React Native 0.54.0. Vous allez créer une nouvelle application, ajouter AppAuth pour l'authentification, vous authentifier avec Okta et la voir fonctionner sur iOS et Android.
AppAuth est un SDK client pour les applications natives permettant d'authentifier et d'autoriser utilisateurs utilisant OAuth 2.0 et OpenID Connect. Disponible pour les environnements iOS, macOS, Android et Native JS, il implémente les meilleures pratiques de sécurité et d'ergonomie pour l'authentification et l'autorisation des applications natives
React a une create-reaction-app outil de ligne de commande (CLI) que vous pouvez utiliser pour créer de nouvelles applications React. React Native a un outil similaire appelé Create React Native App . Avant de l'installer, assurez-vous d'avoir installé le Node v6 ou ultérieur
Installez create-react-native-app et créez un nouveau projet appelé okta-rn :
npm installer -g créer-réagir-native-app
create-react-native-app okta-rn
cd okta-rn
début npm
En exécutant ces commandes, votre terminal vous demandera des options:
Pour afficher votre application avec rechargement en direct, pointez l'application Expo sur ce code QR.
Vous trouverez le scanner QR sur l'onglet Projets de l'application.
[QR Code]
Ou entrez cette adresse dans la barre de recherche de l'application Expo:
exp: //172.31.98.12: 19000
Votre téléphone devra être sur le même réseau local que cet ordinateur.
Pour obtenir des liens pour installer l'application Expo, rendez-vous sur https://expo.io.
Les journaux de diffusion de votre application apparaîtront ici. Appuyez sur Ctrl + C à tout moment pour arrêter.
> Appuyez sur a pour ouvrir l'appareil Android ou l'émulateur, ou sur i pour ouvrir l'émulateur iOS.
> Appuyez sur q pour afficher le code QR.
> Appuyez sur r pour redémarrer packager, ou sur R pour redémarrer packager et effacer le cache.
> Appuyez sur d pour basculer en mode développement. (mode actuel: développement)
Si vous utilisez un Mac, appuyez sur i pour ouvrir l'émulateur iOS. Vous serez invité à installer / ouvrir avec Expo, puis présenté avec le rendu App.js .
Si vous utilisez Windows ou Linux, je vous suggère d'essayer l'émulateur Android ou votre appareil Android (si vous en avez un). Si cela ne fonctionne pas, ne vous inquiétez pas, je vais vous montrer comment faire ce travail plus tard.
ASTUCE: Vous pouvez utiliser TypeScript au lieu de JavaScript dans votre application React Native en utilisant Microsoft TypeScript Réagir natif Starter . Si vous décidez de suivre cette route, je vous recommande de suivre les étapes pour convertir votre application après avoir terminé ce tutoriel.
Réagir Native et OAuth 2.0
Dans cet exemple, je vais utiliser Réagir Native App Auth une bibliothèque créée par Formidable . La raison pour laquelle j'utilise cette bibliothèque est triple: 1) ils fournissent un excellent exemple que j'ai pu faire fonctionner en quelques minutes, 2) il utilise AppAuth (une implémentation mature du client OAuth ), et 3) j'étais incapable de faire fonctionner autre chose.
- J'ai essayé react-native-oauth mais j'ai découvert qu'il fallait utiliser un fournisseur existant avant d'en ajouter un nouveau. Je voulais seulement avoir Okta comme fournisseur. De plus, le nombre élevé de problèmes et les requêtes pull servaient de signe d'avertissement.
- J'ai essayé react-native-simple-auth mais j'ai eu des problèmes pour faire fonctionner le composant Navigator obsolète avec la dernière version de React Native
- J'ai essayé de faire le OAuth 2 avec le tutoriel React Native mais j'ai aussi eu des problèmes de redirection vers mon application.
Créer une application native dans Okta
Avant d'ajouter AppAuth à votre React Native application, vous aurez besoin d'une application pour autoriser. Si vous n'avez pas de compte développeur Okta gratuit, en obtenez un aujourd'hui !
Connectez-vous à votre compte développeur Okta et accédez à Applications > Ajouter une application . Cliquez sur Native et cliquez sur Suivant . Donnez à l'application un nom dont vous vous souviendrez (par exemple, React Native ), sélectionnez Refresh Token comme type de subvention, en plus du code d'autorisation par défaut . Copiez le URI de redirection de connexion (par exemple, com.oktapreview.dev-158606: / callback ) et enregistrez-le quelque part. Vous aurez besoin de cette valeur lors de la configuration de votre application.
Cliquez sur Terminé et vous devriez voir un identifiant client sur l'écran suivant. Copiez et enregistrez également cette valeur.
Ajouter React Native AppAuth pour l'authentification
Vous devez "éjecter" la configuration native de votre application, qui est normalement masquée par create-react-native-app. [19659010] npm run éjecté
Lorsque vous êtes invité à répondre aux questions, utilisez les réponses suivantes:
| Question | Réponse |
|---|---|
| Comment aimeriez-vous vous éjecter de create-react-native-app? | Réagir Native |
Okta RN | |
| Quel devrait être le nom de vos projets Android Studio et Xcode? | OktaRN |
Pour installer App Auth pour React Native, exécutez les commandes suivantes: [19659010] npm je réagis-native-app-auth@2.2.0
npm je
lien réac-natif
Après avoir exécuté ces commandes, vous devez configurer les projets iOS natifs . J'ai copié les étapes ci-dessous pour votre convenance.
Configuration d'iOS
Réagir l'application native dépend de AppAuth-ios donc vous devez le configurer comme une dépendance. La façon la plus simple de le faire est d'utiliser CocoaPods . Pour installer CocoaPods, exécutez la commande suivante:
sudo gem install cocoapods
Créez un fichier Podfile dans le répertoire ios de votre projet qui spécifie AppAuth-ios en tant que dépendance. Assurez-vous que OktaRN correspond au nom de l'application que vous avez spécifié lors de l'exécution de npm run eject .
plateforme: ios, '11 .0 '
cible 'OktaRN' faire
pod 'AppAuth', '> = 0.91'
fin
Exécutez ensuite pod install à partir du répertoire ios . Cela peut prendre un certain temps la première fois, même sur une connexion rapide. C'est le bon moment pour prendre un café ou un scotch! ?
Ouvrez votre projet dans Xcode en exécutant ouvert OktaRN.xcworkspace depuis le répertoire ios .
Si vous avez l'intention de prendre en charge iOS 10 et plus, vous devez définir schémas d'URL de redirection pris en charge dans ios / OktaRN / Info.plist comme suit:
CFBundleURLTypes
CFBundleURLName
$ (PRODUCT_BUNDLE_IDENTIFIER)
CFBundleURLSchemes
{yourReversedOktaDomain}
Voici à quoi ressemble le mien après avoir changé mon identifiant d'application et ajouté cette clé.
CFBundleIdentifier
com.okta.developer.reactnative. $ (PRODUCT_NAME: rfc1034identifier)
CFBundleURLTypes
] CFBundleURLName
$ (PRODUCT_BUNDLE_IDENTIFIER)
CFBundleURLSchemes
com.oktapreview.dev-158606
Ouvrez AppDelegate.h dans votre projet Xcode (OktaRN> OktaRN> AppDelegate.h ) et ajoutez les lignes avec les + à côté d'eux ci-dessous.
+ @protocol OIDAuthorizationFlowSession;
@interface AppDelegate: UIResponder
+ @property (nonatomic, strong, nullable) id currentAuthorizationFlow;
@property (nonatomic, strong) Fenêtre UIWindow *;
@fin
Cette propriété contient les informations sur le flux d'autorisation qui ont démarré avant la redirection vers Okta. Après qu'Okta vous ait autorisé, il redirige vers la redirect_uri qui est passée.
Le flux d'autorisation commence à partir d'une méthode de délégué d'application openURL () . Pour l'ajouter, ouvrez AppDelegate.m et importez AppAuth.h .
#import "AppAuth.h"
Puis, en bas de la classe (avant @end ), ajoutez la méthode openURL () .
- Application (BOOL): (UIApplication *)
openURL: (NSURL *) url
options: (NSDictionary *) options {
if ([_currentAuthorizationFlow resumeAuthorizationFlowWithURL:url]) {
_currentAuthorizationFlow = nil;
retourner YES;
}
retourner NO;
}
Créez votre application native React
Remplacez le code dans App.js par le code JavaScript suivant. Ce code vous permet d'autoriser, d'actualiser votre jeton d'accès et de le révoquer.
import React, {Component} from 'react';
importer {UIManager, LayoutAnimation} à partir de 'react-native';
import {authorize, refresh, revoke} à partir de 'react-native-app-auth';
importer {Page, Button, ButtonContainer, Formulaire, En-tête} à partir de './components';
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental (true);
const étendues = ['openid', 'profile', 'email', 'offline_access'];
type State = {
hasLoggedInOnce: booléen,
accessToken:? chaîne,
accessTokenExpirationDate:? chaîne,
refreshToken:? chaîne
}
const config = {
émetteur: 'https: // {yourOktaDomain} / oauth2 / default',
clientId: '{clientId}',
redirectUrl: 'com. {yourReversedOktaDomain}: / callback ',
additionalParameters: {},
étendues: ['openid', 'profile', 'email', 'offline_access']
}
exporter la classe par défaut App étend Component {
état = {
hasLoggedInOnce: faux,
jeton d'accès: '',
accessTokenExpirationDate: '',
refreshToken: ''
}
animateState (nextState: $ Shape delay: number = 0) {
setTimeout (() => {
this.setState (() => {
LayoutAnimation.easeInEaseOut ();
retour nextState;
});
}, retard);
}
autoriser = async () => {
essayez {
const authState = wait authorize (config);
this.animateState (
{
hasLoggedInOnce: vrai,
accessToken: authState.accessToken,
accessTokenExpirationDate: authState.accessTokenExpirationDate,
refreshToken: authState.refreshToken
},
500
)
} catch (erreur) {
Alert.alert ('Echec de connexion', error.message);
}
}
refresh = async () => {
essayez {
const authState = wait 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 (erreur) {
Alert.alert ("Impossible d'actualiser le jeton", error.message);
}
}
revoke = async () => {
essayez {
wait revoke (config, {
tokenToRevoke: this.state.accessToken,
sendClientId: true
});
this.animateState ({
jeton d'accès: '',
accessTokenExpirationDate: '',
refreshToken: ''
});
} catch (erreur) {
Alert.alert ('Echec de révocation du jeton', error.message);
}
}
render () {
const {state} = ceci;
revenir (
{!! state.accessToken? (
accessToken
{state.accessToken}
accessTokenExpirationDate
{état.accessTokenExpirationDate}
refreshToken
{état.refreshToken}
): (
{state.hasLoggedInOnce? 'Au revoir.' : 'Bonjour, étranger.'}
)}
{! state.accessToken && (
)}
{!! state.refreshToken && }
{!! state.accessToken && }
);
}
}
Assurez-vous de régler config avec vos paramètres.
const config = {
émetteur: 'https: // {yourOktaDomain} / oauth2 / default',
clientId: '{clientId}',
redirectUrl: 'com. {yourReversedOktaDomain}: / callback ',
...
}
Modifier index.js pour utiliser OktaRN comme nom de votre application.
AppRegistry.registerComponent ('OktaRN', () => App);
Ce code utilise style-components vous devrez donc l'installer en tant que dépendance
NOTE: Assurez-vous de naviguer dans le répertoire racine de votre projet avant d'exécuter les commandes ci-dessous.
npm i style-composants
Copiez ensuite le répertoire components dans le répertoire racine de votre projet à partir de l'exemple de Formidable.
svn export https://github.com/FormidableLabs/react-native-app-auth/trunk/Example/ Composants
Saisissez l'image d'arrière-plan référencée dans le composant Page.js .
svn export https://github.com/FormidableLabs/react-native-app-auth/trunk/Example/ les atouts
Exécuter sur le simulateur iOS
Lancez votre application avec npm lancez ios .
Vous devriez voir un écran qui dit "Bonjour, étranger." Cliquez sur Autoriser et vous serez invité à continuer ou à annuler
Cliquez Continuez et vous devriez voir un formulaire de connexion Okta. Entrez vos informations d'identification et vous serez redirigé vers l'application.
Vous pouvez cliquer sur Rafraîchir pour voir les valeurs du jeton d'accès et le changement de date d'expiration
ASTUCE: Si les animations se déroulent lentement dans iOS Simulator, basculer Déboguer > Animations lentes
Configuration Android
Pour configurer le projet Android natif, commencez par mettre à jour la version de Gradle qu'il utilise.
cd android
./gradlew wrapper --gradle-version 4.6
Réagir Native App Auth pour Android dépend de AppAuth-android mais vous devez ajouter la bonne version de la bibliothèque de support Android à votre projet.
Ajouter le référentiel Google Maven à votre android /build.gradle et mettez à jour la dépendance des outils Android:
buildscript {
référentiels {
jcenter ()
Google()
}
dépendances {
classpath 'com.android.tools.build:gradle:3.0.1'
}
}
Mettez à niveau la dépendance appcompat dans android / app / build.gradle vers 25.3.1 pour qu'elle corresponde à celle attendue par AppAuth.
dépendances {
compilez "com.android.support:appcompat-v7:25.3.1"
}
Supprimer buildToolsVersion "23.0.1" car il n'est plus nécessaire.
Mettre à jour le compileSdkVersion :
android {
compileSdkVersion 25
}
Ajoutez la propriété appAuthRedirectScheme the defaultConfig dans android / app / build.gradle :
android {
defaultConfig {
...
manifestPlaceholders = [
appAuthRedirectScheme: '{yourReversedOktaDomain}'
]
}
}
Après avoir effectué cette modification, mon defaultConfig ressemble à ceci:
defaultConfig {
applicationId "com.oktarn"
minSdkVersion 16
targetSdkVersion 22
versionCode 1
versionName "1.0"
ndk {
abiFilters "armeabi-v7a", "x86"
}
manifestPlaceholders = [
appAuthRedirectScheme: 'com.oktapreview.dev-158606'
]
}
Lancer sur Android
Pour l'essayer sur un émulateur Android, lancez npm lancez Android . Si vous ne disposez pas d'un téléphone branché ou d'un périphérique virtuel Android (AVD) en cours d'exécution, une erreur s'affiche:
* Qu'est-ce qui n'a pas fonctionné?
L'exécution a échoué pour la tâche ': app: installDebug'.
> com.android.builder.testing.api.DeviceException: Aucun appareil connecté!
Pour résoudre ce problème, ouvrez Android Studio, choisissez ouvrez le projet existant et sélectionnez le répertoire android dans votre projet. Si vous êtes invité à mettre à jour quoi que ce soit, approuvez-le.
Pour créer un AVD, accédez à Outils > Android > Gestionnaire AVD . Créez un nouveau périphérique virtuel et cliquez sur Lecture. J'ai choisi un Pixel 2 comme vous pouvez le voir de mes paramètres ci-dessous.
Exécutez npm exécutez android à nouveau. Vous devriez voir un écran de bienvenue et pouvoir autoriser avec succès.
ASTUCE: Pour réparer Configuration 'compiler' dans le projet ': app' est obsolète. Utilisez plutôt 'implementation'. modifiez compilez sous dépendances à implémentation . Plus d'informations peuvent être trouvées dans Migrer vers Android Plugin pour Gradle 3.0.0 .
Mettre à niveau vers la dernière version de React Native
Le react-native-git-upgrade outil est un moyen pratique de mettre à jour votre projet pour utiliser les dernières versions. Installez-le et exécutez-le.
npm i -g Réagir-natif-git-upgrade
reac-native-git-upgrade
npm je
Ou, vous pouvez juste changer votre package.json pour avoir "reac-native": "0.54.2" et ensuite lancer npm i .
Obtenir et afficher un jeton d'identification
Si vous souhaitez obtenir un jeton d'identification en plus d'un jeton d'accès, ajoutez idToken en tant que propriété de type State et l'état variable dans App.js .
type State = {
...
idToken:? chaîne
}
exporter la classe par défaut App étend Component {
...
état = {
...
idToken: ''
}
Puis mettez à jour la méthode authorize () pour définir la propriété à partir de authState . Vous voudrez ajouter une logique similaire dans les méthodes refresh () et revoke ()
authorize = async () => {
essayez {
const authState = wait authorize (config);
this.animateState (
{
hasLoggedInOnce: vrai,
accessToken: authState.accessToken,
accessTokenExpirationDate: authState.accessTokenExpirationDate,
refreshToken: authState.refreshToken,
idToken: authState.idToken
},
500
)
} catch (erreur) {
Alert.alert ('Echec de connexion', error.message);
}
}
Pour voir ce qu'il y a dans votre jeton d'identification, installez buffer .
npm i buffer
L'importer en haut de App.js .
importer {Buffer} de 'buffer';
Puis changez la méthode render () pour la décoder.
render () {
const {state} = ceci;
if (state.idToken) {
const jwtBody = state.idToken.split ('.') [1];
const base64 = jwtBody.replace ('-', '+'). replace ('_', '/');
const decodedJwt = Buffer.from (base64, 'base64');
state.idTokenJSON = JSON.parse (décodéJwt);
}
...
Enfin, ajoutez une ligne
ID Token
{JSON.stringify (state.idTokenJSON)}
Exécutez npm exécutez ios (ou npm exécutez android ) et vous devriez voir les revendications dans le jeton d'identification après avoir autorisé Okta. Voici une capture d'écran prouvant que cela fonctionne dans iOS Simulator
Appeler une API avec votre jeton d'accès
Maintenant que vous avez un jeton d'accès, que pouvez-vous faire? Vous pouvez appeler une API protégée par Okta dans un en-tête Autorisation
J'ai écrit sur la création d'une API "Good Beers" dans Bootiful Development avec Spring Boot et React . Vous pouvez utiliser le backend de cette application pour prouver que cela fonctionne.
Cloner le projet à partir de GitHub et consulter la branche okta
git clone https://github.com/oktadeveloper/spring -boot-react-example.git
git checkout okta
Modifier spring-boot-react-exemple / server / src / main / resources / application.properties pour définir l'émetteur et clientId .
] okta.oauth2.issuer = https: // {yourOktaDomain} / oauth2 / default
okta.oauth2.clientId = {clientId}
REMARQUE: Vous devez avoir installé Java 8 pour exécuter cette application Spring Boot.
Démarrez l'application en exécutant ./ mvnw à partir du répertoire server .
Retour au client React Native. Dans App.js ajoutez bières en tant que propriété de état .
state = {
...
bières: []
}
Définissez-le sur cette même valeur dans la méthode revoke () . Ajoutez une méthode fetchGoodBeers () qui utilise le jeton d'accès pour appeler le backend.
fetchGoodBeers = async () => {
if (this.state.beers.length) {
// réinitialise le jeton d'identification si les bières sont déjà remplies
this.animateState ({bières: []}}
} autre {
récupère ('http: // localhost: 8080 / good-beers', {
en-têtes: {
'Autorisation': `Porteur $ {this.state.accessToken}`
}
}). then (réponse => response.json ())
.then (données => {
this.animateState ({bières: données})
})
.catch (erreur => console.error (erreur));
}
}
ASTUCE: Pour que cela fonctionne dans l'émulateur Android (et sur un vrai téléphone), vous devrez remplacer localhost par votre adresse IP.
{!! state.accessToken && }
Modifiez la ligne où vous affichez le jeton d'identification pour afficher le JSON de l'API.
{state.beers.length? «Bonnes bières»: «ID Token»}
{JSON.stringify (state.beers.length? State.beers: state.idTokenJSON)}
Dans iOS Simulator, appuyez sur Command + R pour tout recharger et vous devriez voir le JSON lorsque vous cliquez sur le bouton Good Beers . Vous pouvez recharger dans Android en utilisant Command + M (sur Mac, CTRL + M sur d'autres systèmes d'exploitation).
NOTE: Il y a un problème ouvert dans react-native-app-auth à propos de révoquer ne fonctionnant pas avec Okta parce qu'un
En savoir plus sur React Native et React
J'espère que vous avez apprécié cette visite éclair de comment faire l'authentification avec Okta et React Native. Vous pouvez en apprendre plus sur React Native sur son site officiel . Vous pouvez également ajouter à ses ~ 60K étoiles sur GitHub .
Vous pouvez trouver le code source de cette application à https://github.com/oktadeveloper/okta-react-native- app-auth-example .
Si vous êtes intéressé à voir comment faire un développement React régulier avec Okta, je vous encourage à consulter les ressources suivantes:
Si vous avez des questions concernant cet article, S'il vous plaît me frapper sur Twitter @mraible .
Matt est un champion Java, développeur Web, et développeur Advocate chez Okta. Il aime coder à la fois en Java et en Javascript, mais il s'est aussi beaucoup amusé avec TypeScript dernièrement.
Source link