Erste Schritte mit AWS

Erstellen eine Flutter-Anwendung

Erstellen Sie eine einfache Flutter-Anwendung mit AWS Amplify

Modul 3: Authentifizierung hinzufügen

In diesem Modul verwenden Sie die Amplify-CLI und -Bibliotheken zur Konfiguration und zum Hinzufügen von Authentifizierung zu Ihrer Anwendung.

Einführung

Die erste Amplify-Kategorie, die Sie der Anwendung hinzufügen werden, wird Authentifizierung sein. Amplify setzt Amazon Cognito unter der Haube für die Verwaltung von Benutzer- und Identitätspools ein.

In diesem Modul lernen Sie, wie man sich als Benutzer anmeldet, bestätigt, einloggt und wieder ausloggt. Wir werden die Funktionalität für jeden Bildschirm in nur wenigen Codezeilen implementieren.

Lerninhalte

  • Konfigurieren der Kategorie Auth
  • Einen Benutzer anmelden
  • Verifizieren einer Benutzer-E-Mail
  • Anmeldung eines authentifizierten Benutzers
  • Abmeldung eines authentifizierten Benutzers

Wichtige Konzepte

Authentifizierung: Authentifizierung ist der Prozess der Verifizierung und Verwaltung eines Benutzers, der es ihm ermöglicht, mit den Ressourcen der Anwendung zu interagieren.

 Veranschlagte Zeit

10 Minuten

 Verwendete Services

Implementierung

  • Erstellen Sie den Authentifizierungs-Service

    Um den Authentifizierungs-Service zu unserem Amplify-Projekt hinzuzufügen, müssen wir diesen Befehl im Terminal im Stammverzeichnis unseres Projekts ausführen:

    amplify add auth

    Es werden Ihnen einige Fragen zur Konfiguration des Auth-Service gestellt. Drücken Sie die Eingabetaste, um den Standardwert für jede Frage auszuwählen. Die resultierende Ausgabe sollte wie folgt aussehen:

    ➜  photo_gallery git:(master) ✗ amplify add auth
    Using service: Cognito, provided by: awscloudformation
    
     The current configured provider is Amazon Cognito.
    
     Do you want to use the default authentication and security configuration? Default configuration
     Warning: you will not be able to edit these selections.
     How do you want users to be able to sign in? Username
     Do you want to configure advanced settings? No, I am done.

    Sobald die Auth-Ressource vollständig konfiguriert ist, sollten Sie eine Ausgabe wie die folgende erhalten:

    Successfully added resource photogallery42b5391b locally

    Wie aus der obigen Ausgabe hervorgeht, wurde die Ressource nur lokal hinzugefügt. Um unser Backend mit den Änderungen, die wir lokal vorgenommen haben, zu konfigurieren, müssen wir diesen Befehl ausführen:

    amplify push

    Bevor die lokalen Änderungen an das Backend gesendet werden, zeigt Amplify CLI einen Statusbericht an, um sicherzustellen, dass Sie die folgenden Änderungen vornehmen möchten:

    Current Environment: dev
    
    | Category | Resource name        | Operation | Provider plugin   |
    | -------- | -------------------- | --------- | ----------------- |
    | Auth     | photogallery42b5391b | Create    | awscloudformation |
    ? Are you sure you want to continue? Yes

    Bevor die lokalen Änderungen an das Backend gesendet werden, zeigt Amplify CLI einen Statusbericht an, um sicherzustellen, dass Sie die folgenden Änderungen vornehmen möchten:

    ✔ All resources are updated in the cloud

    Sie können auch überprüfen, ob Ihre Auth-Ressource richtig konfiguriert wurde, indem Sie die Datei /lib/amplifyconfiguration.dart ansehen und die Auth-Werte inspizieren.

  • Installieren der Abhängigkeit

    Zurück in Visual Studio Code, öffnen Sie pubspec.yaml und fügen Sie die folgende Abhängigkeit hinzu:

    ... # amplify_core: '<1.0.0'
    
    amplify_auth_cognito: '<1.0.0'
    
    ... # dev_dependencies:

    Speichern Sie jetzt die Datei, damit Visual Studio Code das Plugin Amplify Auth Cognito installiert. Sie können auch $ flutter pub get vom Terminal ausführen, wenn die Abhängigkeit nicht auf save installiert ist.

    Sie sollten folgende Ausgabe erhalten:

    exit code 0
  • Konfigurieren des Plugins

    Jetzt, da die Auth-Abhängigkeit installiert ist, können wir das Auth-Plugin zu unserer Amplify-Instanz in _MyAppState._configureAmplify() der Datei main.dart hinzufügen:

    ... // void _configureAmplify() async {
    
    _amplify.addPlugin(authPlugins: [AmplifyAuthCognito()]);
    
    ... // try {

    Führen Sie nun die App aus und bestätigen Sie, dass Sie die Erfolgsmeldung weiterhin in Ihren Protokollen erhalten.

    Wenn Sie weiterhin die Erfolgsmeldung erhalten, können Sie jetzt mit der Implementierung der Funktionalität Ihres Authentifizierungsflusses beginnen. Falls nicht, wiederholen Sie die obigen Schritte oder gehen Sie zum Modul Amplify initialisieren und vergewissern Sie sich, dass Sie dort alle Schritte befolgt haben.

  • Funktionalität implementieren

    Zurück im Modul Eine Flutter-App erstellen, wir haben unseren AuthService implementiert, um die Aktualisierung unseres AuthState auf der Grundlage der aufgerufenen Funktion zu handhaben. Jetzt müssen wir jede unserer Funktionen aktualisieren, um den Status nur dann zu aktualisieren, wenn der Benutzer jeden Vorgang erfolgreich abgeschlossen hat.

    Fügen Sie in auth_service.dart eine AuthCredentials-Eigenschaft in AuthService hinzu:

    ... // final authStateController = StreamController<AuthState>();
    
    AuthCredentials _credentials;
    
    ... // void showSignUp() {

    Diese Eigenschaft wird verwendet, um die SignUpCredentials während des Anmeldevorgangs im Speicher zu halten, so dass ein Benutzer sofort nach Verifizierung seiner E-Mail-Adresse angemeldet werden kann. Wenn wir dies nicht täten, müsste sich der Benutzer manuell anmelden, indem er zum Anmeldebildschirm geht.

    Aktualisieren Sie signUpWithCredentials wie folgt:

    // 1
    void signUpWithCredentials(SignUpCredentials credentials) async {
      try {
        // 2
        final userAttributes = {'email': credentials.email};
    
        // 3
        final result = await Amplify.Auth.signUp(
            username: credentials.username,
            password: credentials.password,
            options: CognitoSignUpOptions(userAttributes: userAttributes));
    
        // 4
        if (result.isSignUpComplete) {
          loginWithCredentials(credentials);
        } else {
          // 5
          this._credentials = credentials;
    
          // 6
          final state = AuthState(authFlowStatus: AuthFlowStatus.verification);
          authStateController.add(state);
        }
      
      // 7
      } on AuthError catch (authError) {
        print('Failed to sign up - ${authError.cause}');
      }
    }
    1. Die Funktion muss aktualisiert werden, um so synchron zu sein, wie wir sie während des Anmeldeprozesses nutzen werden.
    2. Wir müssen userAttribute erstellen, die als Teil der Anmeldung in der E-Mail des Benutzers weitergegeben werden.
    3. Wir werden den Benutzernamen und das Passwort, die durch die Anmeldedaten bereitgestellt werden, zusammen mit den Benutzerattributen, die die E-Mail zur Anmeldung bei Cognito enthalten, weitergeben. Da es sich um einen asynchronen Prozess handelt, müssen wir das Schlüsselwort await verwenden.
    4. Wenn wir erfolgreich ein Ergebnis zurückerhalten, sollte der nächste Schritt die Überprüfung ihrer E-Mail sein. Wenn der Anmeldevorgang aus irgendeinem Grund abgeschlossen ist, werden wir den Benutzer einfach in die App einloggen.
    5. Wir werden die SignUpCredentials in _credentials speichern, wenn der Benutzer seine E-Mail verifiziert.
    6. Wir aktualisieren den AuthState wie zuvor zur Verifizierung, aber erst nachdem wir uns erfolgreich angemeldet und festgestellt haben, dass der Anmeldeprozess nicht abgeschlossen ist.
    7. Wenn die Anmeldung aus irgendeinem Grund fehlschlägt, drucken wir den Fehler einfach in den Protokollen aus.

    Aktualisieren Sie verifyCode entsprechend:

    // 1
    void verifyCode(String verificationCode) async {
     try {
       // 2
       final result = await Amplify.Auth.confirmSignUp(
           username: _credentials.username, confirmationCode: verificationCode);
    
       // 3
       if (result.isSignUpComplete) {
         loginWithCredentials(_credentials);
       } else {
         // 4
         // Follow more steps
       }
     } on AuthError catch (authError) {
       print('Could not verify code - ${authError.cause}');
     }
    }
    1. Genau wie bei signUpWithCredentials muss auch verifyCode als asynchrone Funktion gekennzeichnet werden.
    2. Wir werden _Credentials verwenden, um den Benutzernamen einzugeben und den von der VerificationPage eingegebenen Code an confirmSignUp weiterzugeben.
    3. Wenn das Ergebnis von confirmSignUp angibt, dass die Anmeldung abgeschlossen ist, versuchen wir dann, den Benutzer mit den bei der Anmeldung erstellten _Credentials anzumelden. Es ist wichtig zu beachten, dass wir den AppState im Erfolgsfall nicht mehr aktualisieren, da der Benutzer sich noch bei Amplify anmelden muss.
    4. Wenn die Anmeldung nicht vollständig ist, dann verwenden Sie das Ergebnis, um herauszufinden, welche weiteren Schritte unternommen werden müssen, um die Anmeldung abzuschließen. Dies sollte in unserer App nicht passieren.

    Wir haben den Anmeldungsteil unseres Auth-Flows implementiert, aber jetzt müssen wir den Login-Teil aktualisieren. Aktualisieren Sie loginWithCredentials wie folgt:

    // 1
    void loginWithCredentials(AuthCredentials credentials) async {
     try {
       // 2
       final result = await Amplify.Auth.signIn(
           username: credentials.username, password: credentials.password);
    
       // 3
       if (result.isSignedIn) {
         final state = AuthState(authFlowStatus: AuthFlowStatus.session);
         authStateController.add(state);
       } else {
         // 4
         print('User could not be signed in');
       }
     } on AuthError catch (authError) {
       print('Could not login - ${authError.cause}');
     }
    }
    1. Da loginWithCredentials AuthCredentials als Parameter annimmt, funktioniert es unabhängig davon, ob LoginCredentials oder SignUpCredentials übergeben wird.
    2. Wir geben den AuthCredentials-Benutzernamen und das Passwort an die Amplify-Anmeldemethode weiter und warten auf das Ergebnis.
    3. Wenn die Anmeldung erfolgreich ist und die isSignedIn-Eigenschaft auf dem Ergebnis bestätigt, dass der Benutzer nun angemeldet ist, aktualisieren wir den Status auf Sitzung.
    4. Diesen Zustand sollten wir in unserer App nicht erreichen. Wenn der Benutzer falsche Anmeldedaten eingibt oder einen anderen Fehler erhält, sollte dies zu unserem Catch-Block führen.

    Aktualisieren Sie jetzt die logOut-Methode:

    void logOut() async {
     try {
       // 1
       await Amplify.Auth.signOut();
    
       // 2
       showLogin();
     } on AuthError catch (authError) {
       print('Could not log out - ${authError.cause}');
     }
    }
    1. Wenn wir Auth.signOut() aufrufen, ohne irgendwelche Optionen einzugeben, melden wir nur den Benutzer auf diesem Gerät ab, anstatt den Benutzer auf allen Geräten abzumelden.
    2. Wir können unsere showLogin()-Methode wiederverwenden, um den Status zu aktualisieren und den Benutzer zum Anmeldebildschirm zurückzubringen, sobald die Abmeldung erfolgreich war.

    Und schließlich müssen wir in der Lage sein, den Benutzer automatisch anzumelden, wenn er die Anwendung schließt, sich aber bereits während einer früheren Sitzung angemeldet hat. Fügen Sie diese letzte Funktion zu AuthService hinzu.

    void checkAuthStatus() async {
     try {
       await Amplify.Auth.fetchAuthSession();
    
       final state = AuthState(authFlowStatus: AuthFlowStatus.session);
       authStateController.add(state);
     } catch (_) {
       final state = AuthState(authFlowStatus: AuthFlowStatus.login);
       authStateController.add(state);
     }
    }

    checkAuthStatus wird versuchen, die aktuelle AuthSession zu erhalten; wenn dies erfolgreich ist, wird der Benutzer angemeldet. Wenn der Abruf fehlschlägt, bedeutet dies, dass der Benutzer nicht eingeloggt ist und LoginPage angezeigt werden sollte.

    Im Moment rufen wir showLogin innerhalb der initState-Methode von _MyAppState auf. Ändern wir das in checkAuthStatus:

    ... // _configureAmplify();
    
    _authService.checkAuthStatus();
    
    ... // initState closing }

    Dies sind die einzigen Änderungen, die erforderlich sind, um unseren bestehenden Authentifizierungsfluss zu ergänzen. Build und führen Sie die App aus, und Sie sollten in der Lage sein, sich anzumelden, Ihre E-Mail zu bestätigen, sich abzumelden und dann wieder anzumelden.

    EndofModule3-gif

Fazit

Sie haben erfolgreich Benutzerauthentifizierung zu Ihrer Fotogalerie-Anwendung hinzugefügt! Im nächsten Modul werden wir Ihrer App Speicherplatz hinzufügen.

War das Modul hilfreich?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
Schließen
Es tut uns Leid Sie zu enttäuschen
Ist etwas veraltet, verwirrend oder ungenau? Bitte helfen Sie uns, dieses Tutorial zu verbessern, indem Sie Feedback geben.
Schließen

Speicher hinzufügen