Generierung von Client APIs mit Swagger Teil 3

Also available in English at Medium.com.

In diesem Blog-Post stellen wir die Client-Generierung von Swagger vor, zeigen, wie man die generierte API in React-Anwendungen verwendet und wie man das Authentifizierungs-Token von Auth0 integriert.

Der Einfachheit halber wird dieses Thema in eine dreiteilige Serie aufgeteilt:

1. Teil 1: Integration von Swagger in Spring Boot, Generierung des API-Clients und Verwendung als Teil einer React-Web-App
2. Teil 2: Sicherung der Endpunkte mit Auth0 und Autorisierung der Anfragen der Web-Clients
3. Teil 3: Verwendung des generierten API-Clients als Teil einer React Native App.

Verwendung des generierten API-Clients als Teil einer React Native App

Im letzten Teil dieser Blogpost-Serie integrieren wir unseren Swagger API-Client in eine React Native App. Dieser Teil baut auf den beiden vorherigen Teilen der Reihe auf, lesen Sie diese also bitte als Vorbereitung auf diesen Teil. Das heutige Ziel ist die Implementierung einer React Native App, welche die Projekte darstellt, die wir in unserer React Web-Anwendung verwalten.

TL;DR In diesem Teil müssen wir viel Konfiguration durchführen. Aus diesem Grund funktioniert ein TL;DR hier leider nicht. Um möglichst schnell zu einem Ergebnis zu kommen, können Sie sich aber auf die ersten beiden Schritte beschränken und anschließend unsere Beispiel-App verwenden.

Schritt 1) Einen Expo-Account erstellen

Expo ist ein Wrapper für React Native Apps und erleichtert uns den gesamten Entwicklungsprozess, inklusive Dependency-Management sowie Build- und Deployment-Verwaltung.

1. Besuchen Sie https://expo.io und erstellen Sie einen neuen Account.
2. Installieren Sie die Expo CLI.
3. Erstellen Sie ein neues Projekt, indem Sie den Befehl expo init in einem leeren Ordner ausfühern.
4. Veröffentlichen Sie Ihr Projekt auf Expo, indem Sie den Befehl expo publish ausführen. Dadurch sollte eine Projekt-Seite ähnlich wie unsere erstellt werden.

Schritt 2) Erstellen und Konfigurieren einer Auth0-Anwendung

1. Erstellen Sie in Auth0 eine neue Native Anwendung für den bestehenden Mandanten: Applications -> Create Application -> Native
2. Fügen Sie die Authentication-URL des Expo-Projekts zur Liste der erlaubten Callback-URLs hinzu (z.B. https://auth.expo.io/@miragon/miragon-example-app) und speichern Sie die Änderungen, indem Sie auf den Button am Ende der Seite klicken.
3. Aktivieren Sie die Username-Passwort-Authentifizierung, indem Sie in den Einstellungen des Mandanten unter General die API Authorization Settings auf “Username-Passwort-Authentication” setzen.

Schritt 3) Konfigurieren der React Native App

Wenn Sie lieber die Beispielanwendung verwenden wollen, klonen Sie unsere Beispiel-App, fügen Sie die folgenden Umgebungsvariablen in Ihre Run-Konfiguration ein und starten Sie die Anwendung mit dem Befehl expo start:

AUTH0_DOMAIN=<YOUR_DOMAIN> (e.g. https://miragon-example-tenant.eu.auth0.com/authorize);
AUTH0_CLIENT_ID=<YOUR_CLIENT_ID> (e.g. yXu7nsklfU495Hgsdg51p0age9dC)

Sie werden merken, dass wir den Authentication-Flow von Auth0 verwenden, welcher den Benutzer auf die Login-Seite von Auth0 weiterleitet und nach dem Eingeben der korrekten Zugangsdaten zurück in die App leitet. Die Logik dafür ist in der Datei constants/Auth.tsx enthalten und funktioniert wie folgt:

Zuerst werden die Zugangsdaten des Nutzers verwendet, um einen langlebigen Token zu erhalten, der 30 Tage lang gültig bleibt. Dieser langlebige Token wird dann verwendet, um einen kurzlebigen Access Token anzufragen. In unseren Apps speichern wir den langlebigen Token im sicheren Expo-Speicher auf dem lokalen Gerät, um einen neuen Access Token anzufragen, sobald der vorherige abgelaufen ist. Aus diesem Grund müssen unsere Nutzer sich nicht bei jedem Öffnen der Anwendung neu anmelden. Für mehr Informationen dazu können Sie auch diesen Artikel lesen.

Um den Code frei von Abhängigkeiten auf unsere eigenen Auth0-Domains und Clients zu halten, speichern wir diese in Umgebungsvariablen mithilfe der Bibliothek expo-constants. Dazu haben wir die folgende Konfiguration in der Datei app.config.js:

import app_config from "./app.json"

export default  {
    ...app_config.expo,
    extra: {
        auth0ClientId: process.env.AUTH0_CLIENT_ID,
        auth0Domain: process.env.AUTH0_DOMAIN,
    },
};

Wie Sie sehen können, wird die Datei app.json erweitert. In dieser Datei stehen alle Konfigurationsparameter für Expo. Um Auth0 in Ihrer Expo-App zu verwenden, müssen Sie sicherstellen, dass die Felder “owner” Ihren Accountnamen und “scheme” einen vorzugsweise eindeutigen Shortcut enthält. Dieser wird für den Protokoll-Teil der Redirect-URL verwendet, mit der die App nach einem erfolgreichen Login wieder geöffnet wird (bspw. mea://...). Unten sehen Sie unsere app.json-Datei:

{
  "expo": {
    "name": "miragon-example-app",
    "slug": "miragon-example-app",
    "scheme": "mea",
    "owner": "miragon",
    ...
}

Im letzten Schritt müssen Sie noch die Dependency react-native-polyfill/auto hinzufügen und Sie in Ihrer App.tsx importieren. Das ist notwendig, um ein Problem mit Axios Fetch zu beheben. Mehr Informationen sind hier zu finden.

Schritt 4) Integrieren der API

Nachdem React Native apps auf React aufbauen, können wir denselben Ansatz wiederverwenden, den wir schon im vorherigen Teil der Serie verwendet haben, um unsere React-Webanwendung aufzusetzen.

Das war’s auch schon! Viel Spaß mit diesem production-ready Ansatz basierend auf Spring Boot, Swagger, Auth0, React und React Native!