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à. # L'editor di branding e la personalizzazione dell'accesso gestito L'editor di branding è uno strumento di progettazione visiva e modifica per le pagine Web di accesso gestite. È integrato nella console Amazon Cognito. Nell'editor di branding, inizi con un'anteprima delle tue pagine di accesso e puoi passare a un'opzione di configurazione rapida o a una visualizzazione dettagliata con opzioni avanzate. Puoi modificare e visualizzare in anteprima i parametri di stile o aggiungere un'immagine di sfondo e un logo personalizzati. È possibile configurare la modalità luce e la modalità scura. ![Un'anteprima dell'editor visivo dell'editor di branding per i pool di utenti di Amazon Cognito.](http://docs.aws.amazon.com/it_it/cognito/latest/developerguide/images/hosted-ui-customization-editor-preview.png) Per iniziare, crea uno stile da applicare al tuo pool di utenti o a un client di app. **Per iniziare a usare il branding editor** 1. [Crea un dominio](cognito-user-pools-assign-domain.md) dalla scheda **Dominio** o aggiorna il dominio esistente. In **Versione di branding**, imposta il dominio per utilizzare l'**accesso gestito**. 1. Elimina lo stile del client dell'app esistente, se presente. 1. Nel menu **App client**, seleziona il client dell'app. 1. In Stile di **accesso gestito, seleziona lo stile** assegnato al client dell'app. 1. Scegli **Elimina stile.** Conferma la selezione. 1. Vai al menu di **accesso gestito** nel tuo pool di utenti. Se non l'hai già fatto, segui le istruzioni per selezionare un [piano di funzionalità](cognito-sign-in-feature-plans.md) che includa l'accesso gestito. Puoi anche selezionare **Visualizza l'anteprima di questa funzionalità** se desideri dare un'occhiata all'editor di branding senza apportare modifiche. 1. In **Stili**, scegli **Crea uno stile**. 1. Scegli il client dell'app a cui vuoi assegnare lo stile e seleziona **Crea**. Puoi anche creare un nuovo client per l'app. 1. La console Amazon Cognito lancia l'editor di branding. 1. [Scegli una scheda in cui desideri iniziare a modificare oppure seleziona **Avvia editor** e accedi alla configurazione rapida.](#branding-designer-quick-setup) Sono disponibili le seguenti schede: **Anteprima** Guarda come appaiono le tue selezioni correnti nelle pagine di accesso gestite. **Concetti di base** Imposta un tema generale, configura i collegamenti a provider di identità esterni e definisci lo stile dei campi del modulo. **Componenti** Configura gli stili per intestazioni, piè di pagina e singoli elementi dell'interfaccia utente. 1. Per effettuare delle scelte sulle impostazioni iniziali, accedi alla configurazione rapida. Seleziona **la categoria Modifica impostazioni** e scegli **Configurazione rapida**. Quando selezioni **Procedi**, viene avviato l'editor di branding con una serie di opzioni di base da configurare. ## Testo e localizzazione Non puoi modificare o localizzare il testo nell'editor di branding. Aggiungi invece un parametro di `lang` query all'URL che distribuisci agli utenti. Questo parametro fa sì che le pagine di accesso gestite vengano localizzate in una delle diverse lingue disponibili. Per ulteriori informazioni, consulta [Managed login localization](cognito-user-pools-managed-login.md#managed-login-localization). ## Configurazione rapida Il pulsante **Launch branding editor** carica un editor visuale per la configurazione di accesso gestito in cui è possibile scegliere tra una varietà di opzioni di personalizzazione principali. Man mano che effettui le selezioni, Amazon Cognito visualizza le modifiche di accesso gestite in una finestra di anteprima. Per tornare al menu delle impostazioni dettagliate, seleziona il pulsante **Modifica la categoria delle impostazioni**. **Quale dovrebbe essere l'aspetto generale?** Configura le impostazioni di base del tema per l'accesso gestito. **Modalità di visualizzazione** Scegli una modalità chiara, una modalità scura o un'esperienza adattiva per il tuo accesso gestito. Le impostazioni adattive rimandano alle preferenze del browser dell'utente quando Amazon Cognito esegue il rendering dell'accesso gestito. Quando scegli una modalità adattiva al browser, puoi scegliere colori e immagini del logo diversi per la modalità chiara e scura. **Spacing** Imposta la spaziatura predefinita tra gli elementi della pagina. **Raggio del bordo** Imposta la profondità di arrotondamento del bordo esterno degli elementi. **Come deve apparire lo sfondo della pagina?** **Tipo di sfondo** La casella di controllo **Mostra immagine** indica se si desidera un'immagine di sfondo o se si desidera impostare un colore di sfondo solido. 1. Per usare un'immagine, seleziona **Mostra immagine** e scegli un'immagine di sfondo per le modalità chiare e scure. Puoi anche impostare un **colore di sfondo della pagina** in modalità scura e chiara per le aree dello sfondo che non sono coperte dall'immagine. 1. **Per utilizzare solo un colore per lo sfondo, deselezionate **Mostra immagine** e scegliete un colore di sfondo della pagina in modalità chiara e scura.** **Che aspetto devono avere i moduli?** Configura le impostazioni per gli elementi del modulo di accesso gestito. Esempi di elementi del modulo sono le istruzioni di accesso e di codice. **Allineamento orizzontale** Imposta l'allineamento orizzontale dei campi del modulo. **Logo del modulo** Imposta il posizionamento dell'immagine del logo. **Immagine del logo** Scegliete un file di immagine del logo da includere nell'elemento del modulo per le modalità chiare e scure. Per caricare un'immagine, seleziona il menu a discesa **Immagine del logo**, scegli **Aggiungi nuova risorsa** e aggiungi un file del logo. **Colore principale del marchio** Imposta un colore del tema per le modalità chiaro e scuro. Questo colore verrà applicato come colore di sfondo a tutti gli elementi classificati come primari. **Come devono apparire le intestazioni?** Scegli se includere un'intestazione nelle tue pagine di accesso gestite. L'intestazione può contenere un'immagine del logo. **Logo dell'intestazione** Imposta la posizione dell'immagine del logo nell'intestazione. **Immagine del logo** Scegli una posizione del logo e un file di immagine del logo da includere nell'intestazione. Per caricare un'immagine, seleziona il menu a discesa **Immagine del logo**, scegli **Aggiungi nuova risorsa** e aggiungi un file del logo. **Colore di sfondo dell'intestazione** Imposta i colori delle modalità chiaro e scuro per lo sfondo dell'intestazione. ## Impostazioni dettagliate Nella vista delle impostazioni dettagliate, è possibile modificare i singoli componenti in **Foundation** e **Components**. La scheda **Anteprima** mostra un'anteprima dell'accesso gestito nel contesto corrente con le personalizzazioni. ![Una Console di gestione AWS schermata della configurazione dettagliata dei componenti di accesso gestito.](http://docs.aws.amazon.com/it_it/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png) Per accedere all'editor visivo di un componente, scegli l'icona di modifica nel riquadro del componente. Dall'editor dello studio tematico, puoi passare da un componente all'altro con il pulsante **Modifica la categoria delle impostazioni**. ### Concetti di base **Stile dell'app** Configura le basi della tua configurazione di accesso gestito. Questa categoria include impostazioni per il tema generale, la spaziatura del testo e l'intestazione e il piè di pagina della pagina. **Modalità di visualizzazione** Scegli una modalità chiara, una modalità scura o un'esperienza adattiva per le tue pagine di accesso gestite. Quando scegli una modalità adattiva al browser, puoi scegliere colori e immagini del logo diversi per la modalità chiara e scura. **Spacing** Imposta la spaziatura predefinita tra gli elementi della pagina. **Comportamento di autenticazione** Configura gli stili per i pulsanti che collegano gli utenti ai provider di identità esterni (IdPs). Questa sezione include l'opzione **Domain search input** per fare in modo che l'accesso gestito richieda agli utenti un indirizzo e-mail e lo abbini all'identificativo del [provider di identità SAML](cognito-user-pools-managing-saml-idp-naming.md). **Comportamento del modulo** Configura gli stili per i moduli di input: posizionamento degli input, colori e allineamento degli elementi. ### Componenti **Pulsanti** Stili per i pulsanti visualizzati da Amazon Cognito nelle pagine di accesso gestite. **Divisore** Stili per le linee di divisione e i confini tra gli elementi di accesso gestiti come il modulo di input e il selettore di accesso del provider esterno. **Elenco a discesa** Stili per i menu a discesa. **Favicon** Stili per l'immagine che Amazon Cognito fornisce per l'icona della scheda e del segnalibro. **anelli di messa a fuoco** Stili per le evidenziazioni che indicano un input attualmente selezionato. **Contenitore del modulo** Stili per gli elementi che legano un modulo. **Piè di pagina globale** Stili per il piè di pagina visualizzato da Amazon Cognito nella parte inferiore delle pagine di accesso gestite. **Intestazione globale** Stili per l'intestazione che Amazon Cognito mostra nella parte superiore delle pagine di accesso gestite. **Indicazioni** Stili per i messaggi di errore e di successo. **Controlli delle opzioni** Stili per caselle di controllo, selezioni multiple e altri prompt di input. **Sfondo della pagina** Stili per lo sfondo generale dell'accesso gestito. **Input** Stili per le richieste di immissione dei campi del modulo. **Link** Stili per i collegamenti ipertestuali nelle pagine di accesso gestite. **Testo per pagina** Stili per il testo all'interno della pagina. **Testo per campo** Stili per il testo attorno agli input del modulo. ## Operazioni API e SDK per il branding degli accessi gestiti Puoi anche applicare il branding a uno stile di accesso gestito con le operazioni API e. [CreateManagedLoginBranding[UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html)](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) Queste operazioni sono ideali per creare versioni identiche o leggermente modificate di uno stile di branding per un altro client di app o pool di utenti. Interroga il branding di accesso gestito di uno stile esistente con l'operazione API [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html), quindi modifica l'output in base alle esigenze e applicalo a un'altra risorsa. L'`UpdateManagedLoginBranding`operazione non modifica il client dell'app a cui viene applicato lo stile. Aggiorna solo lo stile esistente assegnato a un client dell'app. Per sostituire completamente lo stile di un client di app, elimina lo stile esistente con [DeleteManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DeleteManagedLoginBranding.html)e assegnane uno nuovo con`CreateManagedLoginBranding`. Nella console Amazon Cognito, lo stesso vale: devi eliminare lo stile esistente e crearne uno nuovo. La configurazione del branding di accesso gestito in una richiesta API o SDK richiede che le impostazioni siano incorporate in un file JSON convertito in un tipo di dati. `Document` Di seguito sono riportate le indicazioni per le immagini che è possibile aggiungere e per generare richieste programmatiche per configurare uno stile di branding. ### Risorse di immagini [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)e [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html)includi un `Assets` parametro. Questo parametro è una matrice di file di immagine in formato binario con codifica base64. **Nota** Le richieste programmatiche che creano o aggiornano lo stile di branding devono avere una dimensione non superiore a 2 MB. Le risorse contenute nella tua richiesta potrebbero farla superare questo limite. In tal caso, suddividi la richiesta in più `UpdateManagedLoginBranding` richieste di gruppi di parametri che non superino la dimensione massima della richiesta. Queste richieste non comportano l'impostazione di parametri non specificati come predefiniti, quindi puoi inviare richieste parziali senza alcun effetto sulle impostazioni esistenti. Alcune risorse presentano limitazioni sui tipi di file che è possibile inviare. **** | Asset | Estensioni di file accettate | | --- | --- | | FAVICON\_ICO | ico | | FAVICON\_SVG | svg | | GRAFICA\_EMAIL | png, svg, jpeg | | GRAFICA SMS | png, svg, jpeg | | AUTH\_APP\_GRAPHIC | png, svg, jpeg | | GRAFICA DELLA PASSWORD | png, svg, jpeg | | PASSKEY\_GRAPHIC | png, svg, jpeg | | LOGO\_HEADER\_PAGINA | png, svg, jpeg | | SFONDO\_INTESTAZIONE\_PAGINA | png, svg, jpeg | | LOGO\_PAGINA A PIÈ DI PAGINA | png, svg, jpeg | | SFONDO DELLA PAGINA A PIÈ DI PAGINA | png, svg, jpeg | | SFONDO DELLA PAGINA | png, svg, jpeg | | FORM\_SFONDO | png, svg, jpeg | | FORM\_LOGO | png, svg, jpeg | | ICONA\_IDP\_BUTTON\_ | icona, svg | I file di tipo SVG supportano i seguenti attributi ed elementi. ------ #### [ Attributes ] ``` accent-height, accumulate, additivive, alignment-baseline, ascent, attributename, attributetype, azimuth, basefrequency, baseline-shift, begin, bias, by, class, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cx, cy, d, dx, dy, diffuseconstant, direction, display, divisor, dur, edgemode, elevation, end, fill, fill-opacity, fill-rule, filter, filterunits, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, fx, fy, g1, g2, glyph-name, glyphref, gradientunits, gradienttransform, height, href, id, image-rendering, in, in2, k, k1, k2, k3, k4, kerning, keypoints, keysplines, keytimes, lang, lengthadjust, letter-spacing, kernelmatrix, kernelunitlength, lighting-color, local, marker-end, marker-mid, marker-start, markerheight, markerunits, markerwidth, maskcontentunits, maskunits, max, mask, media, method, mode, min, name, numoctaves, offset, operator, opacity, order, orient, orientation, origin, overflow, paint-order, path, pathlength, patterncontentunits, patterntransform, patternunits, points, preservealpha, preserveaspectratio, r, rx, ry, radius, refx, refy, repeatcount, repeatdur, restart, result, rotate, scale, seed, shape-rendering, specularconstant, specularexponent, spreadmethod, stddeviation, stitchtiles, stop-color, stop-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke, stroke-width, style, surfacescale, tabindex, targetx, targety, transform, text-anchor, text-decoration, text-rendering, textlength, type, u1, u2, unicode, values, viewbox, visibility, vert-adv-y, vert-origin-x, vert-origin-y, width, word-spacing, wrap, writing-mode, xchannelselector, ychannelselector, x, x1, x2, xmlns, y, y1, y2, z, zoomandpan ``` ------ #### [ Elements ] ``` svg, a, altglyph, altglyphdef, altglyphitem, animatecolor, animatemotion, animatetransform, audio, canvas, circle, clippath, defs, desc, ellipse, filter, font, g, glyph, glyphref, hkern, image, line, lineargradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialgradient, rect, stop, style, switch, symbol, text, textpath, title, tref, tspan, video, view, vkern, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence ``` ------ ### Strumenti per operazioni gestite di branding degli accessi Amazon Cognito gestisce un file in [formato schema JSON per l'oggetto delle impostazioni di](https://json-schema.org/docs) branding di accesso gestito. Di seguito viene descritto come aggiornare in modo programmatico lo stile di branding. **Per aggiornare il marchio nell'API dei pool di utenti** 1. Nella console Amazon Cognito, crea uno stile di branding di accesso gestito predefinito dal menu **Accesso gestito** del tuo pool di utenti. Assegnalo a un client dell'app. 1. Ad esempio`1example23456789`, registra l'ID del client dell'app per cui hai creato lo stile. 1. Recupera le impostazioni per lo stile di branding con una richiesta [DescribeManagedLoginBrandingByClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBrandingByClient.html)API `ReturnMergedResources` impostata su. `true` Di seguito è riportato un esempio di corpo della richiesta. ``` { "ClientId": "1example23456789", "ReturnMergedResources": true, "UserPoolId": "us-east-1_EXAMPLE" } ``` 1. Modifica l'output di `DescribeManagedLoginBrandingByClient` con le tue personalizzazioni. 1. Il corpo della risposta è racchiuso in un `ManagedLoginBranding` elemento che non fa parte della sintassi per le operazioni di creazione e aggiornamento. Rimuovi questo livello superiore dell'oggetto JSON. 1. Per sostituire le immagini, sostituite il `Bytes` valore con i dati binari codificati in Base64 di ogni file di immagine. 1. Per aggiornare le impostazioni, modificate l'output dell'`Settings`oggetto e includetelo nella richiesta successiva. Amazon Cognito ignora tutti i valori `Settings` dell'oggetto che non sono presenti nello schema ricevuto nella risposta all'API. 1. Usa il corpo della risposta aggiornato in una richiesta [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)or [UpdateManagedLoginBranding](https://docs.aws.amazon.com/). Se questa richiesta supera i 2 MB, suddividila in più richieste. Queste operazioni funzionano in un `PATCH` modello in cui le impostazioni originali rimangono invariate, a meno che non venga specificato diversamente.