Customize the Azure AD B2C user interface (UI)

Đó, nó khác hơn đồ gốc rồi đó thấy hơm? Tuy là có hơi í ẹ tí nhưng mà mình tin bạn sẽ làm được đẹp hơn mình mà há ^^

Bước 1: Làm đẹp UI

Tạo 1 trang html trong đó có element là <div id=”api”>< /div> đặt ở đâu đó trong thẻ body. Phần này khi hiển thị lên web thì nội dung của Azure AD B2C sẽ được tự động thêm vào.  Rồi sau đó cứ style cho nó như 1 trang web thông thuờng.

Chẳng hạn như ở đây mình tạo file unified.html có nội dung như sau:

Còn css thì mình style kiểu kiểu vầy

(Bạn có thể tham khảo thêm ở đây: https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-ui-customization)

Bước 2: Host files

Bạn có thể up các file html, css, hình,… ở đâu đó. Ở đây, mình sử dụng Azure Blob Storage

• New -> Storage -> Storage account – blob, file, table, queue
• Điền thông tin
• Tạo container với access type là blob
• Up hết các files vào đây. Có thể sử dụng Microsoft Azure Storage Explorer (http://storageexplorer.com/) để quản lý files cho dễ dàng.

Bước 3: Configure CORS

Trong phần setting của storage, bạn chọn CORS.

• Click vào Add.
• Đặt giá trị cho Allowed origins là *.
• Chọn GET và OPTIONS cho phần Allowed verbs.
• Đặt giá trị cho Allowed headers là *.
• Đặt giá trị cho Exposed headers là *.
• Maximum age (seconds) là 200.

Bước 4: Tạo policy và trỏ tới Custom page URI

Trong Azure AD B2C Settings. Bạn sẽ tạo các policy mà mình muốn. Chẳng hạn như ở đây mình tạo Sign-up or sign-in policy. Ở phần điền thông tin bạn chọn vào “Page UI customization” ở dưới cùng. Xong nó sẽ có phần “Unified sign-up or sign-in page”. Trong phần này bạn sẽ thiết lập để trỏ tới đường dẫn chứa các file của mình:

Ok, done. Bạn có thể vào trang này https://aadb2cplayground.azurewebsites.net/ để test thử các policies của mình cũng được nè.