Autenticazione angolare con AWS Cognito e Amplify

Blog

Autenticazione angolare con AWS Cognito e Amplify

In questo articolo, esamineremo l'implementazione di una soluzione serverless con la libreria AWS Amplify con applicazioni Angular8.



Creeremo un'autenticazione utente completamente funzionante che include la registrazione dell'utente, la verifica dell'e-mail, l'accesso e la disconnessione. Per far accadere tutte queste cose utilizzeremo AWS Cognito, un comodo servizio fornito da AWS.

Per iniziare, è necessario un account AWS e, se non si dispone di un account, è possibile creare un account gratuito su AWS. Se hai già un account, sei a posto.



TL; DR

Che cos'è l'amplificazione?

Amplify è una libreria open source che ti aiuta a creare facilmente un back-end serverless flessibile, affidabile e scalabile e ad integrarlo con il tuo front-end. Questo è stato lanciato per la prima volta a novembre ad AWS re:Invent 2017.



Un framework client ponderato e basato su categorie per la creazione di app Web e mobili scalabili — AWS

Il framework Amplify è costituito da tre caratteristiche chiave:

  • Librerie: vieni con una serie di librerie complete per JavaScript, Android e iOS associate a servizi cloud, come analisi, autenticazione, archiviazione, notifiche, REST e GraficoQL API, AR/VR.
  • Amplify CLI: strumento da riga di comando per la configurazione e la gestione di infrastrutture serverless su AWS.
  • Componenti dell'interfaccia utente: set di fantastici componenti dell'interfaccia utente specifici del framework per React, React Native, Angular, Ionico , e Visto per l'autenticazione, il selettore di foto, ecc. per semplificare i tuoi sviluppi.

Questi componenti dell'interfaccia utente sono dotati di temi molto utili, ma in questo tutorial svilupperemo i nostri componenti dell'interfaccia utente.

Iniziamo

Per iniziare, dobbiamo prima installare e configurare l'AWS Amplify CLI sul nostro computer locale. Useremo npm per installare la CLI e questo richiederà Node.js e npm installati sulla tua macchina

Assicurati che la tua versione del nodo sia almeno 8.x.x o successiva e che la tua versione di npm sia 5.x.x o successiva. In caso contrario, è necessario aggiornare il nodo e npm per soddisfare almeno i requisiti minimi.

Per installare Amplify CLI nel tuo terminale, esegui semplicemente il seguente comando, questo installerà globalmente la CLI sul tuo computer locale:

npm install -g @aws-amplify/cli

Dopo aver installato la CLI, devi configurarla creando un utente IAM per creare e gestire le tue risorse AWS. Per farlo, esegui semplicemente:

amplify configure

Questo processo ti guiderà attraverso diversi passaggi.

  • Questo aprirà la console AWS nel tuo browser e dovrai accedere al tuo account e una volta terminato, devi premere invio nel terminale per continuare il processo.
  • Successivamente, ti verrà chiesto di specificare la regione AWS: us-est-1 (Sto selezionando us-east-1, North Virginia come mia regione, questo può variare in base alla tua regione).
  • Successivamente, ti verrà chiesto di specificare il nome utente del nuovo utente IAM: |_+_| (puoi usare qualsiasi nome in base alle tue preferenze)
  • Non appena premi invio, ti reindirizzerà alla console di gestione IAM. Puoi cliccare prossimo per completare la creazione dell'utente e lasceremo le impostazioni e le autorizzazioni predefinite. Puoi andare al terminale e premere accedere continuare.

Successivamente, chiederà:

  • |_+_|: YOUR_ACCESS_KEY_ID
  • |_+_|: YOUR_SECRET_ACCESS_KEY

(Puoi prendere queste chiavi dal tuo utente IAM.)

Successivamente, chiederà un nome di profilo: (predefinito) e lo lascio come predefinito, ma puoi dare un nome di profilo per questo.

Questo creerà/aggiornerà il profilo AWS sul tuo computer locale associato al precedente |_+_| e |_+_|. Con questo passaggio, hai impostato correttamente il nuovo utente.

datadog-lambda-js

In alternativa, puoi guardare un video-tutorial sul processo di configurazione.

Passo successivo…

Congratulazioni!

Con questo, ora hai installato e configurato con successo AWS Amplify sul tuo computer locale.

database di esportazione della bussola mongodb

Creazione del progetto angolare

Successivamente, dobbiamo creare il nostro progetto Angular. Utilizzerò l'Angular CLI per generare una nuova app Angular e per questo è necessario che Angular CLI sia installata sul tuo computer.

In caso contrario, esegui semplicemente il comando seguente per installare l'Angular CLI a livello globale:

angular-amplify-demo

Per creare ed eseguire una nuova app, esegui semplicemente:

accessKeyId

Questo avvierà la tua applicazione e potrai accedere a localhost:4200 dal tuo browser per aprire l'applicazione.

Installa le librerie Amplify

Per iniziare con Amplify, dobbiamo installare |_+_| e |_+_| librerie come dipendenze della nostra applicazione Angular.

Il |_+_| pacchetto è un set di componenti Angular e un provider Angular che aiuta a integrare la tua applicazione con la libreria AWS Amplify. Supporta Angular 5.0 o superiore.

Configura il back-end

Ora dobbiamo configurare il nostro back-end per il progetto e abilitare l'autenticazione con i pool di utenti di Amazon Cognito. Per inizializzare il progetto di back-end, esegui semplicemente:

secretAccessKey

E questo ti guiderà attraverso una serie di domande necessarie per impostare il nostro back-end.

  • Scegli il tuo editor predefinito: Codice di Visual Studio . (Puoi scegliere l'editor di codice che stai utilizzando.)
  • Scegli il tipo di app che stai utilizzando: JavaScript.
  • Quale framework JavaScript stai utilizzando: Angular.
  • Percorso della directory di origine: |_+_|.(Devi specificare il percorso della directory di origine del tuo progetto, accetterò l'impostazione predefinita premendo invio poiché |_+_| è la nostra directory di origine.)
  • Percorso della directory di destinazione: |_+_|. (Per impostazione predefinita, Angular creerà una sottocartella con lo stesso nome, quindi assicurati di specificare la sottocartella come percorso della directory di destinazione.)
  • Costruisci comando: |_+_|
  • Comando di avvio: |_+_|
  • Vuoi utilizzare un profilo AWS? Sì.
  • Scegli il profilo che desideri utilizzare: predefinito. (Se hai dato un nome al tuo profilo durante il processo di configurazione di Amplify, assicurati di selezionare quel nome come profilo.)

E con ciò, ci vorrà del tempo per inizializzare il progetto nel cloud e, una volta terminato, vedrai un messaggio di successo nel tuo terminale con un sacco di altre informazioni.

Ora abbiamo configurato con successo il nostro back-end.

Quindi, dobbiamo configurare AWS Cognito creando un pool di utenti Amazon Cognito, che è un servizio di directory utente completo che ci aiuta a gestire la registrazione e l'autenticazione degli utenti.

Per iniziare, esegui semplicemente il comando:

accessKeyId

E ancora, questo ti guiderà attraverso una serie di domande necessarie per impostare i nostri pool di utenti.

  • Vuoi utilizzare l'autenticazione predefinita e la configurazione di sicurezza: Sì, usa la configurazione predefinita.

Ma sceglierò la configurazione predefinita in modo che configuri immediatamente Cognito localmente. Ora dobbiamo pubblicare le nostre configurazioni sul cloud in modo da poter iniziare a utilizzare il servizio.

Per farlo, esegui semplicemente:

secretAccessKey

Questo ti mostrerà un riepilogo della tua configurazione in una vista tabellare e potrai confermare dicendo: Sì.

Questo processo richiederà del tempo per creare il nostro pool di utenti Cognito e il pool di identità Congito e, una volta terminato, mostrerà un messaggio di successo nel tuo terminale.

Puoi visitare la tua console AWS per verificare se il pool di utenti è stato creato correttamente (assicurati di aver selezionato la regione corretta).

Questo è il titolo dell'immagine

Qual è il prossimo?

Ora che siamo a posto con il nostro back-end, dobbiamo configurare la nostra applicazione front-end per il processo di autenticazione.

Ora, se l'hai notato, è stato creato un nuovo file chiamato |_+_| all'interno della tua applicazione Angular, che contiene tutta la configurazione relativa ad AWS Cognito.

Questo è il titolo dell'immagine

Come passaggio successivo, dobbiamo importare queste configurazioni nella nostra app. Nel tuo |_+_| file, è necessario aggiungere le seguenti importazioni:

npm install -g @angular/cli

main.ts

Con Angular 6+, il team di Angular ha deciso di rimuovere il supporto per le variabili globali e di processo nel browser, quindi tutte le applicazioni Angular 6+ non includono shim per questo.

Per aggiungere il supporto, devi aggiungere il seguente codice nel tuo |_+_| file:

ng new aws-amplify-cognito-authentication cd aws-amplify-cognito-authentication ng serve

polyfills.ts

Successivamente, dobbiamo includere |_+_| pacchetto che dovrebbe essere incluso nel |_+_| opzione del compilatore nel tuo |_+_| file con cui lavorare |_+_|.

aws-amplify

Tutto pronto, registriamo il nostro primo utente nel pool di AWS Cognito.

lunga vita al token dfo

Iscriviti

Per inviare il nostro oggetto utente a Cognito, è necessario importare il |_+_| libreria al tuo componente.

aws-amplify-angular

Per creare un nuovo utente nel tuo pool di utenti:

aws-amplify-angular

user-authentication.component.ts

Il |_+_| Il metodo prende l'oggetto utente come argomento con i campi obbligatori per la registrazione dell'utente, che assomiglia a questo, nel nostro caso:

amplify init

Ora, quando passi |_+_|, devi assicurarti di aver impostato il nome utente come metodo di accesso nel tuo pool di utenti Cognito.

Se hai selezionato l'e-mail come metodo di accesso, devi inviare l'e-mail dell'utente come proprietà username nell'oggetto utente.

Puoi controllare quale attributo hai impostato come metodo di accesso nel pool di utenti di Cognito visitando il |_+_| scheda sotto |_+_| nel tuo pool di utenti Cognito.

Questo è il titolo dell'immagine

In questo esempio, ho impostato |_+_| come opzione di accesso.

Questo |_+_| promise restituisce un oggetto dati che è un tipo di |_+_| e se ti iscrivi con successo, riceverai un codice di verifica a sei cifre inviato alla tua e-mail per verificare il tuo indirizzo e-mail.

Verifica l'e-mail

Per verificare il tuo indirizzo email:

src

user-authentication.component.ts

Il |_+_| la promessa prende due argomenti:

  • |_+_|: Nome utente o indirizzo e-mail che abbiamo scelto per l'accesso dell'utente. (Nel nostro caso, è l'indirizzo email.)
  • |_+_|: codice di verifica a sei cifre che è stato inviato al tuo indirizzo email.

Registrazione

Per accedere al tuo utente appena creato:

src

user-authentication.component.ts

Il |_+_| promise accetta un argomento che include il nome utente e la password:

dist/aws-amplify-cognito-authentication

E questo restituisce il |_+_| oggetto che conterrà il |_+_| e |_+_| proprietà che è possibile utilizzare per verificare se l'utente ha abilitato l'autenticazione a due fattori, ecc.

come caricare file nel repository github

Disconnessione

Per disconnettere l'utente dalla sessione corrente:

npm run-script build

dashboard.component.ts

Ciò cancellerà la sessione utente corrente revocando il token di autenticazione.

Se vuoi disconnettere l'utente da tutti i dispositivi, devi passare una configurazione aggiuntiva al tuo metodo di disconnessione, in questo modo:

ng serve

Ciò garantirà che l'utente sia disconnesso da tutti i dispositivi se l'utente ha effettuato l'accesso da più dispositivi.

Conclusione

Congratulazioni, sei stato in grado di creare con successo un'autenticazione utente completamente funzionante utilizzando AWS Amplify e AWS Cognito con Angular, tramite:

  • Installazione dell'AWS Amplify CLI sul nostro computer locale e configurazione con il nostro account AWS.
  • Configurazione del back-end serverless con l'aiuto di Amplify CLI e del servizio cloud AWS Cognito per l'autenticazione degli utenti.
  • Creazione di un progetto Angular 8 utilizzando la CLI Angular.
  • Utilizzo delle librerie aws-amplify per registrarsi, confermare la password, accedere e disconnettere l'utente.

Sebbene questo articolo sia un po' lungo, abbiamo ancora trattato solo le funzionalità di base fornite dalla libreria aws-amplify.

Puoi esplorare più funzionalità come cambiare password, dimenticare la password, verificare il numero di telefono, ecc. che sono legate alla registrazione dell'utente facendo riferimento al funzionario Amplifica la documentazione .

Inoltre, ecco il completo Progetto GitHub .

Grazie per aver letto!

#angular #javascript #programmazione