Penyesuaian halaman masuk Layanan Federasi Direktori Aktif tingkat lanjut
Layanan Federasi Direktori Aktif (AD FS) di Windows Server 2012 R2 dan yang lebih baru mendukung penyesuaian pengalaman masuk pengguna. Untuk sebagian besar skenario, Anda dapat menggunakan cmdlet Windows PowerShell bawaan untuk mengonfigurasi halaman masuk Layanan Federasi Direktori Aktif. Pendekatan yang disarankan adalah menggunakan perintah Windows PowerShell bawaan untuk penyesuaian jika memungkinkan. Untuk informasi selengkapnya, lihat Kustomisasi masuk pengguna AD-FS.
Terkadang, Anda mungkin perlu memberikan pengalaman masuk yang tidak dapat diaktifkan dengan menggunakan perintah PowerShell yang disertakan dengan Layanan Federasi Direktori Aktif. Anda dapat mengonfigurasi pengalaman masuk dengan menambahkan kode kustom ke file onload.js yang disediakan dengan Layanan Federasi Direktori Aktif. Kode file dijalankan di semua halaman LAYANAN Federasi Direktori Aktif.
Pertimbangan
Sebelum Anda mulai menyesuaikan halaman masuk Layanan Federasi Direktori Aktif, tinjau pertimbangan penting berikut.
Penting
Setiap perubahan kustomisasi yang memengaruhi alur pengalihan atau memodifikasi parameter protokol yang digunakan oleh LAYANAN Federasi Direktori Aktif tidak didukung.
File onload.js dijalankan di semua halaman Layanan Federasi Direktori Aktif, termasuk halaman masuk berbasis formulir, halaman penemuan realm beranda, dan sebagainya. Selalu pastikan kode kustom Anda hanya dijalankan seperti yang dimaksudkan dan tidak secara tak terduga.
Layanan Federasi Direktori Aktif dilengkapi dengan tema web bawaan yang disebut default. Anda tidak dapat mengubah konten onload.js yang membuat tema web default. Untuk memperbarui file onload.js, buat dan gunakan tema web kustom untuk halaman masuk Layanan Federasi Direktori Aktif. Untuk informasi selengkapnya, lihat Kustomisasi masuk pengguna AD-FS.
File onload.js asli untuk tema web default juga berisi kode untuk menangani penyajian halaman untuk faktor formulir yang berbeda. Pendekatan penyesuaian yang direkomendasikan adalah menambahkan kode logika kustom Anda ke file onload.js yang ada. Jangan ubah konten file onload.js asli.
Saat Anda mereferensikan elemen HTML, selalu periksa keberadaan elemen sebelum bertindak pada elemen . Langkah ini memberikan ketahanan dan memastikan logika kustom tidak dijalankan pada halaman yang tidak berisi elemen ini. Untuk mengidentifikasi elemen HTML yang ada, lihat sumber HTML di halaman masuk AD FS.
Disarankan untuk memvalidasi kustomisasi Anda di lingkungan alternatif dan menjalankan pengujian sebelum memindahkan kustomisasi Anda ke server AD FS produksi. Langkah ini mengurangi kemungkinan mengekspos pengguna akhir ke kustomisasi sebelum validasi.
Langkah-langkah kustomisasi
Bagian berikut ini menyediakan langkah-langkah untuk mengkustomisasi konten file onload.js untuk halaman masuk Ad FS.
Membuat tema web kustom
Untuk menambahkan logika kustom Anda ke file onload.js, langkah pertama adalah membuat tema web kustom. Metode cepat adalah mengekspor tema web Default lalu menggunakan kode asli sebagai dasar untuk kustomisasi Anda.
Jalankan cmdlet berikut untuk membuat tema web kustom dengan menduplikasi tema web default:
New-AdfsWebTheme –Name custom –SourceName default
Hasilkan file onload.js
Langkah selanjutnya adalah mengekspor tema web kustom Anda sehingga Anda memiliki file onload.js yang dapat Anda perbarui.
Jalankan cmdlet berikut untuk mengekspor tema web kustom Anda dan buat file onload.js:
Export-AdfsWebTheme –Name default –DirectoryPath c:\theme
File onload.js ditempatkan di folder skrip di direktori yang ditentukan dalam cmdlet. Dalam contoh, folder yang ditentukan adalah c:\theme.
Menambahkan penyesuaian
Sekarang Anda siap untuk memodifikasi konten onload.js dan menambahkan kode logika kustom untuk skenario Anda. Seperti disebutkan, pastikan untuk menambahkan kode kustom Anda ke akhir file onload.js.
Lihat bagian Contoh berikut untuk cuplikan kode yang menunjukkan kustomisasi umum.
Mengubah file onload.js target
Setelah menambahkan penyesuaian, Anda perlu memperbarui tema web LAYANAN Federasi Direktori Aktif untuk menggunakan file onload.js Anda daripada file onload.js asli.
Jalankan cmdlet berikut untuk mengatur file onload.js Anda sebagai target untuk definisi tema web:
Untuk Layanan Federasi Direktori Aktif di Windows Server 2016 dan yang lebih baru:
Set-AdfsWebTheme -TargetName custom -OnLoadScriptPath "c:\theme\script\onload.js"Untuk Layanan Federasi Direktori Aktif di Windows Server 2012 R2:
Set-AdfsWebTheme -TargetName custom -AdditionalFileResource @{Uri='/adfs/portal/script/onload.js';path="c:\theme\script\onload.js"}
Menerapkan kustomisasi ke Layanan Federasi Direktori Aktif
Langkah terakhir adalah menerapkan kustomisasi Anda ke halaman masuk Layanan Federasi Direktori Aktif.
Jalankan cmdlet berikut untuk memperbarui Layanan Federasi Direktori Aktif dengan kustomisasi Anda:
Set-AdfsWebConfig -ActiveThemeName custom
Contoh
Contoh berikut menyediakan kode kustom yang dapat Anda tambahkan ke file onload.js untuk mengonfigurasi halaman masuk Layanan Federasi Direktori Aktif.
Catatan
Selalu tambahkan kode kustom ke akhir file onload.js.
Mengubah string judul halaman masuk
Halaman masuk berbasis formulir Layanan Federasi Direktori Aktif menampilkan judul di atas bidang input pengguna. Nilai judul default adalah "Masuk dengan akun organisasi Anda."
Ganti nilai string default dengan string kustom dengan menambahkan kode berikut ke file onload.js. Dalam kode, atur nilai loginMessage.innerHTML parameter ke string kustom yang akan digunakan untuk judul.
// Sample code to change page title string
// Check if loginMessage element is present
var loginMessage = document.getElementById('loginMessage');
if (loginMessage)
{
// If loginMessage element is present, change title to custom value
loginMessage.innerHTML = 'Custom title string value';
}
Menerima masuk nama akun SAM
Halaman masuk berbasis formulir Layanan Federasi Direktori Aktif mendukung dua metode masuk secara default:
userPrincipalName": A user principal name (UPN), such asuser@contoso.com`.samAccountName: Nama akun Security Account Manager (SAM) yang memenuhi syarat domain, seperticontoso\userataucontoso.com\user.
Pertimbangkan skenario di mana semua pengguna berada di domain yang sama dan pengguna hanya mengetahui nama akun SAM mereka. Anda dapat memperbarui halaman masuk untuk memungkinkan pengguna masuk dengan menggunakan nama akun SAM mereka saja.
Aktifkan masuk dari akun SAM hanya dengan menambahkan kode berikut ke file onload.js. Dalam kode, atur nilai userNameValue parameter ke domain yang diinginkan.
// Sample code to enable user login from SAM account name only
if (typeof Login != 'undefined'){
Login.submitLoginRequest = function () {
var u = new InputUtil();
var e = new LoginErrors();
var userName = document.getElementById(Login.userNameInput);
var password = document.getElementById(Login.passwordInput);
// Update login method with desired domain value
if (userName.value && !userName.value.match('[@\\\\]'))
{
var userNameValue = 'contoso.com\\' + userName.value;
document.forms['loginForm'].UserName.value = userNameValue;
}
// Check for user name errors
if (!userName.value) {
u.setError(userName, e.userNameFormatError);
return false;
}
// Check for password errors
if (!password.value)
{
u.setError(password, e.passwordEmpty);
return false;
}
// Update the form page
document.forms['loginForm'].submit();
return false;
};
}