Menyesuaikan halaman web masuk dan daftar bawaan - Amazon Cognito
Menentukan logo kustom untuk aplikasiMenentukan kustomisasi CSS untuk aplikasiMenentukan pengaturan kustomisasi UI untuk kolam pengguna () AWS Management ConsoleMenentukan pengaturan kustomisasi UI untuk kolam pengguna (AWS CLIdan AWS API)

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Menyesuaikan halaman web masuk dan daftar bawaan

Anda dapat menggunakan AWS Management Console, atau AWS CLI atau API, untuk menentukan pengaturan penyesuaian untuk pengalaman UI aplikasi bawaan. Anda dapat mengunggah gambar logo kustom yang akan ditampilkan di aplikasi. Anda juga dapat menggunakan cascading style sheet (CSS) untuk menyesuaikan tampilan UI.

Anda dapat menentukan pengaturan kustomisasi UI aplikasi untuk satu klien (dengan clientId spesifik) atau untuk semua klien (dengan menetapkan clientId ke ALL). Jika Anda menentukan ALL, konfigurasi default akan digunakan untuk setiap klien yang tidak memiliki set kustomisasi UI sebelumnya. Jika Anda menentukan pengaturan kustomisasi UI untuk klien tertentu, itu tidak akan kembali lagi ke konfigurasi ALL.

Permintaan yang menetapkan kustomisasi UI Anda tidak boleh melebihi 135 KB. Dalam kasus yang jarang terjadi, jumlah header permintaan, file CSS Anda, dan logo Anda mungkin melebihi 135 KB. Amazon Cognito mengkodekan file gambar ke Base64. Ini meningkatkan ukuran gambar 100 KB menjadi 130 KB, menyimpan lima KB untuk header permintaan dan CSS Anda. Jika permintaan terlalu besar, permintaan SetUICustomization API AWS Management Console atau Anda mengembalikan request parameters too large kesalahan. Sesuaikan gambar logo Anda menjadi tidak lebih dari 100KB dan file CSS Anda tidak lebih besar dari 3 KB. Anda tidak dapat mengatur CSS dan kustomisasi logo secara terpisah.

catatan

Untuk menyesuaikan UI Anda, Anda harus mengatur domain untuk kolam pengguna Anda.

Amazon Cognito memusatkan logo kustom Anda di atas kolom input di. Titik akhir masuk

Pilih file PNG, JPG, atau JPEG yang dapat menskalakan hingga 350 x 178 piksel untuk logo UI yang di-host khusus Anda. File logo Anda dapat berukuran tidak lebih dari 100 KB, atau 130 KB setelah Amazon Cognito dikodekan ke Base64. Untuk menyetel ImageFile SetUICustomizationdalam API, konversikan file Anda ke string teks yang dikodekan Base64 atau, diAWS CLI, sediakan jalur file dan biarkan Amazon Cognito menyandikannya untuk Anda.

Menentukan kustomisasi CSS untuk aplikasi

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.

Bidang input

  • lebar blok yang menampungnya dalam 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.

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 banner.

  • 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.

  • perbatasan adalah string dari tiga nilai 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.

Teks legal

  • warna adalah warna teks. Ini bisa berupa setiap nilai warna CSS standar.

  • Ukuran huruf adalah ukuran huruf.

catatan

Saat Anda menyesuaikan teks Legal, Anda menyesuaikan pesan Kami tidak akan memposting ke akun Anda tanpa meminta terlebih dahulu yang ditampilkan di bawah penyedia identitas sosial di halaman login.

Logo

  • lebar maksimal adalah lebar maksimal dalam persentase pada blok yang menampungnya.

  • tinggi maksimal adalah tinggi maksimal dalam persentase pada blok yang menampungnya.

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.

Menentukan pengaturan kustomisasi UI untuk kolam pengguna () AWS Management Console

Anda dapat menggunakan AWS Management Console untuk menentukan pengaturan kustomisasi 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://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url> 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 panggilan balik Anda ditampilkan di klien aplikasi.

Cara menentukan pengaturan kustomisasi UI aplikasi

  1. Masuk ke konsol Amazon Cognito.

  2. Di panel navigasi, pilih Kolam Pengguna, lalu pilih kolam pengguna yang ingin Anda edit.

  3. Pilih tab Integrasi aplikasi.

  4. Untuk menyesuaikan pengaturan UI untuk semua klien aplikasi, cari Kustomisasi UI yang dihosting, lalu pilih Edit.

  5. Untuk menyesuaikan pengaturan UI untuk satu klien aplikasi, cari klien Aplikasi dan pilih klien aplikasi yang ingin Anda modifikasi, lalu cari Kustomisasi UI yang Dihosting dan pilih Edit. Untuk mengalihkan klien aplikasi dari kustomisasi default pangkalan pengguna ke penyesuaian khusus klien, pilih Gunakan setelan tingkat klien.

  6. Untuk mengunggah file gambar logo Anda sendiri, pilih Pilih file atau Ganti file saat ini.

  7. 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 di-host. Ditambahkan tombol CSS tidak akan tercermin dalam UI Anda. Setelah Anda menyesuaikan file CSS, pilih Pilih file atau Ganti file saat ini untuk mengunggah file CSS khusus Anda.

Menentukan pengaturan kustomisasi UI untuk kolam pengguna (AWS CLIdan AWS API)

Gunakan perintah berikut agar dapat menentukan pengaturan kustomisasi UI aplikasi untuk kolam pengguna Anda.

Cara mendapatkan pengaturan kustomisasi kustomisasi UI untuk UI kustomisasi UI untuk UI kustomisasi UI untuk UI kustomisasi UI untuk UI kustomisasi UI untuk UI kustomisasi UI untuk UI kustomisasi
Cara menyetel pengaturan kustomisasi kustomisasi UI untuk UI kustomisasi kustomisasi UI untuk UI kustomisasi kustomisasi UI untuk UI kustomisasi kustomisasi UI untuk UI kustomisasi UI untuk

  • AWS CLIdari file gambar: 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 CLIdengan gambar yang dikodekan sebagai teks biner 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>;}"

  • AWS API: SetUICustomization