Erstellen Sie eine native reagemonische Anwendung und authentifizieren Sie mit OAuth 2.0

Einfach die Authentifizierungsfunktionen von React Native Apps mit Okta und OpenID Connect (OIDC), ohne sie selbst zu bauen. Mit OIDC können Sie die OKTA -API direkt authentifizieren, und dieser Artikel zeigt, wie diese Funktion in einer nativen React -Anwendung implementiert wird. Mithilfe der AppAuth -Bibliothek lernen wir, wie Sie Anmeldeberosen über OIDC umleiten.

React Native ist ein effizientes Gerüst. Im Gegensatz zu ionischen und anderen hybriden mobilen Frameworks können Sie native mobile Anwendungen mithilfe von Webtechnologien (React und JavaScript) erstellen. Es handelt sich nicht um einen Browser oder ein Webview. Die Entwicklung einer mobilen App mit React Native ähnelt der Verwendung eines nativen SDK, bei dem Sie alle Tests auf Ihrem Emulator oder Gerät durchführen. Nicht so überprüfbar wie Ionic im Browser. Dies kann Vorteile bringen, da Sie keinen Code schreiben müssen, der auf Ihrem Browser und Ihrem Gerät separat ausgeführt wird.

Wenn Sie Google Trends überprüfen, werden Sie feststellen, dass React Native in der native Entwicklung noch beliebter ist als Android und iOS!

In diesem Artikel wird Sie mithilfe der neuesten Version von React Native die Anwendungen entwickelt. Zum Zeitpunkt des Schreibens werden die neuesten Versionen 16.2.0 und React Native 0,54,0 reagieren. Wir erstellen eine neue App, fügen AppAuth zur Authentifizierung hinzu, verwenden Okta zur Authentifizierung und führen sie auf iOS und Android aus.

AppAuth ist ein natives Anwendungs ​​-Client -SDK zur Authentifizierung und Autorisierung von Endbenutzern mit OAuth 2.0 und OpenID Connect. Es ist für iOS-, macOS-, Android- und native JS -Umgebungen geeignet und implementiert moderne Sicherheits- und Benutzerfreundlichkeitsfähigkeit für native App -Authentifizierung und -autorisierung.

React Native App erstellen

React verfügt über ein Befehlszeilenwerkzeug (CLI) namens Create-React-App, mit dem neue React-Apps erstellt werden können. React Native verfügt auch über ein ähnliches Tool namens Create React Native App. Stellen Sie vor der Installation sicher, dass der Knoten V6 oder höher installiert ist.

Installieren

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

Nach dem Ausführen dieser Befehle fordert Ihr Terminal einige Optionen auf:

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

Wenn Sie einen Mac verwenden, drücken Sie I, um den iOS -Emulator zu öffnen. Sie werden aufgefordert, die Expo zu installieren/zu öffnen und dann den gerenderten App.js.

Wenn Sie Windows oder Linux verwenden, wird empfohlen, einen Android -Emulator oder Ihr Android -Gerät zu verwenden (falls Sie einen haben). Wenn es nicht funktioniert, machen Sie sich keine Sorgen, wir werden später behandeln, wie Sie dies später beheben können.

Tipp: Sie können TypeScript anstelle von JavaScript in React Native Apps verwenden, indem Sie den nativen Starter von Microsoft React React React verwenden. Wenn Sie sich für diesen Ansatz entscheiden, wird empfohlen, die Schritte zur Konvertierung Ihrer Bewerbung nach Abschluss dieses Tutorials zu befolgen.

reagieren native und oAuth 2.0

In diesem Fall werde ich React Native App Auth, eine von beeindruckende Bibliothek, verwenden. Es gibt drei Gründe, warum ich diese Bibliothek benutze: 1) Sie liefern ein großartiges Beispiel, das ich in wenigen Minuten zum Laufen bringen kann; Andere Methodenlauf.

• Ich habe versucht, React-Native-OAUTh zu reagieren, aber ich habe festgestellt, dass es eine Verwendung eines vorhandenen Anbieters erfordert, bevor er einen neuen Anbieter hinzufügte. Ich möchte OKTA nur als Anbieter verwenden. Darüber hinaus senden seine zahlreichen Probleme und Anfragen auch Warnsignale.
• Ich habe versucht, reagieren zu-sifple-auth, habe aber Probleme, die veraltete Navigator-Komponente dazu zu bringen, mit der neuesten React Native-Version zu arbeiten.
• Ich habe dieses React Native OAuth 2 -Tutorial ausprobiert, hatte aber auch Probleme, auf meine App zurückzuführen.

Erstellen Sie native Apps in Okta

Bevor Sie AppAuth zu Ihrer nativen React -App hinzufügen, benötigen Sie eine App, um zu autorisieren. Wenn Sie noch kein kostenloses Okta -Entwicklerkonto haben, melden Sie sich jetzt für eines an!

Loginieren Sie Ihr OKTA -Entwicklerkonto und navigieren Sie zu Anwendungen & GT; Klicken Sie auf native und dann auf Weiter. Nennen Sie die Anwendung (z. B. React Native), wählen Sie Aktualisierungstoken als Autorisierungstyp und den Standardautorisierungscode. Kopieren Sie den Login-Umleitungs-URI (z. B. com.oktapreview.dev-158606:/callback) und speichern Sie sie an einem Ort. Dieser Wert ist bei der Konfiguration der Anwendung erforderlich.

Tippen Sie auf Fertig und Sie sollten auf dem nächsten Bildschirm eine Client -ID sehen. Kopieren Sie diesen Wert und speichern Sie diesen Wert.

add React native AppAuth zur Authentifizierung

Sie müssen die native Konfiguration der App "popaufieren", die normalerweise von der Erstellung von Recact-Native-App versteckt wird.

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

Wenn das System Sie auffordert, eine Frage zu beantworten, verwenden Sie die folgende Antwort:

Frage Antwort

Wie möchten Sie aus der Erstellung von Recact-Native-Apps auftauchen? Reagieren Sie nativ Welchen Inhalt sollte Ihre App auf der Homepage des Benutzers angezeigt? okta rn Was sollten Ihre Android -Studio- und Xcode -Projekte benannt werden? oktarn

Um React Native App -Auth zu installieren, führen Sie den folgenden Befehl aus:

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

Nachdem Sie diese Befehle ausgeführt haben, müssen Sie ein nationales iOS -Projekt konfigurieren. Zur Bequemlichkeit habe ich die folgenden Schritte kopiert.

iOS -Einstellungen

reagieren native App-Authäure hängt von AppAuth-IOS ab, sodass Sie es als Abhängigkeit konfigurieren müssen. Der einfachste Weg ist die Verwendung von Cocoapods. Führen Sie den folgenden Befehl aus:

, um Cocoapods zu installieren:

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

Erstellen Sie eine Podfile im iOS-Verzeichnis des Projekts, das AppAuth-IOS als Abhängigkeit angibt. Stellen Sie sicher, dass Oktarn dem Anwendungsnamen übereinstimmt, der beim Ausführen von NPM -Ausstrahlung ausführlich angegeben ist.

<code>npm run eject</code>

Führen Sie dann die POD -Installation aus dem iOS -Verzeichnis aus. Der erste Lauf kann eine Weile dauern, auch mit schnellen Verbindungen. Jetzt ist ein guter Zeitpunkt, um Kaffee oder Whisky zu trinken! ?

Öffnen Sie Ihr Projekt in Xcode, indem Sie Open Oktarn.xcWorkspace aus dem iOS -Verzeichnis ausführen.

Wenn Sie vorhaben, iOS 10 und früher zu unterstützen

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

(Der folgende Inhalt entspricht dem Originaltext, die doppelten Teile werden weggelassen und nur notwendige Änderungen und Erklärungen bleiben beibehalten)

... (Der Rest ist der gleiche Originaltext, der doppelte Code und Beschreibung weglässt)

Das obige ist der detaillierte Inhalt vonErstellen Sie eine native reagemonische Anwendung und authentifizieren Sie mit OAuth 2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!