Personalizzazione delle pagine Web di registrazione e accesso integrate - Amazon Cognito
Specificazione di un logo personalizzato per l'AppSpecificazione delle personalizzazioni CSS per l'AppSpecifica delle impostazioni di personalizzazione dell'interfaccia utente dell'App per un bacino d'utenza (AWS Management Console)Specifica delle impostazioni di personalizzazione dell'interfaccia utente dell'App per un bacino d'utenza (AWS CLI e API AWS)

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Personalizzazione delle pagine Web di registrazione e accesso integrate

È possibile utilizzare la AWS Management Console o la AWS CLI o l'API, per specificare le impostazioni di personalizzazione per l'interfaccia utente delle app integrate. È possibile caricare un'immagine del logo personalizzata da visualizzare nell'app. È inoltre possibile utilizzare fogli di stile Cascading (CSS) per personalizzare l'aspetto dell'interfaccia utente.

È possibile specificare le impostazioni di personalizzazione interfaccia utente dell'App per un singolo client (con uno specifico clientId) o per tutti i clienti (impostando il clientId su ALL). Se specifichi ALL, la configurazione di default sarà usata per ogni client che non ha nessuna personalizzazione dell'interfaccia utente impostata in precedenza. Se specifichi le impostazioni di personalizzazione dell'interfaccia utente per un determinato client, non sarà più possibile ripristinare la configurazione ALL.

Le dimensioni della richiesta che imposta la personalizzazione dell'interfaccia utente non devono essere superiori a 135 KB. In rari casi, le dimensioni della somma delle intestazioni di richiesta, del file CSS e del logo potrebbero eccedere i 135 KB. Amazon Cognito codifica il file di immagine in Base64. Ciò aumenta le dimensioni di un'immagine da 100 KB a 130 KB, mantenendo cinque KB per intestazioni della richiesta e CSS. Se le dimensioni della richiesta sono troppo elevate, la AWS Management Console o la richiesta API SetUICustomization restituisce un errore request parameters too large. Regolare l'immagine del logo in modo che le dimensioni non superino i 100 KB e le dimensioni del file CSS non siano maggiori di 3 KB. Non è possibile impostare CSS e personalizzazione del logo separatamente.

Nota

Per personalizzare l'interfaccia utente, è necessario configurare un dominio per il pool di utenti.

Amazon Cognito centra il logo personalizzato sopra i campi di input in Endpoint Login.

Scegli un file PNG, JPG o JPEG scalabile fino a 350 x 178 pixel per il logo personalizzato dell'interfaccia utente ospitata. Le dimensioni del file del logo non possono essere maggiori di 100 KB o 130 KB dopo la codifica di Amazon Cognito in Base64. Per impostare un ImageFile in SetUICustomization nell'API, converti il file in una stringa di testo con codifica Base64 oppure, nella AWS CLI, fornisci un percorso file e lascia che venga codificato da Amazon Cognito.

Specificazione delle personalizzazioni CSS per l'App

È possibile personalizzare il CSS per le pagine dell'app ospitata, con le seguenti restrizioni:

  • È possibile utilizzare uno dei seguenti nomi di classe CSS:

    • background-customizable

    • banner-customizable

    • errorMessage-customizable

    • idpButton-customizable

    • idpButton-customizable:hover

    • idpDescription-customizable

    • inputField-customizable

    • inputField-customizable:focus

    • label-customizable

    • legalText-customizable

    • logo-customizable

    • passwordCheck-valid-customizable

    • passwordCheck-notValid-customizable

    • redirect-customizable

    • socialButton-customizable

    • submitButton-customizable

    • submitButton-customizable:hover

    • textDescription-customizable

  • I valori delle proprietà possono contenere HTML, ad eccezione dei seguenti valori: @import, @supports, @page, oppure istruzioni @media o Javascript.

È possibile personalizzare le seguenti proprietà CSS.

Etichette

  • font-weight è un multiplo di 100 da 100 e 900.

Campi di input

  • width è la larghezza in percentuale del blocco contenitore.

  • height (altezza) è l'altezza del campo di input in pixel (px).

  • color (colore) è il colore del testo. Può essere un qualsiasi valore di colore dello standard CSS.

  • background-color è il colore di sfondo del campo di input. Può essere un qualsiasi valore di colore dello standard CSS.

  • border (bordo) è un valore dello standard CSS del bordo che specifica la larghezza, la trasparenza e il colore del bordo della finestra della tua app. Larghezza può essere qualsiasi valore da 1px a 100px. Trasparenza può essere solida o nessuna. Colore può essere un qualsiasi valore di colori standard.

Descrizioni testuali

  • padding-top è la quantità di padding sopra la descrizione testuale.

  • padding-bottom è la quantità di padding sotto la descrizione testuale.

  • display può essere block o inline.

  • font-size è la dimensione del font per le descrizioni testuali.

Pulsante di invio

  • font-size è la dimensione del font del testo del pulsante

  • font-weight è il peso del font del testo del pulsante bold, italic o normal.

  • margine è una stringa di quattro valori che indicano le dimensioni dei margini superiore, destro, inferiore e sinistro del pulsante.

  • font-size è la dimensione del font per le descrizioni testuali.

  • width (larghezza) è la larghezza del testo del pulsante in percentuale del blocco contenitore.

  • height (altezza) è l'altezza del pulsante in pixel (px).

  • color (colore) è il colore del testo del pulsante. Può essere un qualsiasi valore di colore dello standard CSS.

  • background-color è il colore di sfondo del pulsante. Può essere un valore di qualsiasi standard di colori.

Banner

  • spaziatura interna è una stringa di quattro valori che indicano le dimensioni della spaziatura interna superiore, destro, inferiore e sinistro del banner.

  • background-color è il colore di sfondo del banner. Può essere un qualsiasi valore di colore dello standard CSS.

Pulsante di invio con animazione al passaggio del mouse

  • color (colore) è il colore di primo piano del pulsante al passaggio del mouse. Può essere un qualsiasi valore di colore dello standard CSS.

  • background-color è il colore di sfondo del pulsante al passaggio del mouse. Può essere un qualsiasi valore di colore dello standard CSS.

Pulsante provider di identità con animazione al passaggio del mouse

  • color (colore) è il colore di primo piano del pulsante al passaggio del mouse. Può essere un qualsiasi valore di colore dello standard CSS.

  • background-color è il colore di sfondo del pulsante al passaggio del mouse. Può essere un qualsiasi valore di colore dello standard CSS.

Controllo password non valido

  • color (colore) è il colore del testo del messaggio "Password check not valid". Può essere un qualsiasi valore di colore dello standard CSS.

Contesto

  • background-color è il colore di sfondo della finestra dell'app. Può essere un qualsiasi valore di colore dello standard CSS.

Messaggi di errore

  • margine è una stringa di quattro valori che indicano le dimensioni dei margini superiore, destro, inferiore e sinistro.

  • padding è la dimensione del padding.

  • font-size è la dimensione del font.

  • width (larghezza) è la larghezza del messaggio di errore in percentuale del blocco contenitore.

  • background è il colore di sfondo del messaggio di errore. Può essere un qualsiasi valore di colore dello standard CSS.

  • bordo è una stringa di tre valori che specificano la larghezza, trasparenza e colore del bordo.

  • color (colore) è il colore del messaggio di errore. Può essere un qualsiasi valore di colore dello standard CSS.

  • box-sizing viene utilizzata per indicare al browser quello che devono includere le proprietà di ridimensionamento (larghezza e altezza).

Pulsante provider di identità

  • height (altezza) è l'altezza del pulsante in pixel (px).

  • width (larghezza) è la larghezza del testo del pulsante in percentuale del blocco contenitore.

  • text-align è l'impostazione per allineare il testo. Può essere left, right o center.

  • margin-bottom è l'impostazione del margine inferiore.

  • color (colore) è il colore del testo del pulsante. Può essere un qualsiasi valore di colore dello standard CSS.

  • background-color è il colore di sfondo del pulsante. Può essere un qualsiasi valore di colore dello standard CSS.

  • border-color è il colore di sfondo del bordo. Può essere un qualsiasi valore di colore dello standard CSS.

Descrizioni provider di identità

  • padding-top è la quantità di padding sopra la descrizione.

  • padding-bottom è la quantità di padding sotto la descrizione.

  • display può essere block o inline.

  • font-size è la dimensione del font per le descrizioni.

Testo legale

  • color (colore) è il colore del testo. Può essere un qualsiasi valore di colore dello standard CSS.

  • font-size è la dimensione del font.

Nota

Personalizzando un Legal text (Testo legale), stai personalizzando il messaggio We won't post to any of your accounts without asking first (Non pubblicheremo su nessuno dei tuoi account senza il tuo consenso) che viene visualizzato sotto i provider di identità sociale nella pagina di accesso.

Logo

  • max-width è la larghezza massima in percentuale del blocco contenitore.

  • max-height è l'altezza massima in percentuale del blocco contenitore.

Focus del campo di input

  • border-color è il colore del campo di input. Può essere un qualsiasi valore di colore dello standard CSS.

  • outline è il bordo del campo di input in pixel.

Pulsante social

  • height (altezza) è l'altezza del pulsante in pixel (px).

  • text-align è l'impostazione per allineare il testo. Può essere left, right o center.

  • width (larghezza) è la larghezza del testo del pulsante in percentuale del blocco contenitore.

  • margin-bottom è l'impostazione del margine inferiore.

Controllo password valido

  • color (colore) è il colore del testo del messaggio "Password check valid". Può essere un qualsiasi valore di colore dello standard CSS.

Specifica delle impostazioni di personalizzazione dell'interfaccia utente dell'App per un bacino d'utenza (AWS Management Console)

È possibile usare la AWS Management Console per specificare le impostazioni di personalizzazione dell'interfaccia utente per la tua app.

Nota

Puoi visualizzare l'interfaccia utente ospitata con le personalizzazioni costruendo il seguente URL, con le specifiche del bacino d'utenza, e inserendolo all'interno di un browser: https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url> Potrebbe essere necessario attendere fino a un minuto per aggiornare il browser prima che vengano visualizzate le modifiche effettuate nella console.

Il dominio viene visualizzato nella scheda App integration (Integrazione app) alla voce Dominio. L'ID del client dell'app e l'URL di callback sono visualizzati nella scheda App client settings (Impostazioni client dell'app).

Specificazione delle impostazioni di personalizzazione dell'interfaccia utente dell'App

  1. Accedi alla console Amazon Cognito.

  2. Nel pannello di navigazione, scegli Bacini d'utenza e scegli i bacini d'utenza che intendi modificare.

  3. Scegli la scheda Integrazione app.

  4. Per personalizzare le impostazioni dell'interfaccia utente per tutti i client app, individua la voce Hosted UI customization (Personalizzazione dell'interfaccia utente) e seleziona Modifica.

  5. Per personalizzare le impostazioni dell'interfaccia utente per un client dell'app, individua Client dell'app e seleziona il client dell'app che desideri modificare, quindi individua Personalizzazione dell'interfaccia utente ospitata e seleziona Modifica. Per passare a un client dell'App dalla personalizzazione predefinita del bacino d'utenza alla personalizzazione specifica del client, seleziona Use client-level settings (Utilizzo di impostazioni a livello di client).

  6. Per caricare il tuo file immagine logo, scegli Choose file (Scegli file) o Replace current file (Sostituisci file attuale).

  7. Per personalizzare il CSS per l'interfaccia utente ospitata, scarica CSS template.css e modifica il modello con i valori che desideri personalizzare. Solo le chiavi incluse nel modello possono essere utilizzate con l'interfaccia utente ospitata. Le chiavi CSS aggiunte non verranno applicate all'interfaccia utente. Dopo aver personalizzato il file CSS, scegli Choose file (Scegli file) o Replace current file (Sostituisci file corrente) per caricare il tuo CSS personalizzato.

Specifica delle impostazioni di personalizzazione dell'interfaccia utente dell'App per un bacino d'utenza (AWS CLI e API AWS)

Usa i seguenti comandi per specificare le impostazioni della personalizzazione dell'interfaccia utente dell'App del tuo bacino d'utenza.

Per ottenere le impostazioni di personalizzazione dell'interfaccia utente per l'interfaccia utente di un'app integrata del pool di utenti, utilizza le seguenti operazioni API.
Per configurare le impostazioni di personalizzazione dell'interfaccia utente per l'interfaccia utente di un'app integrata del pool di utenti, utilizza le seguenti operazioni API.

  • AWS CLI dal file di immagine: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file fileb://"<path-to-logo-image-file>" --css ".label-customizable{ color: <color>;}"

  • AWS CLI con immagine codificata come testo binario Base64: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file <base64-encoded-image-file> --css ".label-customizable{ color: <color>;}"

  • API AWS: SetUICustomization