Einrichten der mobilen App-Umgebung

In diesem Teil werden wir eine moderne Android-App mit Kotlin und Jetpack Compose für die Benutzeroberfläche erstellen, die als Boilerplate für das nächste Modul verwendet wird, in dem die App mit dem Backend (das wir zuvor erstellt haben) kommuniziert. Das Backend wird mit Vonage Verify kommunizieren.

Überblick über den App Flow

Die App wird diesem Fluss folgen:

1. Der Benutzer gibt seine Rufnummer ein.
2. Die App sendet die Rufnummer an das Backend (POST /verification).
3. Wenn die stille Authentifizierung erfolgreich ist, wird der Benutzer verifiziert.
4. Wenn er nicht funktioniert (oder nicht verfügbar ist), wird der Benutzer nach dem SMS-Code gefragt.
5. Die App sendet den Code an das Backend (POST /check-code).
6. Die App zeigt das Ergebnis der Überprüfung an.

Erstellen Sie das Android-Projekt

1. Öffnen Sie Android Studio.

2. Klicken Sie auf Neues Projekt → Leere Aktivität zusammenstellen.

3. Verwenden Sie diese Einstellungen:

   • Name: Verify2FADemo
   • Sprache: Kotlin
   • Minimum SDK: API 24 (Android 7.0)

4. Klicken Sie auf Oberfläche und warten Sie, bis die Gradle-Synchronisierung abgeschlossen ist.

Android-Abhängigkeiten einrichten

Öffnen Sie app/build.gradle.kts und fügen Sie die folgenden Abhängigkeiten hinzu (oder aktualisieren Sie sie).

Für Leser, die sich noch nicht mit dem Thema Mobilfunk befasst haben, ist es wichtig, dies zu erläutern:

• Bibliotheken zusammenstellen: Erstellen von UI mit Kotlin-Funktionen anstelle von XML-Layouts (weniger Boilerplate, einfacher in einem Tutorial zu folgen).

• OkHttp: Ein zuverlässiger HTTP-Client für die Kommunikation mit Ihrem Backend. (Android liefert standardmäßig keinen "schönen" modernen HTTP-Client aus).

• Gson: Konvertiert Kotlin/Java-Objekte ↔ JSON, damit Sie nicht überall manuell JSON-Strings erstellen müssen.

• Koroutinen: Android-Anwendungen dürfen den Hauptthread nicht blockieren. Mit Coroutines können wir Netzwerke im Hintergrund ausführen und die Benutzeroberfläche sicher aktualisieren.

Nachdem Sie die Datei bearbeitet haben, klicken Sie auf Jetzt synchronisieren.

Internet-Berechtigungen und lokale Netzwerke

Unter AndroidManifest.xmlfügen Sie dies innerhalb der <manifest> Tag:

Ohne diese Funktion blockiert Android einfach alle ausgehenden Netzanrufe.

Wenn Sie ein Backend über einfache http://... (nicht HTTPS), kann Android es je nach den Sicherheitseinstellungen Ihres Ziel-SDKs/Netzwerks blockieren.

Für die lokale Entwicklung können Sie Klartextverkehr zulassen, indem Sie dies zu der <application> Tag:

Backend-Konfiguration speichern in local.properties

Das Hardcoding von URLs direkt in Kotlin-Dateien ist anfällig und unsicher.
Stattdessen speichern wir die Backend-URL in local.propertiesdas ist:

• Nicht an Git übergeben
• Umweltspezifische
• Konzipiert für lokale Konfiguration

Öffnen (oder erstellen) local.properties im Stammverzeichnis des Android-Projekts und fügen Sie hinzu:

Als nächstes stellen wir diesen Wert der Android-App über BuildConfig.

Unter app/build.gradle.kts, hinzufügen:

Dann synchronisieren Sie Gradle erneut. Dies erzeugt:

die wir sicher in Kotlin-Code verwenden können.