Construisez une application native React et authentifiez avec OAuth 2.0

Facile à intégrer les capacités d'authentification des applications natives React avec Okta et OpenID Connect (OIDC) sans les construire vous-même. OIDC vous permet d'authentifier directement l'API OKTA, et cet article montrera comment implémenter cette fonctionnalité dans une application Native React. Nous apprendrons comment rediriger les utilisateurs de connexion via OIDC à l'aide de la bibliothèque Appauth.

React Native est un cadre efficace. Contrairement à Ionic et à d'autres cadres mobiles hybrides, il vous permet de créer des applications mobiles natives à l'aide de technologies Web (React et JavaScript). Il n'implique pas de navigateur ou de vue Web, donc le développement d'une application mobile avec React Native est similaire à l'utilisation d'un SDK natif où vous ferez tous les tests sur votre émulateur ou votre appareil. Pas aussi testable que ionic dans le navigateur. Cela peut apporter des avantages car vous n'avez pas à écrire de code qui s'exécute sur votre navigateur et sur votre appareil séparément.

Si vous consultez Google Trends, vous constaterez que React Native est encore plus populaire dans le développement natif qu'Android et iOS!

Cet article vous guidera sur la façon de développer des applications en utilisant la dernière version de React Native. Au moment de la rédaction du moment de la rédaction, les dernières versions sont réagies 16.2.0 et réagissent Native 0.54.0. Nous créerons une nouvelle application, ajouterons AppAuth pour l'authentification, utiliserons OKTA pour l'authentification et l'exécuter sur iOS et Android.

Appauth est un SDK client d'application natif pour l'authentification et l'autorisation des utilisateurs finaux à l'aide d'Oauth 2.0 et d'OpenID Connect. Il convient aux environnements iOS, macOS, Android et natifs, implémentant les meilleures pratiques de sécurité et d'utilisation modernes pour l'authentification et l'autorisation des applications natives.

Créer React Native App

react a un outil de ligne de commande (CLI) appelé Create-React-App qui peut être utilisé pour créer de nouvelles applications React. React Native a également un outil similaire appelé Create React Native App. Avant de l'installer, assurez-vous que le nœud V6 ou supérieur est installé.

Installez la création de réaction-native-app et créez un nouveau projet appelé Okta-Rn:

<code>npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start</code>

Après avoir exécuté ces commandes, votre terminal vous invitera avec certaines options:

<code>...（省略终端输出，与原文相同）</code>

Si vous utilisez un Mac, appuyez sur I pour ouvrir l'émulateur iOS. Vous serez invité à installer / ouvrir une exposition, puis à rendre l'application rendu.js.

Si vous utilisez Windows ou Linux, il est recommandé d'essayer d'utiliser un émulateur Android ou votre périphérique Android (si vous en avez un). Si cela ne fonctionne pas, ne vous inquiétez pas, nous couvrirons comment résoudre ce problème plus tard.

Astuce: vous pouvez utiliser TypeScript au lieu de JavaScript dans les applications natives React à l'aide du démarreur natif React de Microsoft React. Si vous décidez d'utiliser cette approche, il est recommandé de suivre les étapes pour convertir votre application une fois ce didacticiel terminé.

React Native et OAuth 2.0

Dans ce cas, j'utiliserai React Native App Auth, une bibliothèque créée par Formidable. Il y a trois raisons pour lesquelles j'utilise cette bibliothèque: 1) ils fournissent un excellent exemple que je peux le faire fonctionner en quelques minutes; Autre méthode s'exécute.

• J'ai essayé React-Native-Oauth mais j'ai constaté qu'il nécessite d'utiliser un fournisseur existant avant d'ajouter un nouveau fournisseur. Je veux juste utiliser Okta en tant que fournisseur. De plus, ses nombreux problèmes et demandes envoient également des signaux d'avertissement.
• J'ai essayé React-Native-Simple-Auth, mais j'ai des problèmes d'essayer d'obtenir le composant Navigator obsolète pour travailler avec la dernière version native React.
• J'ai essayé ce tutoriel Oauth 2 React Native, mais j'ai également eu des problèmes à rediriger vers mon application.

Créer des applications natives dans OKTA

Avant d'ajouter AppAuth à votre application Native React, vous avez besoin d'une application pour autoriser. Si vous n'avez pas encore de compte Okta Developer gratuit, inscrivez-vous pour un maintenant!

Connectez-vous à votre compte Okta Developer et accédez à Applications & GT; Cliquez sur Native, puis cliquez sur Suivant. Nommez l'application (par exemple, React Native), sélectionnez Refresh Token comme type d'autorisation et le code d'autorisation par défaut. Copiez l'URI de redirection de connexion (par exemple, com.oktapreview.dev-158606: / rappel) et enregistrez-le à un emplacement. Cette valeur est requise lors de la configuration de l'application.

Appuyez sur Terminé et vous devriez voir un ID client sur l'écran suivant. Copiez et enregistrez cette valeur.

Ajouter React Native AppAuth pour l'authentification

Vous devez "faire apparaître" la configuration native de l'application, qui est généralement cachée par la création-réaction native-app.

<code>npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start</code>

Lorsque le système vous invite à répondre à une question, veuillez utiliser la réponse suivante:

Question Réponse

Comment voulez-vous apparaître à partir de la création-réaction native-app? React natif Quel contenu votre application devrait-elle afficher sur la page d'accueil de l'utilisateur? OKTA RN Comment vos projets Android Studio et Xcode devraient être nommés? oktarn

Pour installer React Native App Auth, exécutez la commande suivante:

<code>npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start</code>

Après avoir exécuté ces commandes, vous devez configurer un projet iOS natif. Pour plus de commodité, j'ai copié les étapes suivantes.

Paramètres iOS

React Native App Auth dépend d'AppAuth-IOS, vous devez donc le configurer comme une dépendance. Le moyen le plus simple est d'utiliser des cocoapodes. Pour installer des cocoapodes, exécutez la commande suivante:

<code>...（省略终端输出，与原文相同）</code>

Créez un podfile dans le répertoire iOS du projet, qui spécifie AppAuth-IOS comme dépendance. Assurez-vous qu'Oktarn correspond au nom de l'application spécifié lors de l'exécution de l'exécution de l'exécution de NPM.

<code>npm run eject</code>

Ensuite, exécutez l'installation du pod à partir du répertoire iOS. La première course peut prendre un certain temps, même avec des connexions rapides. C'est le bon moment pour prendre du café ou du whisky! ?

Ouvrez votre projet dans Xcode en exécutant Open Oktarn.xcWorkspace à partir du répertoire iOS.

Si vous prévoyez de prendre en charge iOS 10 et plus tôt, vous devez définir le schéma d'URL de redirection pris en charge dans iOS / Oktarn / info.plist comme indiqué ci-dessous:

<code>npm i react-native-app-auth@2.2.0
npm i
react-native link</code>

(Le contenu suivant est le même que le texte d'origine, les pièces en double sont omises et seules les modifications et explications nécessaires sont conservées)

... (le reste est le même que le texte d'origine, en omettant du code et de la description en double)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!