In Previous tutorial I explained how to use Azure AD B2C . This tutorial is a continuous part of the previous tutorial. Here I will show how we can customize default Pages for sign up/Sign In .
Why to customize: Microsoft provides default page without branding and different theme which may not be match with any company branding /application . So just need to unified and seamless user experience better to customize page.
Default Page :
Customized Signup /Sing In page will look like - of course you can design better than this.
In order to achieve this we need 3 things to do
1. Prepare one html page with required css/js (can be inline or external css class)
2. Upload in storage or somewhere so it can be accessed from B2C
3. Customize the user flow from default to your html page
1. Html Page : I am creating with inline css if you want you can add external css ref. Also I have used some online customized bootstrap just to make it nicer. But sure you can make it better. Purpose is just to see how can we customize
Html Code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Azure B2C change login page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://www.markuptag.com/bootstrap/5/css/bootstrap.min.css">
<style type="text/css">
body {
background-color: #4887e6;
font-family: Verdana;
font-size: 14px;
}
.bg-light {
background-color:#dde4eb !important;
}
h2 {
font-size: medium !important;
color: blue !important;
}
#next {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
button {
background-color: #4CAF50 !important; /* Green */
border: none !important;
color: white !important;
padding: 10px 20px !important;
text-align: center !important;
text-decoration: none !important;
display: inline-block !important;
font-size: 14px !important;
margin: 2px 2px 2px 2px !important;
}
input[type=email] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
margin-bottom: 3px !important;
}
.dropdown_single {
width: 100%;
box-sizing: border-box !important;
border: 2px solid #ccc !important;
border-radius: 4px !important;
font-size: 16px !important;
background-color: white !important;
background-image: url('searchicon.png') !important;
background-position: 10px 10px !important;
background-repeat: no-repeat !important;
padding: 12px 20px 12px 40px !important;
margin-bottom: 3px !important;
}
input[type=password] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
margin-bottom: 3px !important;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
margin-bottom: 3px !important;
}
.buttons {
margin-top:2px!important;
}
ul {
list-style: none !important;
padding-inline-start: 20px !important;
}
a {
color: #8caad8 !important;
text-decoration: underline !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-4">
<div class="login-form bg-light mt-4 p-4">
<h4>Welcome To Azure AD B2C Example</h4>
<hr class="mt-2">
<div id="api" class="row g-3">
</div>
<hr class="mt-4">
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://www.markuptag.com/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Html output will look like without form .
in the above code you can design based on your branding , header ,footer . only thing that you need to add is below tag .where on render time Microsoft insert required form. Div/section Id must be "api"
<div id="api" class="row g-3">
</div>
2. Upload html and css file to Storage : upload this file to my storage
Go to storage account -> container -> create new container/select existing one-> upload your html file.
Uploaded file :
Go back to storage account and enable CORS to have access this storage file from external place.
Type CORS in search in left top and click ok
Allowed Origins: enter your organization instance/url name
Method - Get, options
Rest field you can put * and save .
3. Use in User Flow :
Go to Azure B2C tenants and from left menu click user flow and select B2C_1_singupsing" which you have create in previous part.
Click Page Layout and select
1. unified signup and sign in
2. user custom page content - Yes
3.custom page url- need to enter your html file url. to copy the url you can go to the file and click .you will see url which you need to copy
To test this either you can run your application or click on "Run User Flow" directly .
And here you go to your pages:
Sign In :
sign Up:
And we are done with customizing the default pages in B2C.
you can download all the azure samples code : https://github.com/mkumar8184/azure-sdk-services-samples
No comments:
Post a Comment
Thanks for your valuable comments