英文:
Can We Create Custom Login Page In Azure AD B2C (User Flow or Custom Flow)
问题
I have a ReactJs app that I want to use AAD B2C to manage Identity for my users.
我有一个ReactJs应用程序，我想使用AAD B2C来管理我的用户身份。
I created the AAD B2C tenant, then registered application type SPA, then I can login using this example repo: https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/2-call-api-b2c/SPA.
我创建了AAD B2C租户，然后注册了SPA应用程序类型，然后我可以使用此示例存储库登录：https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/2-call-api-b2c/SPA。
I wonder that can I custom this login page, for example I wrote a login page in my react app contain my Logo and my site main color, I want the login page follow that style.
我想知道是否可以自定义此登录页面，例如，在我的React应用程序中编写了一个包含我的标志和网站主要颜色的登录页面，我希望登录页面遵循这种样式。
英文:
I haved an ReactJs app that I want to use AAD B2C to manage Identity for my users.
I created the AAD B2C tenant, then registered application type SPA, then I can login using this example repo: https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/2-call-api-b2c/SPA.
I wonder that can I custom this login page, for example I wrote a login page in my react app contain my Logo and my site main color, I want the login page follow that style.
答案1
得分: 1
"To create the Custom login page, refer this MsDoc as suggested by junnas."
I created a sample custom HTML page like below:
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h2>Login Page</h2><br>
<div id="api"></div>
<div class="login">
<form id="login" method="get" action="login.php">
<label><b>User Name</b></label>
<input type="text" name="Uname" id="Uname" placeholder="Username">
<br><br>
<label><b>Password</b></label>
<input type="Password" name="Pass" id="Pass" placeholder="Password">
<br><br>
<input type="button" name="log" id="log" value="Log In Here">
<br><br>
<input type="checkbox" id="check">
<span>Remember me</span>
<br><br>
Forgot <a href="#">Password</a>
</form>
</div>
</body>
</html>
I created an Azure Storage account and uploaded the customize-ui.html file in the container like below:
And configured the CORS policy like below:
When I tested the CORS policy, I got the 200 OK response:
Now Go to Azure AD B2C User Flow -> Page Layouts -> Set Use custom page content as YES:
When I run the user flow, the custom page is displayed successfully like below:
英文:
> To create the Custom login page, refer this
> MsDoc as suggested by junnas.
I created a sample custom HTML page like below:
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h2>Login Page</h2><br>
<div id="api"></div>
<div class="login">
<form id="login" method="get" action="login.php">
<label><b>User Name
</b>
</label>
<input type="text" name="Uname" id="Uname" placeholder="Username">
<br><br>
<label><b>Password
</b>
</label>
<input type="Password" name="Pass" id="Pass" placeholder="Password">
<br><br>
<input type="button" name="log" id="log" value="Log In Here">
<br><br>
<input type="checkbox" id="check">
<span>Remember me</span>
<br><br>
Forgot <a href="#">Password</a>
</form>
</div>
</body>
</html>
I created an Azure Storage account and uploaded the customize-ui.html file in the container like below:
And configured the CORS policy like below:
When I tested the CORS policy, I got the 200 OK response:
Now Go to Azure AD B2C User Flow -> Page Layouts -> Set Use custom page content as YES:
When I run the user flow, the custom page is displayed successfully like below:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论