Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris. # Terapkan branding ke halaman login terkelola Branding dan kustomisasi Anda mungkin ingin memberikan pengalaman pengguna yang konsisten antara layanan otentikasi dan aplikasi Anda. Anda dapat mencapai tujuan ini baik dengan formulir kustom dan operasi API back-end di AWS SDK, atau dengan login terkelola. Login terkelola dan UI host klasik adalah ujung depan web untuk komponen aplikasi Anda yang menyajikan otentikasi dengan kumpulan pengguna. Untuk menyinkronkan layanan otentikasi terkelola dengan UX aplikasi, Anda memiliki dua opsi penyesuaian: editor branding dan pencitraan merek UI yang dihosting. Anda dapat memilih pengalaman yang Anda inginkan di konsol Amazon Cognito dan dengan operasi API kumpulan pengguna. **Editor branding** [Editor branding](managed-login-brandingeditor.md) adalah opsi penyesuaian terbaru untuk pengalaman UI kumpulan pengguna terbaru, [login terkelola](cognito-user-pools-managed-login.md). Editor branding adalah editor visual tanpa kode untuk aset dan gaya login terkelola, dan satu set operasi API untuk konfigurasi terprogram dari sejumlah besar opsi konfigurasi. Kumpulan pengguna yang Anda konfigurasikan dengan [domain](cognito-user-pools-assign-domain.md) dan login terkelola secara otomatis membuat versi perancang merek dari halaman login Anda. **Pencitraan merek UI (klasik) yang dihosting** [Pengalaman pencitraan merek UI (klasik) yang dihosting](hosted-ui-classic-branding.md) memiliki dua opsi: untuk memodifikasi file stylesheet (CSS) cascading dengan serangkaian opsi gaya tetap, dan untuk menambahkan gambar logo khusus. Anda dapat mengatur opsi ini di konsol Amazon Cognito atau dengan operasi [Set UICustomization](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html) API. Pada saat layanan diluncurkan, Amazon Cognito hanya memiliki opsi ini. Kumpulan pengguna yang Anda konfigurasikan dengan [domain](cognito-user-pools-assign-domain.md) dan versi pencitraan merek UI yang dihosting secara otomatis merender versi klasik halaman login Anda. [Paket fitur](cognito-sign-in-feature-plans.md) Anda mungkin juga hanya mendukung UI yang dihosting. **catatan** Editor branding dan pengalaman branding klasik memodifikasi properti visual dari layanan otentikasi host Anda. Saat ini, Anda tidak dapat mengubah teks yang ditampilkan di halaman login terkelola, kecuali untuk menerapkan pelokalan ke salah satu dari beberapa bahasa. Untuk informasi selengkapnya tentang lokalisasi, lihat[Pelokalan proses masuk terkelola](cognito-user-pools-managed-login.md#managed-login-localization). ## Pilih pengalaman branding dan tetapkan gaya Di konsol Amazon Cognito, pengguna baru menggabungkan default ke pengalaman branding **login Terkelola**. Kumpulan pengguna yang Anda siapkan sebelum login terkelola tersedia akan memiliki branding **UI Hosted (klasik)**. Anda dapat beralih antara login terkelola dan pencitraan merek UI yang dihosting. Saat Anda mengubah **versi Branding**, Amazon Cognito segera menerapkan perubahan tersebut ke halaman interaktif pengguna domain kumpulan pengguna Anda. Dengan login terkelola dan UI yang dihosting, kumpulan pengguna Anda dapat memiliki gaya untuk setiap klien aplikasi. Setiap klien aplikasi dapat memiliki *gaya* branding yang berbeda, tetapi domain kumpulan pengguna menyajikan login terkelola atau UI yang dihosting. Gaya adalah seperangkat pengaturan penyesuaian yang diterapkan ke klien aplikasi. Anda dapat mengatur satu [domain kustom](cognito-user-pools-add-custom-domain.md) dan satu [domain awalan](cognito-user-pools-assign-domain-prefix.md) per kumpulan pengguna. Anda dapat menetapkan versi branding yang berbeda ke domain kustom dan awalan Anda. *Namun, domain awalan tidak berfungsi penuh jika Anda juga memiliki domain kustom—titik akhir penemuan `.well-known` OIDC hanya menampilkan jalur domain khusus.* Anda hanya dapat menggunakan domain awalan untuk operasi yang tidak memerlukan endpoint discovery (`openid-configuration`) dalam kumpulan pengguna dengan konfigurasi ini. Karena properti kumpulan pengguna ini, Anda dapat secara efektif memilih satu versi branding per kumpulan pengguna. Anda dapat menetapkan gaya ke klien aplikasi di kumpulan pengguna tempat domain disetel ke versi branding login terkelola. Gaya adalah seperangkat pengaturan visual yang terdiri dari file gambar, opsi tampilan, nilai CSS. Saat Anda menetapkan gaya ke klien aplikasi, Amazon Cognito segera mendorong pembaruan Anda ke halaman login interaktif pengguna Anda. Amazon Cognito membuat halaman interaktif pengguna Anda dengan versi branding pilihan Anda dan penyesuaian yang telah Anda terapkan padanya. ### Perbarui dan hapus gaya Saat Anda membuat gaya, Anda menautkannya ke klien aplikasi. Untuk mengubah penetapan gaya klien aplikasi, Anda harus menghapus gaya aslinya terlebih dahulu. Saat ini, Anda tidak dapat menyalin pengaturan antar gaya. Anda harus melakukan ini secara terprogram. Untuk mereplikasi setelan antara gaya dan klien aplikasi, dapatkan pengaturan untuk gaya dengan operasi [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html)API dan terapkan dengan [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)atau [UpdateManagedLoginBranding](https://docs.aws.amazon.com/). Anda tidak dapat mengubah gaya yang ditetapkan klien aplikasi—Anda hanya dapat menghapus yang asli dan menetapkan yang baru. Untuk informasi selengkapnya tentang mengelola gaya dengan operasi API dan SDK, lihat[Operasi API dan SDK untuk branding login terkelola](managed-login-brandingeditor.md#branding-designer-api). **catatan** Permintaan terprogram yang membuat atau memperbarui gaya branding harus memiliki ukuran permintaan tidak lebih dari 2 MB. Jika permintaan Anda lebih besar dari batas ini, pisahkan permintaan Anda menjadi beberapa `UpdateManagedLoginBranding` permintaan untuk grup parameter yang tidak melebihi ukuran permintaan maksimum. Permintaan ini tidak menghasilkan parameter yang tidak ditentukan disetel ke default, sehingga Anda dapat mengirim permintaan sebagian tanpa efek apa pun pada pengaturan yang ada. Anda menghapus gaya di konsol Amazon Cognito dari menu **login Terkelola**. Di bawah **Gaya**, pilih gaya yang ingin Anda hapus dan pilih **Hapus gaya**. Pada tingkat tinggi, proses penetapan merek ke domain terdiri dari langkah-langkah berikut. 1. [Buat domain dan atur versi branding](cognito-user-pools-assign-domain.md). 1. Buat gaya branding dan tetapkan ke klien aplikasi. **Untuk menetapkan gaya ke klien aplikasi** 1. Di menu **Domain** kumpulan pengguna Anda, buat domain dan atur **versi Branding** ke **Login terkelola**. 1. Arahkan ke menu **Login Terkelola**. Di bawah **Gaya**, pilih **Buat gaya**. 1. Pilih klien aplikasi yang ingin Anda tetapkan gaya, atau buat [klien aplikasi](user-pool-settings-client-apps.md) baru. 1. Untuk mulai mengonfigurasi setelan branding Anda, pilih **Luncurkan editor branding**. **Topics** + [ ## Pilih pengalaman branding dan tetapkan gaya ](#managed-login-branding-choose) + [ # Editor branding dan menyesuaikan login terkelola ](managed-login-brandingeditor.md) + [ # Menyesuaikan pencitraan merek UI (klasik) yang dihosting ](hosted-ui-classic-branding.md) # Editor branding dan menyesuaikan login terkelola Branding login terkelola Editor branding adalah desain visual dan alat pengeditan untuk halaman web login terkelola Anda. Itu dibangun ke konsol Amazon Cognito. Di editor branding, Anda mulai dengan pratinjau halaman login Anda dan dapat melanjutkan ke opsi pengaturan cepat atau tampilan terperinci dengan opsi lanjutan. Anda dapat memodifikasi dan melihat pratinjau parameter gaya atau menambahkan gambar latar belakang kustom dan logo. Anda dapat mengkonfigurasi mode terang dan mode gelap. ![\[Pratinjau editor visual editor merek untuk kumpulan pengguna Amazon Cognito.\]](http://docs.aws.amazon.com/id_id/cognito/latest/developerguide/images/hosted-ui-customization-editor-preview.png) Untuk memulai, buat gaya yang dapat Anda terapkan ke kumpulan pengguna atau klien aplikasi. **Untuk memulai dengan editor branding** 1. [Buat domain](cognito-user-pools-assign-domain.md) dari tab **Domain**, atau perbarui domain yang ada. Di bawah **versi Branding**, setel domain Anda untuk menggunakan **Login terkelola**. 1. Hapus gaya klien aplikasi yang ada, jika ada. 1. Di menu **Klien aplikasi**, pilih klien aplikasi Anda. 1. Di bawah **Gaya login terkelola**, pilih syle yang ditetapkan ke klien aplikasi Anda. 1. Pilih **Hapus gaya**. Konfirmasikan pilihan Anda. 1. Arahkan ke menu **Login terkelola** di kumpulan pengguna Anda. Jika Anda belum melakukannya, ikuti prompt untuk memilih [paket fitur](cognito-sign-in-feature-plans.md) yang menyertakan login terkelola. Anda juga dapat memilih **Pratinjau fitur ini** jika Anda ingin memeriksa editor merek tanpa membuat perubahan. 1. Di bawah **Gaya**, pilih **Buat gaya**. 1. Pilih klien aplikasi yang ingin Anda tetapkan gaya Anda dan pilih **Buat**. Anda juga dapat membuat klien aplikasi baru. 1. Konsol Amazon Cognito meluncurkan editor branding. 1. Pilih tab tempat Anda ingin mulai mengedit, atau pilih **Luncurkan editor** dan masukkan [pengaturan cepat](#branding-designer-quick-setup). Tab berikut tersedia: **Pratinjau** Lihat bagaimana pilihan Anda saat ini terlihat di halaman login terkelola Anda. **Dasar** Tetapkan tema keseluruhan, konfigurasikan tautan ke penyedia identitas eksternal, dan bidang formulir gaya. **Komponen-komponen** Konfigurasikan gaya untuk header, footer, dan elemen UI individual. 1. Untuk membuat pilihan tentang pengaturan awal, masukkan pengaturan cepat. Pilih **Ubah kategori pengaturan** dan pilih **Pengaturan cepat**. Saat Anda memilih **Lanjutkan**, editor branding akan diluncurkan dengan serangkaian opsi dasar untuk Anda konfigurasikan. ## Teks dan lokalisasi Anda tidak dapat memodifikasi atau melokalkan teks di editor branding. Sebagai gantinya, tambahkan parameter `lang` kueri ke URL yang Anda distribusikan ke pengguna. Parameter ini menyebabkan halaman login terkelola Anda dilokalkan ke salah satu dari beberapa bahasa yang tersedia. Untuk informasi selengkapnya, lihat [Pelokalan proses masuk terkelola](cognito-user-pools-managed-login.md#managed-login-localization). ## Pengaturan cepat Tombol **Launch branding editor** memuat editor visual untuk konfigurasi login terkelola Anda di mana Anda dapat memilih dari berbagai opsi penyesuaian utama. Saat Anda membuat pilihan, Amazon Cognito membuat perubahan login terkelola Anda di jendela pratinjau. Untuk kembali ke menu pengaturan terperinci, pilih tombol **Ubah kategori pengaturan**. **Apa yang seharusnya menjadi tampilan dan nuansa keseluruhan?** Konfigurasikan pengaturan tema dasar untuk login terkelola. **Mode tampilan** Pilih mode terang, mode gelap, atau pengalaman adaptif untuk login terkelola Anda. Pengaturan adaptif tergantung pada preferensi browser pengguna saat Amazon Cognito membuat login terkelola. Saat Anda memilih mode adaptif browser, Anda dapat memilih warna dan gambar logo yang berbeda untuk mode terang dan gelap. **Jarak** Atur spasi default antar elemen di halaman. **Radius perbatasan** Atur kedalaman pembulatan batas luar elemen. **Bagaimana seharusnya tampilan latar belakang halaman?** **Jenis latar belakang** Kotak centang **Tampilkan gambar** menunjukkan apakah Anda menginginkan gambar latar belakang atau mengatur warna latar belakang yang solid. 1. Untuk menggunakan gambar, pilih **Tampilkan gambar** dan pilih gambar latar belakang untuk mode terang dan gelap. Anda juga dapat mengatur **warna latar belakang Halaman mode gelap dan mode terang untuk area latar belakang** yang tidak tercakup oleh gambar. 1. **Untuk hanya menggunakan warna untuk latar belakang, batal pilih **Tampilkan gambar** dan pilih mode terang dan warna latar belakang halaman mode gelap.** **Bagaimana seharusnya bentuk terlihat?** Konfigurasikan pengaturan untuk elemen formulir login terkelola. Contoh item formulir adalah login dan prompt kode. **Penjajaran horisontal** Atur keselarasan horizontal bidang formulir. **Logo formulir** Atur posisi gambar logo Anda. **Gambar logo** Pilih file gambar logo untuk disertakan dalam elemen formulir untuk mode terang dan gelap. Untuk mengunggah gambar, pilih dropdown **gambar Logo**, pilih **Tambahkan aset baru**, dan tambahkan file logo. **Warna branding primer** Atur warna tema untuk mode terang dan gelap. Warna ini akan diterapkan sebagai warna latar belakang untuk semua elemen yang diklasifikasikan sebagai primer. **Bagaimana seharusnya header terlihat?** Pilih apakah Anda ingin menyertakan header di halaman login terkelola Anda. Header dapat berisi gambar logo. **Logo header** Atur posisi gambar logo di header Anda. **Gambar logo** Pilih posisi logo dan file gambar logo untuk disertakan dalam header. Untuk mengunggah gambar, pilih dropdown **gambar Logo**, pilih **Tambahkan aset baru**, dan tambahkan file logo. **Warna latar belakang header** Atur warna mode terang dan gelap untuk latar belakang header. ## Pengaturan terperinci Dalam tampilan pengaturan terperinci, Anda dapat memodifikasi komponen individual di **Foundation** dan **Components**. Tab **Pratinjau** menampilkan pratinjau login terkelola dalam konteks saat ini dengan penyesuaian Anda. ![\[Konsol Manajemen AWS Tangkapan layar konfigurasi terperinci komponen login terkelola.\]](http://docs.aws.amazon.com/id_id/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png) Untuk memasukkan editor visual untuk komponen, pilih ikon edit di ubin untuk komponen. Dari editor studio tema, Anda dapat beralih antar komponen dengan tombol **Ubah kategori pengaturan**. ### Dasar **Gaya aplikasi** Konfigurasikan dasar-dasar konfigurasi login terkelola Anda. Kategori ini memiliki pengaturan untuk tema keseluruhan, spasi teks, dan header dan footer halaman. **Mode tampilan** Pilih mode terang, mode gelap, atau pengalaman adaptif untuk halaman login terkelola Anda. Saat Anda memilih mode adaptif browser, Anda dapat memilih warna dan gambar logo yang berbeda untuk mode terang dan gelap. **Jarak** Atur spasi default antar elemen di halaman. **Perilaku otentikasi** Konfigurasikan gaya untuk tombol yang menghubungkan pengguna Anda ke penyedia identitas eksternal (IdPs). Bagian ini mencakup opsi **Input pencarian domain** untuk mengelola pengguna prompt login untuk alamat email dan mencocokkannya dengan [pengenal penyedia identitas SALL](cognito-user-pools-managing-saml-idp-naming.md) mereka. **Bentuk perilaku** Konfigurasikan gaya untuk formulir input: pemosisian input, warna, dan penyelarasan elemen. ### Komponen-komponen **Tombol** Gaya untuk tombol yang dirender Amazon Cognito pada halaman login terkelola. **Pembagi** Gaya untuk garis pembagi dan batas antara elemen login terkelola seperti formulir input dan pemilih masuk penyedia eksternal. **Dropdown** Gaya untuk menu dropdown. **Favicon** Gaya untuk gambar yang disediakan Amazon Cognito untuk tab dan ikon bookmark. **Cincin fokus** Gaya untuk sorotan yang menunjukkan input yang dipilih saat ini. **Bentuk wadah** Gaya untuk elemen yang mengikat formulir. **Footer global** Gaya untuk footer yang ditampilkan Amazon Cognito di bagian bawah halaman login terkelola. **Header global** Gaya untuk header yang ditampilkan Amazon Cognito di bagian atas halaman login terkelola. **Indikasi** Gaya untuk pesan kesalahan dan kesuksesan. **Kontrol opsi** Gaya untuk kotak centang, multi-pilihan, dan permintaan input lainnya. **Latar belakang halaman** Gaya untuk latar belakang keseluruhan login terkelola. **Masukan** Gaya untuk prompt masukan bidang formulir. **Tautan** Gaya untuk hyperlink di halaman login terkelola. **Teks untuk halaman** Gaya untuk teks dalam halaman. **Teks untuk bidang** Gaya untuk teks di sekitar input formulir. ## Operasi API dan SDK untuk branding login terkelola Operasi API Anda juga dapat menerapkan branding ke gaya login terkelola dengan operasi API [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)dan [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html). Operasi ini ideal untuk membuat versi gaya branding yang identik atau sedikit dimodifikasi untuk klien aplikasi atau kumpulan pengguna lain. Kueri branding login terkelola dari gaya yang ada dengan operasi API [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html), lalu modifikasi output sesuai kebutuhan dan terapkan ke sumber daya lain. `UpdateManagedLoginBranding`Operasi tidak mengubah klien aplikasi tempat gaya Anda diterapkan. Ini hanya memperbarui gaya yang ada yang ditetapkan ke klien aplikasi. Untuk sepenuhnya mengganti gaya untuk klien aplikasi, hapus gaya yang ada dengan [DeleteManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DeleteManagedLoginBranding.html)dan tetapkan gaya baru dengan`CreateManagedLoginBranding`. Di konsol Amazon Cognito, hal yang sama berlaku: Anda harus menghapus gaya yang ada dan membuat yang baru. Menyiapkan branding login terkelola dalam permintaan API atau SDK mengharuskan pengaturan Anda disematkan dalam file JSON yang dikonversi ke tipe data. `Document` Berikut ini adalah panduan untuk gambar yang dapat Anda tambahkan dan untuk menghasilkan permintaan terprogram untuk mengonfigurasi gaya branding. ### Aset gambar [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)dan [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html)sertakan `Assets` parameter. Parameter ini adalah array file gambar dalam format biner berenkode base64. **catatan** Permintaan terprogram yang membuat atau memperbarui gaya branding harus memiliki ukuran permintaan tidak lebih dari 2 MB. Aset dalam permintaan Anda mungkin membuatnya melebihi batas ini. Jika demikian, pisahkan permintaan Anda menjadi beberapa `UpdateManagedLoginBranding` permintaan untuk grup parameter yang tidak melebihi ukuran permintaan maksimum. Permintaan ini tidak menghasilkan parameter yang tidak ditentukan disetel ke default, sehingga Anda dapat mengirim permintaan sebagian tanpa efek apa pun pada pengaturan yang ada. Beberapa aset memiliki batasan pada tipe file yang dapat Anda kirimkan. **** | Aset | Ekstensi file yang diterima | | --- | --- | | FAVICON\$1ICO | ico | | FAVICON\$1SVG | svg | | EMAIL\$1GRAFIS | png, svg, jpeg | | SMS\$1GRAFIK | png, svg, jpeg | | AUTH\$1APP\$1GRAPHIC | png, svg, jpeg | | PASSWORD\$1GRAPHIC | png, svg, jpeg | | PASSKEY\$1GRAFIK | png, svg, jpeg | | PAGE\$1HEADER\$1LOGO | png, svg, jpeg | | PAGE\$1HEADER\$1LATAR BELAKANG | png, svg, jpeg | | PAGE\$1FOOTER\$1LOGO | png, svg, jpeg | | PAGE\$1FOOTER\$1LATAR BELAKANG | png, svg, jpeg | | PAGE\$1LATAR BELAKANG | png, svg, jpeg | | FORM\$1LATAR BELAKANG | png, svg, jpeg | | BENTUK\$1LOGO | png, svg, jpeg | | IDP\$1BUTTON\$1ICON | ico, svg | File tipe SVG mendukung atribut dan elemen berikut. ------ #### [ 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 ``` ------ ### Alat untuk operasi branding login terkelola Amazon Cognito mengelola file dalam [format skema JSON untuk objek pengaturan](https://json-schema.org/docs) branding login terkelola. Berikut ini adalah cara memperbarui gaya branding Anda secara terprogram. **Untuk memperbarui branding di API kumpulan pengguna** 1. Di konsol Amazon Cognito, buat gaya branding login terkelola default dari menu **Login terkelola kumpulan** pengguna Anda. Tetapkan ke klien aplikasi. 1. Catat ID klien aplikasi yang Anda buat gayanya, misalnya`1example23456789`. 1. Ambil pengaturan untuk gaya branding dengan permintaan [DescribeManagedLoginBrandingByClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBrandingByClient.html)API dengan `ReturnMergedResources` set ke. `true` Berikut ini adalah contoh badan permintaan. ``` { "ClientId": "1example23456789", "ReturnMergedResources": true, "UserPoolId": "us-east-1_EXAMPLE" } ``` 1. Ubah output `DescribeManagedLoginBrandingByClient` dengan kustomisasi Anda. 1. Badan respons dibungkus dalam `ManagedLoginBranding` elemen yang bukan bagian dari sintaks untuk membuat dan memperbarui operasi. Hapus level atas objek JSON ini. 1. Untuk mengganti gambar, ganti `Bytes` nilainya dengan data biner yang dikodekan Base64 dari setiap file gambar. 1. Untuk memperbarui pengaturan, ubah output `Settings` objek dan sertakan dalam permintaan Anda berikutnya. Amazon Cognito mengabaikan nilai apa pun di `Settings` objek Anda yang tidak ada dalam skema yang Anda terima dalam respons API Anda. 1. Gunakan badan respons yang diperbarui dalam [UpdateManagedLoginBranding](https://docs.aws.amazon.com/)permintaan [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html)atau. Jika permintaan ini melebihi ukuran 2 MB, pisahkan menjadi beberapa permintaan. Operasi ini bekerja dalam `PATCH` model di mana pengaturan asli tetap tidak berubah kecuali Anda menentukan sebaliknya. # Menyesuaikan pencitraan merek UI (klasik) yang dihosting Pencitraan merek UI (klasik) yang dihosting Anda dapat menggunakan Konsol Manajemen AWS, atau API AWS CLI atau, untuk menentukan pengaturan kustomisasi klasik untuk UI yang dihosting. Anda dapat mengunggah gambar logo kustom yang akan ditampilkan di aplikasi. Anda juga dapat menerapkan beberapa opsi cascading style sheet (CSS) pada tampilan dan nuansa UI. Anda dapat menyesuaikan default UI dan mengganti [klien aplikasi](cognito-terms.md#term-appclient) individual dengan setelan tertentu. Amazon Cognito menerapkan konfigurasi default ke setiap klien aplikasi yang tidak memiliki pengaturan tingkat klien. Di konsol Amazon Cognito dan dalam permintaan API, permintaan yang menyetel kustomisasi UI Anda tidak boleh melebihi ukuran 135 KB. Dalam kasus yang jarang terjadi, jumlah header permintaan, file CSS Anda, dan logo Anda mungkin melebihi 135KB. Amazon Cognito mengkodekan file gambar ke Base64. Ini meningkatkan ukuran gambar 100 KB menjadi 130 KB, menjaga lima KB untuk header permintaan dan CSS Anda. Jika permintaan terlalu besar, permintaan `SetUICustomization` API Konsol Manajemen AWS atau Anda mengembalikan `request parameters too large` kesalahan. Sesuaikan gambar logo Anda agar tidak lebih dari 100KB dan file CSS Anda tidak lebih besar dari 3 KB. Anda tidak dapat mengatur kustomisasi CSS dan logo secara terpisah. **catatan** Untuk menyesuaikan UI, Anda harus menyiapkan domain untuk kumpulan pengguna. ## Menentukan logo kustom dalam branding klasik Amazon Cognito memusatkan logo kustom Anda di atas bidang input di. [Titik akhir masuk](login-endpoint.md) Pilih file PNG, JPG, atau JPEG yang dapat menskalakan hingga 350 kali 178 piksel untuk logo UI yang dihosting khusus Anda. File logo Anda dapat berukuran tidak lebih dari 100 KB, atau 130 KB setelah Amazon Cognito mengkodekan ke Base64. Untuk menyetel `ImageFile` in [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)di API, konversikan file Anda ke string teks yang dikodekan Base64 atau, di AWS CLI, berikan jalur file dan biarkan Amazon Cognito menyandikannya untuk Anda. ## Menentukan kustomisasi CSS dalam branding klasik Anda dapat mengkustomisasi CSS untuk halaman aplikasi yang di-hosting, dengan pembatasan berikut: + Anda dapat menggunakan salah satu nama kelas CSS berikut: + `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` + Nilai properti dapat berisi HTML, kecuali untuk nilai-nilai berikut:`@import`,, `@supports``@page`, atau `@media` pernyataan, atau Javascript. Anda dapat mengkustomisasi properti CSS berikut. **Label** + **bobot huruf** adalah kelipatan 100 dari 100 sampai 900. + **warna** adalah warna teks. Harus berupa [nilai warna CSS yang legal](https://www.w3schools.com/cssref/css_colors_legal.php). **Bidang input** + **lebar** adalah lebar blok yang mengandung sebagai persentase. + **tinggi** adalah tinggi bidang input dalam piksel (px). + **warna** adalah warna teks. Ini bisa berupa setiap nilai warna CSS standar. + **warna latar belakang** adalah warna latar belakang bidang input. Ini bisa berupa setiap nilai warna CSS standar. + **perbatasan** adalah nilai batas CSS standar yang menentukan lebar, transparansi, dan warna perbatasan jendela aplikasi Anda. Lebar dapat berupa nilai dari 1px hingga 100px. Transparansi bisa jadi padat atau tidak ada. Warna bisa berupa setiap nilai warna standar. **Deskripsi teks** + **padding-top** adalah jumlah padding di atas deskripsi teks. + **padding-bottom** adalah jumlah padding di bawah deskripsi teks. + **tampilan** dapat berupa `block` atau `inline`. + **ukuran huruf** adalah ukuran huruf untuk deskripsi teks. + **warna** adalah warna teks. Harus berupa [nilai warna CSS yang legal](https://www.w3schools.com/cssref/css_colors_legal.php). **Tombol kirim** + **ukuran huruf** adalah ukuran huruf pada teks tombol. + **bobot huruf** adalah bobot huruf pada teks tombol: `bold`, `italic`, atau `normal`. + **margin** adalah string dari empat nilai yang menunjukkan ukuran margin atas, kanan, bawah, dan kiri untuk tombol. + **ukuran huruf** adalah ukuran huruf untuk deskripsi teks. + **lebar** adalah lebar teks tombol dalam persentase pada blok yang menampungnya. + **tinggi** adalah tinggi tombol dalam piksel (px). + **warna** adalah warna teks tombol. Ini bisa berupa setiap nilai warna CSS standar. + **warna latar belakang** adalah warna latar belakang tombol. Ini bisa berupa setiap nilai warna standar. **Banner** + **padding** adalah string dari empat nilai yang menunjukkan ukuran padding atas, kanan, bawah, dan kiri untuk spanduk. + **warna latar belakang** adalah warna latar belakang banner. Ini bisa berupa setiap nilai warna CSS standar. **Pengarahan tombol kirim** + **warna** adalah warna latar depan tombol saat Anda mengarahkan kursor ke atasnya. Ini bisa berupa setiap nilai warna CSS standar. + **warna latar belakang** adalah warna latar belakang tombol saat Anda mengarahkan kursor ke atasnya. Ini bisa berupa setiap nilai warna CSS standar. **Pengarahan tombol penyedia identitas** + **warna** adalah warna latar depan tombol saat Anda mengarahkan kursor ke atasnya. Ini bisa berupa setiap nilai warna CSS standar. + **warna latar belakang** adalah warna latar belakang tombol saat Anda mengarahkan kursor ke atasnya. Ini bisa berupa setiap nilai warna CSS standar. **Cek kata sandi tidak valid** + **warna** adalah warna teks pesan `"Password check not valid"`. Ini bisa berupa setiap nilai warna CSS standar. **Latar Belakang** + **warna latar belakang** adalah warna latar belakang pada jendela aplikasi. Ini bisa berupa setiap nilai warna CSS standar. **Pesan kesalahan** + **margin** adalah string dari empat nilai yang menunjukkan ukuran margin atas, kanan, bawah, dan kiri. + **padding** adalah ukuran padding. + **Ukuran huruf** adalah ukuran huruf. + **lebar** adalah lebar pesan kesalahan dalam persentase pada blok yang menampungnya. + **latar belakang** adalah warna latar belakang pada pesan kesalahan. Ini bisa berupa setiap nilai warna CSS standar. + **border** adalah string dari tiga nilai yang menentukan lebar, transparansi, dan warna perbatasan. + **warna** adalah warna teks pesan kesalahan. Ini bisa berupa setiap nilai warna CSS standar. + **ukuran kotak** digunakan untuk menunjukkan kepada browser apa yang harus disertakan oleh properti ukuran (lebar dan tinggi). **Tombol penyedia identitas** + **tinggi** adalah tinggi tombol dalam piksel (px). + **lebar** adalah lebar teks tombol dalam bentuk persentase dari blok yang menampungnya. + **rata-teks** adalah pengaturan perataan teks. Status tersebut dapat berupa `left`, `right`, atau `center`. + **margin-bawah** adalah pengaturan margin bawah. + **warna** adalah warna teks tombol. Ini bisa berupa setiap nilai warna CSS standar. + **warna latar belakang** adalah warna latar belakang tombol. Ini bisa berupa setiap nilai warna CSS standar. + **warna batas** adalah warna batas tombol. Ini bisa berupa setiap nilai warna CSS standar. **Deskripsi penyedia identitas** + **padding-top** adalah jumlah padding di atas deskripsi. + **padding-bottom** adalah jumlah padding di bawah deskripsi. + **tampilan** dapat berupa `block` atau `inline`. + **ukuran huruf** adalah ukuran huruf untuk deskripsi. + **color** adalah warna teks untuk header bagian IDP misalnya **Masuk dengan ID perusahaan Anda**. Harus berupa [nilai warna CSS yang legal](https://www.w3schools.com/cssref/css_colors_legal.php). **Teks legal** + **warna** adalah warna teks. Ini bisa berupa setiap nilai warna CSS standar. + **Ukuran huruf** adalah ukuran huruf. Saat Anda menyesuaikan **teks Hukum**, Anda menyesuaikan pesan **Kami tidak akan memposting ke akun Anda tanpa meminta terlebih dahulu** yang ditampilkan di bawah penyedia identitas sosial di halaman masuk. **Logo** + **lebar maksimal** adalah lebar maksimal dalam persentase pada blok yang menampungnya. + **tinggi maksimal** adalah tinggi maksimal dalam persentase pada blok yang menampungnya. + **background-color** adalah warna latar belakang untuk log dengan bagian transparan. Harus berupa [nilai warna CSS yang legal](https://www.w3schools.com/cssref/css_colors_legal.php). **Fokus bidang input** + **warna batas** adalah warna dari bidang input. Ini bisa berupa setiap nilai warna CSS standar. + **garis batas** adalah lebar perbatasan bidang input, dalam piksel. **Tombol sosial** + **tinggi** adalah tinggi tombol dalam piksel (px). + **rata-teks** adalah pengaturan perataan teks. Status tersebut dapat berupa `left`, `right`, atau `center`. + **lebar** adalah lebar teks tombol dalam bentuk persentase dari blok yang menampungnya. + **margin-bawah** adalah pengaturan margin bawah. **Pemeriksaan kata sandi valid** + **warna** adalah warna teks pesan `"Password check valid"`. Ini bisa berupa setiap nilai warna CSS standar. ## Menyesuaikan UI yang dihosting dengan branding klasik di Konsol Manajemen AWS Anda dapat menggunakan Konsol Manajemen AWS untuk menentukan pengaturan penyesuaian UI untuk aplikasi Anda. **catatan** Anda dapat melihat UI yang dihosting dengan penyesuaian Anda dengan membangun URL berikut, dengan spesifik untuk kolam pengguna Anda, dan mengetikkannya ke peramban: ` https:///login?response_type=code&client_id=&redirect_uri=` Anda mungkin harus menunggu hingga satu menit untuk menyegarkan peramban Anda sebelum perubahan yang dibuat di konsol muncul. Domain Anda ditampilkan di tab **Integrasi aplikasi** di bawah **Domain**. ID klien aplikasi dan URL callback ditampilkan di bawah **Klien aplikasi**. **Cara menentukan pengaturan kustomisasi UI aplikasi** 1. Masuk ke [konsol Amazon Cognito](https://console.aws.amazon.com/cognito/home). 1. Di panel navigasi, pilih **Kumpulan Pengguna**, dan pilih kumpulan pengguna yang ingin Anda edit. 1. [Buat domain](cognito-user-pools-assign-domain.md) dari tab **Domain**, atau perbarui domain yang ada. Dalam **versi Branding**, atur domain Anda untuk menggunakan **Hosted UI (klasik)**. 1. Pilih menu **Login Terkelola**. 1. Untuk menyesuaikan setelan UI untuk semua klien aplikasi, cari **Style** di bawah **Setelan UI Hosted** dan pilih **Edit**. 1. Untuk menyesuaikan pengaturan UI untuk satu klien aplikasi, buka menu Klien **aplikasi dan pilih klien** aplikasi yang ingin Anda ubah, lalu cari **gaya UI Hosted (klasik)** dan pilih **Override**. Pilih **Edit**. 1. Untuk mengunggah file gambar logo Anda sendiri, pilih **Pilih file** atau **Ganti file saat ini**. 1. Untuk menyesuaikan CSS UI yang dihosting, unduh **CSS template.css** dan modifikasi template dengan nilai yang ingin Anda sesuaikan. Hanya kunci yang disertakan dalam template yang dapat digunakan dengan UI yang dihosting. Tombol CSS yang ditambahkan tidak akan tercermin di UI Anda. Setelah Anda menyesuaikan file CSS, pilih **Pilih file atau Ganti file** **saat ini untuk mengunggah file** CSS kustom Anda. ## Menyesuaikan UI yang dihosting dengan pencitraan merek klasik di API kumpulan pengguna dan dengan AWS CLI Gunakan perintah berikut agar dapat menentukan pengaturan kustomisasi UI aplikasi untuk kolam pengguna Anda. **Untuk mendapatkan pengaturan penyesuaian UI untuk UI aplikasi bawaan kumpulan pengguna, gunakan operasi API berikut.** + AWS CLI: `aws cognito-idp get-ui-customization` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html) **Untuk menyetel setelan kustomisasi UI untuk UI aplikasi bawaan kumpulan pengguna, gunakan operasi API berikut.** + AWS CLI dari file gambar: `aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file fileb://"" --css ".label-customizable{ color: ;}"` + AWS CLI dengan gambar yang dikodekan sebagai teks biner Base64: `aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file --css ".label-customizable{ color: ;}"` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)