Démarrer avec AWS

Créer une application Flutter

Créer une application Flutter simple avec AWS Amplify

Module 3 : Ajouter une authentification

Dans ce module, vous allez utiliser la ligne d'interface de commande Amplify et des bibliothèques pour configurer et ajouter une authentification à votre application.

Introduction

La première catégorie Amplify que vous ajouterez à l'application sera Authentication (l'authentification). Amplify exploite Amazon Cognito pour gérer les pools d'utilisateurs et les pools d'identité.

Au cours de ce module, vous apprendrez comment inscrire, confirmer, connecter et déconnecter un utilisateur. Nous mettrons en œuvre la fonctionnalité de chaque écran en quelques lignes de code seulement.

Ce que vous apprendrez

  • Configuration de la catégorie Auth
  • Inscription d'un utilisateur
  • Confirmation d'un e-mail utilisateur
  • Connexion d'un utilisateur authentifié
  • Déconnexion d'un utilisateur authentifié

Concepts clés

Authentication – L'authentification désigne le processus qui consiste à confirmer et gérer un utilisateur, pour lui permettre d'interagir avec les ressources de l'application.

 Durée

10 minutes

 Services utilisés

Implémentation

  • Créer le service d'authentification

    Pour ajouter le service d'authentification à notre projet Amplify, nous devons exécuter cette commande dans le terminal situé dans le répertoire racine de notre projet :

    amplify add auth

    Quelques questions vous seront posées concernant la configuration du service Auth. Appuyez sur la touche Entrée pour sélectionner la valeur par défaut de chaque question. La sortie ainsi obtenue devrait ressembler à ceci :

    ➜  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.

    Une fois la ressource Auth entièrement configurée, vous devriez obtenir une sortie comme celle-ci :

    Successfully added resource photogallery42b5391b locally

    Comme l'indique le résultat ci-dessus, la ressource n'a été ajoutée que localement. Afin de configurer notre backend avec les modifications que nous avons apportées localement, nous devons exécuter la commande suivante :

    amplify push

    Avant d'envoyer les changements locaux au backend, Amplify CLI affichera un rapport d'état pour vérifier que vous voulez bien effectuer les changements suivants :

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

    Avant d'envoyer les changements locaux au backend, Amplify CLI affichera un rapport d'état pour vérifier que vous voulez bien effectuer les changements suivants :

    ✔ All resources are updated in the cloud

    Vous pouvez également vérifier que votre ressource Auth a été correctement configurée en consultant le fichier /lib/amplifyconfiguration.dart et en contrôlant les valeurs d'authentification.

  • Installation de la dépendance

    De retour dans Visual Studio Code, ouvrez pubspec.yaml et ajoutez la dépendance suivante :

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

    Ensuite, enregistrez le fichier afin que Visual Studio Code installe le module d'extension Amplify Auth Cognito. Vous pouvez également exécuter $ flutter pub get depuis le terminal si la dépendance ne s'installe pas lors de l'enregistrement.

    Vous devriez obtenir la sortie suivante :

    exit code 0
  • Configuration du module d'extension

    Maintenant que la dépendance Auth est installée, nous pouvons ajouter le plugin Auth à notre instance Amplify sous _MyAppState._configureAmplify() dans le fichier main.dart :

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

    Exécutez maintenant l'application et confirmez que vous obtenez toujours le message de réussite dans vos journaux.

    Si vous continuez à recevoir le message de réussite, vous pouvez passer à la mise en œuvre de la fonctionnalité de votre flux d'authentification. Dans le cas contraire, recommencez les étapes précédentes ou consultez Initialisation du module Amplify pour vérifier que vous avez correctement suivi les étapes qui y sont décrites.

  • Mise en œuvre de la fonctionnalité

    De retour dans le module Création d'une application Flutter, nous avons mis en œuvre notre AuthService pour gérer la mise à jour de notre AuthState basé sur la fonction appelée. Nous devons maintenant mettre à jour chacune de nos fonctions pour n'actualiser l'état que lorsque l'utilisateur a terminé avec succès chaque processus.

    Dans auth_service.dart, ajoutez une propriété AuthCredentials dans AuthService :

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

    Cette propriété sera utilisée pour garder en mémoire les SignUpCredentials pendant le processus d'inscription afin qu'un utilisateur puisse être connecté immédiatement après avoir confirmé son adresse e-mail. Sans cela, l'utilisateur devrait se connecter manuellement en se rendant sur l'écran de connexion.

    Mettez à jour signUpWithCredentials comme suit :

    // 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. La fonction doit être mise à jour pour être async car nous utiliserons await to pendant le processus d'inscription.
    2. Nous devons créer des userAttributes pour intégrer l'e-mail de l'utilisateur dans le processus d'inscription.
    3. Nous insérerons le nom d'utilisateur et le mot de passe fournis par les informations d'identification, ainsi que les attributs de l'utilisateur contenant l'e-mail pour s'inscrire avec Cognito. Comme il s'agit d'un processus asynchrone, nous devons utiliser le mot-clé await.
    4. Si nous obtenons un résultat, l'étape suivante consistera à confirmer l'adresse e-mail. Si, pour quelque raison que ce soit, la procédure d'inscription est terminée, nous nous contenterons de connecter l'utilisateur à l'application.
    5. Les identifiants d'inscription SignUpCredentials seront stockés dans _credentials pour que l'utilisateur puisse confirmer son adresse e-mail.
    6. Nous mettons à jour l'AuthState en statut confirmation comme auparavant, mais uniquement après une inscription réussie et la constatation que le processus d'inscription n'est pas terminé.
    7. Si la procédure d'inscription échoue pour quelque raison que ce soit, nous enregistrons simplement l'erreur dans les journaux.

    Mettez à jour verifyCode comme suit :

    // 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. Tout comme pour signUpWithCredentials, verifyCode doit également être marqué comme une fonction asynchrone.
    2. Nous utiliserons _credentials pour fournir le nom d'utilisateur et passer le code saisi de VerificationPage à confirmSignUp.
    3. Si le résultat de confirmSignUp indique que l'inscription est terminée, nous essayons alors de connecter l'utilisateur avec le _credentials créé lors de l'inscription. Il convient de noter que nous ne mettons plus à jour l'AppState pendant la phase de validation, car l'utilisateur doit toujours se connecter à Amplify.
    4. Si l'inscription n'est pas complète, utilisez le résultat pour savoir quelles étapes supplémentaires doivent être prises pour compléter l'inscription. Cela ne devrait pas survenir dans notre application.

    Nous avons mis en place la partie inscription de notre flux d'authentification, mais il nous faut maintenant mettre à jour la partie connexion. Mettez à jour loginWithCredentials comme suit :

    // 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. Étant donné que loginWithCredentials prend AuthCredentials comme paramètre, il fonctionnera indifféremment avec LoginCredentials ou SignUpCredentials.
    2. Nous soumettons le nom d'utilisateur et le mot de passe AuthCredentials à la méthode d'ouverture de session Amplify et attendons le résultat.
    3. Si la connexion est réussie et que la propriété isSignedIn du résultat confirme que l'utilisateur est maintenant connecté, nous mettons à jour l'état de la session.
    4. Nous ne devrions pas aboutir à cet état dans notre application. Si l'utilisateur saisit des informations d'identification erronées ou reçoit une autre erreur, cela devrait déclencher notre catch block.

    Maintenant, mettez à jour la méthode logOut :

    void logOut() async {
     try {
       // 1
       await Amplify.Auth.signOut();
    
       // 2
       showLogin();
     } on AuthError catch (authError) {
       print('Could not log out - ${authError.cause}');
     }
    }
    1. Lorsque nous appelons Auth.signOut() sans passer par aucune option, l'utilisateur est déconnecté uniquement de cet appareil, au lieu d'être déconnecté de tous les appareils.
    2. Nous pouvons réutiliser notre méthode showLogin() pour mettre à jour l'état et ramener l'utilisateur à l'écran de connexion une fois que la déconnexion est réussie.

    Pour finir, nous devons être en mesure de connecter automatiquement l'utilisateur s'il ferme l'application mais s'est déjà connecté lors d'une session précédente. Ajoutez cette dernière fonction à AuthService.

    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 tentera d'obtenir l'AuthSession actuelle ; si elle aboutit, l'utilisateur sera connecté. Si la tentative de récupération échoue, cela signifie que l'utilisateur n'est pas connecté et qu'il doit revenir à LoginPage.

    Pour le moment, nous appelons showLogin par la méthode initState de _MyAppState. Modifions cela en checkAuthStatus :

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

    Ces modifications sont les seules nécessaires pour compléter notre flux d'authentification existant. Générez et exécutez l'application et vous devriez pouvoir vous inscrire, confirmer votre adresse e-mail, vous déconnecter, puis vous reconnecter.

Conclusion

Vous avez ajouté avec succès l'authentification des utilisateurs à votre application de galerie de photos ! Dans le module suivant, nous allons ajouter le stockage à votre application.

Ce module vous a-t-il été utile ?

Augmenter la capacité de stockage