Contoh kontrol tampilan verifikasi

Gunakan kontrol tampilan verifikasi untuk memverifikasi klaim, misalnya alamat email atau nomor telepon, dengan kode verifikasi yang dikirimkan kepada pengguna.

Tindakan VerificationControl

Kontrol tampilan verifikasi terdiri dari dua langkah (tindakan):

1. Minta tujuan dari pengguna, seperti alamat email atau nomor telepon, tempat kode verifikasi harus dikirim. Ketika pengguna memilih tombol Kirim KodeTindakan SendCode dari kontrol tampilan verifikasi akan dijalankan. Tindakan SendCode menghasilkan kode, yang membuat konten yang akan dikirim, dan mengirimkannya kepada pengguna. Nilai alamat dapat diisi sebelumnya dan berfungsi sebagai autentikasi faktor kedua.

   

2. Setelah kode dikirim, pengguna membaca pesan, memasukkan kode verifikasi ke dalam kontrol yang disediakan oleh kontrol tampilan, dan memilih Verifikasi Kode. Dengan memilih Verifikasi Kode, Tindakan VerifyCode akan dijalankan untuk memverifikasi kode yang terkait dengan alamat. Jika pengguna memilih Kirim Kode Baru, tindakan pertama akan dijalankan lagi.

   

Elemen yang diperlukan VerificationControl

VerificationControl harus berisi elemen berikut:

• Jenis DisplayControl adalah VerificationControl.
• DisplayClaims
  • Kirim ke - Satu atau beberapa klaim yang menentukan ke mana harus mengirim kode verifikasi. Misalnya, email atau kode negara dan nomor telepon.
  • Kode verifikasi - Kode verifikasi mengklaim bahwa pengguna menyediakan setelah kode dikirim. Klaim ini harus ditetapkan sebagaimana diperlukan, dan ControlClaimType harus diatur ke VerificationCode.
• Klaim output (opsional) untuk dikembalikan ke halaman yang ditegaskan sendiri setelah pengguna menyelesaikan proses verifikasi. Misalnya, email atau kode negara dan nomor telepon. Profil teknis yang ditegaskan sendiri menggunakan klaim untuk menjaga data atau menggelembungkan klaim output ke langkah orkestrasi berikutnya.
• Dua Action dengan nama berikut:
  • SendCode - Mengirim kode ke pengguna. Tindakan ini biasanya berisi dua profil teknis validasi, untuk menghasilkan kode dan mengirimkannya.
  • VerifyCode - Memverifikasi kode. Tindakan ini biasanya berisi satu profil teknis validasi.

Dalam contoh di bawah ini, kotak teks email ditampilkan di halaman. Saat pengguna memasukkan alamat email mereka dan memilih SendCode, tindakan SendCode akan dipicu di back-end Azure AD B2C.

Kemudian, pengguna memasukkan verificationCode dan memilih VerifyCode untuk memicu tindakan VerifyCode di back-end. Jika semua validasi lolos, VerificationControl dianggap selesai dan pengguna dapat melanjutkan ke langkah berikutnya.

<DisplayControl Id="emailVerificationControl" UserInterfaceControlType="VerificationControl">
  <DisplayClaims>
    <DisplayClaim ClaimTypeReferenceId="email"  Required="true" />
    <DisplayClaim ClaimTypeReferenceId="verificationCode" ControlClaimType="VerificationCode" Required="true" />
  </DisplayClaims>
  <OutputClaims>
    <OutputClaim ClaimTypeReferenceId="email" />
  </OutputClaims>
  <Actions>
    <Action Id="SendCode">
      <ValidationClaimsExchange>
        <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="GenerateOtp" />
        <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="SendGrid" />
      </ValidationClaimsExchange>
    </Action>
    <Action Id="VerifyCode">
      <ValidationClaimsExchange>
        <ValidationClaimsExchangeTechnicalProfile TechnicalProfileReferenceId="VerifyOtp" />
      </ValidationClaimsExchange>
    </Action>
  </Actions>
</DisplayControl>