Nozioni di base su AWS

Creazione di un'applicazione Flutter

Creazione di una semplice applicazione Flutter utilizzando AWS Amplify

Modulo 3: aggiunta di un'autenticazione

In questo modulo verrà utilizzata l'interfaccia a riga di comando (CLI) di Amplify per configurare e aggiungere un'autenticazione alla tua app.

Introduzione

La prima categoria di Amplify che aggiungerai all'applicazione sarà Autenticazione. Dietro le quinte, Amplify sfrutta Amazon Cognito per la gestione dei pool di utenti e dei pool di identità.

In questo modulo, scoprirai come registrare, confermare, far accedere e disconnettere un utente. La funzionalità verrà implementata per ogni schermata con l'aggiunta di poche righe di codice.

Avrai modo di approfondire i seguenti aspetti

  • Configurazione della categoria Autenticazione
  • Registrazione di un utente
  • Verifica dell'indirizzo e-mail di un utente
  • Accesso di un utente autenticato
  • Disconnessione di un utente autenticato

Concetti chiave

Autenticazione: l'autenticazione è il processo di verifica e gestione di un utente che gli consente di interagire con le risorse dell'applicazione.

 Tempo richiesto per il completamento

10 minuti

 Servizi utilizzati

Implementazione

  • Creazione del servizio di autenticazione

    Per aggiungere il servizio di autenticazione al progetto Amplify, dobbiamo eseguire questo comando nel terminale, nella directory radice del progetto:

    amplify add auth

    Ti verranno poste alcune domande relative alla configurazione del servizio Autenticazione. Premi il tasto Invio per selezionare il valore predefinito per ciascuna domanda. L'output risultante dovrebbe avere il seguente aspetto:

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

    Una volta configurata interamente la risorsa Auth, l'output dovrebbe essere simile a questo:

    Successfully added resource photogallery42b5391b locally

    Come indicato nell'output di cui sopra, la risorsa è stata aggiunta solo localmente. Per configurare il back-end con le modifiche apportate in locale, dobbiamo eseguire questo comando:

    amplify push

    Prima di inviare le modifiche locali al back-end, l'interfaccia a riga di comando di Amplify mostrerà un report di stato per garantire che tu intenda eseguire il push delle seguenti modifiche:

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

    Prima di inviare le modifiche locali al back-end, l'interfaccia a riga di comando di Amplify mostrerà un report di stato per garantire che tu intenda eseguire il push delle seguenti modifiche:

    ✔ All resources are updated in the cloud

    Puoi anche verificare che la risorsa Auth sia stata configurata adeguatamente visualizzando il file /lib/amplifyconfiguration.dart ed esaminando i valori di autenticazione.

  • Installazione della dipendenza

    Torna a Visual Studio Code, apri pubspec.yaml e aggiungi la seguente dipendenza:

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

    Ora salva il file in modo che Visual Studio Code installi il plug-in Amplify Auth Cognito. Se la dipendenza non viene installata al momento del salvataggio, puoi anche eseguire $ flutter pub get dal terminale.

    L'output dovrebbe essere questo:

    exit code 0
  • Configurazione del plug-in

    Ora che la dipendenza Auth è installata, possiamo aggiungere il plug-in di autenticazione all'istanza di Amplify in _MyAppState._configureAmplify() del file main.dart:

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

    Ora esegui l'applicazione e conferma che i log ricevono ancora il messaggio di corretta esecuzione.

    Se continui a ricevere il messaggio di corretta esecuzione, puoi iniziare a implementare la funzionalità del flusso di autenticazione. In caso contrario, ripeti le fasi precedenti o visita il modulo Inizializzazione di Amplify e assicurati di aver eseguito tutte le fasi illustrate lì.

  • Implementazione della funzionalità

    Torna al modulo Creazione di un'applicazione Flutter; abbiamo implementato l'AuthService per gestire l'aggiornamento dell'AuthState sulla base della funzione chiamata. Ora dobbiamo aggiornare ciascuna delle funzioni in modo da aggiornare lo stato solo quando l'utente completa correttamente ogni processo.

    In auth_service.dart, aggiungi una proprietà AuthCredentials in AuthService:

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

    Questa proprietà servirà per mantenere in memoria le credenziali di registrazione durante il processo di registrazione, così che un utente possa effettuare l'accesso immediatamente dopo la verifica del suo indirizzo e-mail. Se non abbiamo eseguito questa operazione, l'utente dovrebbe effettuare l'accesso manualmente passando alla schermata di accesso.

    Aggiorna signUpWithCredentials con quanto segue:

    // 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 funzione deve essere aggiornata in modo da essere asincrona, perché durante il processo di registrazione utilizzeremo await.
    2. Dobbiamo creare userAttributes da trasmettere nell'indirizzo e-mail dell'utente come parte della registrazione.
    3. Trasmetteremo il nome utente e la password fornita dalle credenziali, oltre che gli attributi dell'utente contenenti l'indirizzo e-mail per la registrazione con Cognito. Poiché si tratta di un processo asincrono, dobbiamo utilizzare la parola chiave "await".
    4. Se otteniamo correttamente un risultato, la fase successiva consisterà nella verifica dell'indirizzo e-mail. Se il processo di registrazione è completo per qualsiasi motivo, effettueremo semplicemente l'accesso dell'utente all'applicazione.
    5. Archiviamo le SignUpCredentials in _credentials per quando l'utente verifica il proprio indirizzo e-mail.
    6. Aggiorniamo l'AuthState in verification (Verifica), come abbiamo fatto prima, ma solo dopo aver eseguito correttamente l'accesso e aver stabilito che il processo di registrazione non è completo.
    7. Se la registrazione non riesce per qualche motivo, registreremo semplicemente l'errore nei log.

    Aggiorna verifyCode con questo:

    // 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. Come abbiamo fatto con le signUpWithCredentials, anche verifyCode deve essere contrassegnato come funzione asincrona.
    2. Utilizzeremo _credentials per fornire il nome utente e trasmettere il codice inserito da VerificationPage per confirmSignUp.
    3. Se il risultato proveniente da confirmSignUp specifica che la registrazione è completa, tenteremo di effettuare l'accesso per l'utente con le _credentials create durante la registrazione. È importante notare che non stiamo più aggiornando l'AppState durante il caso di corretta esecuzione, perché l'utente deve ancora effettuare l'accesso ad Amplify.
    4. Se la registrazione è incompleta, utilizza il risultato per scoprire quali sono le fasi mancanti per completare la registrazione. Questo non dovrebbe accadere nella nostra applicazione.

    Abbiamo implementato la parte del flusso di autenticazione relativa alla registrazione, ma ora dobbiamo aggiornare la parte dell'accesso. Aggiorna loginWithCredentials con questo:

    // 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. Poiché loginWithCredentials richiede il parametro AuthCredentials, funzionerà indipendentemente dal fatto che sia stato trasmesso LoginCredentials o SignUpCredentials.
    2. Stiamo trasmettendo le AuthCredentials nome utente e password al metodo di accesso di Amplify e siamo in attesa del risultato.
    3. Se l'accesso riesce e la proprietà isSignedIn nel risultato conferma che l'utente ora ha effettuato l'accesso, aggiorniamo lo stato in session (Sessione).
    4. Non dovremmo raggiungere questo stato nella nostra applicazione. Se l'utente inserisce le credenziali sbagliate o riceve un qualsiasi altro errore, si verifica un blocco catch.

    Ora aggiorna il metodo logOut:

    void logOut() async {
     try {
       // 1
       await Amplify.Auth.signOut();
    
       // 2
       showLogin();
     } on AuthError catch (authError) {
       print('Could not log out - ${authError.cause}');
     }
    }
    1. Quando chiamiamo Auth.signOut() senza trasmettere alcuna opzione, l'utente verrà disconnesso solo su questo dispositivo anziché essere disconnesso su tutti i dispositivi.
    2. Quando la disconnessione è avvenuta correttamente, possiamo riutilizzare il metodo showLogin() per aggiornare lo stato e riportare l'utente alla schermata di accesso.

    Infine, dovremo essere in grado di consentire l'accesso automatico dell'utente se quest'ultimo chiude l'applicazione ma ha già effettuato l'accesso in una sessione precedente. Aggiungi questa funzione finale a 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 tenterà di ottenere la AuthSession corrente; se riesce, l'utente effettuerà l'accesso. Se il recupero non riesce, significa che l'utente non ha effettuato l'accesso e dovrà quindi visualizzare la pagina di accesso.

    Al momento, stiamo chiamando showLogin all'interno del metodo initState di _MyAppState. Cambiamolo in checkAuthStatus:

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

    Queste sono le uniche modifiche necessarie per l'integrazione del flusso di autenticazione esistente. Crea ed esegui l'applicazione: dovresti essere in grado di registrarti, confermare l'indirizzo e-mail, disconnetterti ed effettuare nuovamente l'accesso.

    EndofModule3-gif

Conclusione

Hai aggiunto correttamente l'autenticazione dell'utente all'applicazione della galleria fotografica! Nel prossimo modulo aggiungeremo storage alla tua app.

Questo modulo è stato utile?

Grazie
Facci sapere cosa ti è piaciuto.
Chiudi
Spiacenti di non esserti stati d'aiuto
C'è qualcosa di obsoleto, ambiguo o approssimativo? Aiutaci a migliorare questo tutorial con il tuo feedback.
Chiudi

Aggiunta di storage