Configurazione e utilizzo dell'interfaccia utente ospitata di Amazon Cognito e degli endpoint di federazione

Un pool di utenti Amazon Cognito con un dominio è un server di autorizzazione conforme a OAuth-2.0 e un' ready-to-use interfaccia utente ospitata (UI) per l'autenticazione. Il server di autorizzazione instrada le richieste di autenticazione, emette e gestisce i token Web JSON (JWT) e fornisce informazioni sugli attributi utente. L'interfaccia utente ospitata è una raccolta di interfacce Web per attività di base di registrazione, accesso, autenticazione a più fattori e reimpostazione della password nel pool di utenti. È anche un hub centrale per l'autenticazione con i provider di identità di terze parti () IdPs che associ alla tua app. L'app può richiamare l'interfaccia utente ospitata e gli endpoint di autorizzazione quando desideri autenticare e autorizzare gli utenti. Puoi adattare l'esperienza utente dell'interfaccia utente ospitata al tuo marchio con il tuo logo e la personalizzazione CSS. Per ulteriori informazioni sui componenti dell'interfaccia utente ospitata e del server di autorizzazione, consulta Documentazione di riferimento degli endpoint di federazione del pool di utenti e dell'interfaccia utente ospitata.

Nota

L'interfaccia utente ospitata di Amazon Cognito non supporta l'autenticazione personalizzata con trigger Lambda di richiesta di autenticazione personalizzati.

Argomenti

• Configurazione dell'interfaccia utente ospitata con AWS Amplify
• Configurazione dell'interfaccia utente ospitata con la console Amazon Cognito
• Visualizzazione della pagina di accesso
• Dettagli sull'interfaccia utente ospitata dei pool di utenti di Amazon Cognito
• Configurazione di un dominio di bacino d'utenza
• Personalizzazione delle pagine Web di registrazione e accesso integrate
• Registrazione e accesso con l'interfaccia utente ospitata

Configurazione dell'interfaccia utente ospitata con AWS Amplify

Se usi AWS Amplify per aggiungere l'autenticazione alla tua app web o mobile, puoi configurare l'interfaccia utente ospitata utilizzando l'interfaccia a riga di comando (CLI) e le librerie nel AWS Amplify framework. Per aggiungere l'autenticazione all'App, utilizzare la CLI AWS Amplify per aggiungere la categoria Auth al progetto. Quindi, nel codice client, usi le AWS Amplify librerie per autenticare gli utenti con il tuo pool di utenti Amazon Cognito.

È possibile visualizzare un'interfaccia utente ospitata preconfigurata oppure è possibile federare gli utenti tramite un endpoint OAuth 2.0 che reindirizza a un provider di accesso social, ad esempio Facebook, Google, Amazon o Apple. Dopo che un utente ha eseguito correttamente l'autenticazione con il provider di contenuti social, AWS Amplify crea un nuovo utente nel bacino d'utenza, se necessario, e fornisce all'app il token OIDC dell'utente.

Gli esempi seguenti mostrano come AWS Amplify configurare l'interfaccia utente ospitata con i provider di social network nell'app.

• AWS Amplify autenticazione per JavaScript.

• AWS Amplify autenticazione per Swift.

• AWS Amplify autenticazione per Flutter.

• AWS Amplify autenticazione per Android.

Configurazione dell'interfaccia utente ospitata con la console Amazon Cognito

Creazione di un client dell'App

1. Passa alla console Amazon Cognito. Se richiesto, inserisci le tue AWS credenziali.

2. Scegli User Pools (Pool di utenti).

3. Scegli un bacino d'utenza esistente dall'elenco o creane uno nuovo.

4. Seleziona la scheda App integration (Integrazione App).

5. Alla voce App clients (Client dell'App), seleziona Create an App client (Crea un client dell'App).

6. Selezionare un App type (Tipo di App): Public client (Client pubblico), Confidential client (Client riservato), oppure Other (Altro). Un client pubblico in genere opera dai dispositivi degli utenti e utilizza API non autenticate e autenticate con token. Un client riservato in genere opera da un'app su un server centrale di cui ti fidi con segreti client e credenziali API e utilizza intestazioni e credenziali di autorizzazione per firmare le richieste. AWS Identity and Access Management Se il tuo caso d'uso è diverso dalle impostazioni preconfigurate del client dell'App per un Public client (Client pubblico) o Confidential client (Client riservato), seleziona Other (Altro).

7. Inserisci un nome del client dell'App.

8. Seleziona i Authentication flows (Flussi di autenticazione) che desideri per entrare nel tuo client App.

9. Configurazione di Authentication flow session duration (Durata della sessione del flusso di autenticazione). Questo è il tempo a disposizione degli utenti per completare ogni verifica di autenticazione prima della scadenza del token di sessione.

10. (Facoltativo) Configura la scadenza del token.

    1. Specifica la scadenza del token di aggiornamento del client dell'App. Il valore predefinito è 30 giorni. Puoi modificarlo con qualsiasi valore compreso tra 1 ora e 10 anni.

    2. Specifica la scadenza del token di accesso del client dell'App. Il valore predefinito è 1 ora. Puoi modificarlo con qualsiasi valore compreso tra 5 minuti e 24 ore.

    3. Specifica la scadenza del token ID del client dell'App. Il valore predefinito è 1 ora. Puoi modificarlo con qualsiasi valore compreso tra 5 minuti e 24 ore.

       Importante

       Se utilizzi l'interfaccia utente ospitata e configuri un valore minimo inferiore a un'ora per i token, l'utente sarà in grado di utilizzare i token in base alla durata dei cookie di sessione, attualmente impostata su un'ora.

11. Scegli Generate client secret (Genera segreto client) per fare in modo che Amazon Cognito generi un segreto client per te. I segreti client sono generalmente associati ai client riservati.

12. Scegli se vuoi abilitare l'opzione Enable token revocation (Abilita la revoca dei token) per questo client dell'App. Ciò aumenterà le dimensioni dei token. Per ulteriori informazioni, consulta Revoking Tokens (Revoca dei token).

13. Scegli se desideri impedire messaggi di errore che rivelano l'esistenza dell'utente per questo client dell'App. Amazon Cognito risponderà alle richieste di accesso per utenti inesistenti con un messaggio generico che indica che il nome utente o la password non erano corretti.

14. (Facoltativo) Configura le autorizzazioni di lettura e scrittura dell'attributo) per questo client dell'App. Il client dell'App può avere l'autorizzazione di leggere e scrivere solo un sottoinsieme limitato dello schema degli attributi del bacino d'utenza.

15. Scegli Create (Crea).

16. Fai attenzione all'ID client. Questo identificherà il client dell'App nelle richieste di registrazione e di accesso.

Configurazione dell'app

1. Nella scheda App integration (Integrazione app), seleziona il client dell'App alla voce App clients (Client dell'app). Controlla le informazioni attuali sull'Hosted UI (Interfaccia utente ospitata).

2. Add a callback URL (Aggiunta di un URL di callback) alla voce Allowed callback URL(s) (Url di callback consentiti). Un URL di callback indica dove l'utente deve essere reindirizzato dopo aver effettuato correttamente l'accesso.

3. Add a sign-out URL (Aggiungi un URL di disconnessione) alla voce Allowed sign-out URL(s) (Url di disconnessione consentiti). Un URL di disconnessione indica dove l'utente deve essere reindirizzato dopo la disconnessione.

4. Aggiungere almeno una delle voci dell'elenco di opzioni elencate in Identity providers (Provider di identità).

5. Alla voce OAuth 2.0 grant types (Tipi di concessione OAuth 2.0) seleziona Authorization code grant (Concessione del codice di autorizzazione) per restituire un codice di autorizzazione che viene quindi scambiato per i token dei bacini d'utenza. Poiché i token non vengono mai esposti direttamente a un utente finale, vi sono meno probabilità che vengano compromessi. Tuttavia, per un'applicazione personalizzata è obbligatorio nel back-end scambiare il codice di autorizzazione per i token dei bacini d'utenza. Per motivi di sicurezza, ti suggeriamo di utilizzare il flusso di concessione del codice di autorizzazione insieme al protocollo Proof Key for Code Exchange (PKCE) per le app mobili.

6. Alla voce OAuth 2.0 grant types (Tipi di concessione OAuth 2.0), seleziona Implicit grant (Concessione implicita) per fare in modo che Amazon Cognito restituisca i token Web JSON (JWT) del bacino d'utenza. È possibile usare questo flusso quando non è disponibile un back-end per scambiare un codice di autorizzazione per i token. È inoltre utile per il debug dei token.

7. È possibile abilitare sia la Authorization code grant (Concessione del codice di autorizzazione) sia la Implicit code grant (Concessione implicita del codice) e usare entrambe in base alle esigenze. Se né il le concessioni per il Codice di autorizzazione né quelle per il Codice implicito sono selezionate e il client dell'app ha un segreto client, puoi abilitare le concessioni delle Client credentials (Credenziali del client). Seleziona le Client credentials (Credenziali del client) solo se è necessario che l'app richieda i token di accesso a proprio nome e non a nome di un utente.

8. Seleziona gli OpenID Connect scopes (ambiti di OpenID Connect) che intendi autorizzare per questo client dell'app.

9. Scegli Save changes (Salva modifiche).

Configura un dominio

1. Passa alla scheda App Integration (Integrazione App) per il bacino d'utenza.

2. Accanto a Dominio, seleziona Operazioni, quindi seleziona Create custom domain (Crea dominio personalizzato) o Create Cognito domain (Crea dominio Cognito). Se hai già configurato un dominio del bacino d'utenza, scegli l'opzione Delete Cognito domain (Elimina dominio Cognito) o Delete custom domain (Elimina dominio personalizzato) prima di creare un nuovo dominio personalizzato.

3. Inserisci un prefisso dominio disponibile da utilizzare con un Dominio Cognito. Per informazioni sulla configurazione di un Dominio personalizzato, consulta la sezione Utilizzo del proprio dominio per l'interfaccia utente ospitata

4. Scegli Create (Crea).

Visualizzazione della pagina di accesso

Nella console Amazon Cognito, seleziona il pulsante View Hosted UI (Visualizza l'interfaccia utente ospitata), nell'area App clients and analytics (Client di app e analisi dei dati) nella scheda App integration (Integrazione app). Questo pulsante ti reindirizza alla pagina di accesso nell'interfaccia utente ospitata con i seguenti parametri di base.

• ID del client dell'app

• Richiesta di concessione del codice di autorizzazione

• Richiesta per tutti gli ambiti attivati per il client dell'app corrente

• Primo URL di callback nell'elenco per il client dell'app corrente

Il pulsante View hosted UI (Visualizza l'interfaccia utente ospitata) è utile quando si desidera testare le funzioni di base dell'interfaccia utente ospitata. Puoi personalizzare l'URL di accesso con parametri aggiuntivi e modificati. Nella maggior parte dei casi, i parametri generati automaticamente dal link View hosted UI (Visualizza l'interfaccia utente ospitata) non soddisfano completamente le esigenze della app. In questi casi, devi personalizzare l'URL richiamato dall'app in fase di accesso degli utenti. Per ulteriori informazioni sui parametri di accesso e sui relativi valori, consulta Documentazione di riferimento degli endpoint di federazione del pool di utenti e dell'interfaccia utente ospitata.

La pagina Web di accesso dell'interfaccia utente ospitata utilizza il seguente formato URL. In questo esempio viene richiesta una concessione del codice di autorizzazione con il parametro response_type=code.

https://<your domain>/oauth2/authorize?response_type=code&client_id=<your app client id>&redirect_uri=<your callback url>

Puoi recuperare la stringa di dominio del pool di utenti dalla scheda Integrazione di app. Nella stessa scheda, puoi identificare gli ID client dell'app, i relativi URL di callback, gli ambiti consentiti e altre configurazioni in Client di app e analisi dei dati.

Quando si accede all'endpoint /oauth2/authorize con i parametri personalizzati, Amazon Cognito ti reindirizza all'endpoint /oauth2/login o, se è presente un parametro identity_provider o idp_identifier, ti reindirizza in modalità invisibile all'utente alla pagina di accesso del gestore dell'identità digitale (IdP). Per un URL di esempio che ignora l'interfaccia utente ospitata, consulta Avvio della sessione SAML nei bacini d'utenza di Amazon Cognito.

Esempio di richiesta di interfaccia utente ospitata per una concessione implicita

Puoi visualizzare la pagina Web di accesso dell'interfaccia utente ospitata tramite il seguente URL per la concessione implicita del codice dove response_type=token. Dopo aver eseguito correttamente l'accesso, Amazon Cognito restituisce i token del bacino d'utenza alla barra degli indirizzi del browser Web.

            https://mydomain.us-east-1.amazoncognito.com/authorize?response_type=token&client_id=1example23456789&redirect_uri=https://mydomain.example.com
        

I token di identità e accesso vengono visualizzati come parametri aggiunti all'URL di reindirizzamento.

Di seguito è riportato un esempio di risposta da una richiesta di concessione implicita.

            https://mydomain.example.com/#id_token=eyJraaBcDeF1234567890&access_token=eyJraGhIjKlM1112131415&expires_in=3600&token_type=Bearer  
        

Dettagli sull'interfaccia utente ospitata dei pool di utenti di Amazon Cognito

L'interfaccia utente ospitata e la conferma degli utenti come amministratore

Per gli utenti locali del pool di utenti, l'interfaccia utente ospitata funziona meglio quando si configura il pool di utenti su Consenti a Cognito di inviare automaticamente messaggi per la verifica e la conferma. Quando abiliti questa impostazione, Amazon Cognito invia un messaggio con un codice di conferma agli utenti che effettuano la registrazione. Quando invece confermi gli utenti come un amministratore del pool di utenti, l'interfaccia utente ospitata visualizza un messaggio di errore dopo la registrazione. In questo stato, Amazon Cognito ha creato il nuovo utente, ma non è stato in grado di inviare un messaggio di verifica. Puoi comunque confermare gli utenti come un amministratore, ma potrebbero contattare il supporto tecnico dopo che hanno rilevato un errore. Per ulteriori informazioni sulla conferma amministrativa, consulta Permettere agli utenti di registrarsi ma confermarli come un amministratore del pool di utenti.

Visualizzazione delle modifiche alla configurazione dell'interfaccia utente ospitata

Se le modifiche alle pagine dell'interfaccia utente ospitata non vengono visualizzate immediatamente, attendi qualche minuto, quindi aggiorna la pagina.

Decodifica dei token del pool di utenti

I token dei pool di utenti di Amazon Cognito vengono firmati utilizzando un algoritmo RS256. Puoi decodificare e verificare i token del pool di utenti utilizzando AWS Lambda, vedi Decodificare e verificare i token Amazon Cognito JWT su. GitHub

L'interfaccia utente e la versione TLS ospitate

L'interfaccia utente ospitata richiede una versione TLS minima 1.0 e supporta la versione TLS 1.2. Poiché Amazon Cognito gestisce la configurazione dell'interfaccia utente ospitata e degli endpoint del server di autorizzazione, non puoi modificare i requisiti TLS del dominio del tuo pool di utenti.

L'interfaccia utente ospitata e le policy CORS

L'interfaccia utente ospitata di Amazon Cognito non supporta le policy di condivisione di risorse tra origini (CORS) personalizzate. Una policy CORS nell'interfaccia utente ospitata impedirebbe agli utenti di passare parametri di autenticazione nelle loro richieste. Implementa invece una policy CORS nel front-end Web della tua app. Amazon Cognito restituisce un'intestazione di risposta Access-Control-Allow-Origin: * per richieste ai seguenti endpoint OAuth.

1. Endpoint Token

2. Endpoint Revoke

3. Endpoint UserInfo