Azure AD B2C自定义注册策略：在注册页面添加登录按钮

方式一：修改自定义UI HTML模板 #

要是你的应用用了自定义UI模板，直接在注册页面的HTML里添加按钮即可：

• 找到注册表单合适的位置（比如表单底部），插入这段代码：

<div class="login-toggle">
  <p>已有账号？</p>
  <button type="button" onclick="window.location.href='{{SignInUrl}}'">去登录</button>
</div>

• 若使用Azure AD B2C自定义策略，{{SignInUrl}}是内置占位符，会自动替换为登录页地址；自主开发的注册页面直接填写你的登录页实际路径就行。

方式二：通过自定义策略XML配置 #

想从策略层面控制跳转逻辑的话，修改注册策略的XML文件：

1. 打开你的自定义注册策略XML文件
2. 找到注册页对应的ContentDefinition节点，在LocalizedResources中添加登录链接的文本和跳转动作：

<LocalizedResources Id="api.signup.en">
  <LocalizedStrings>
    <LocalizedString ElementType="UxElement" StringId="loginLink">已有账号？点这登录</LocalizedString>
    <LocalizedString ElementType="Action" StringId="SignUpWithLogonEmailExchange">SignIn</LocalizedString>
  </LocalizedStrings>
</LocalizedResources>

3. 同时在自定义UI的HTML中引用这个本地化字符串：

<a href="#" id="loginLink" data-action="signin">{{localizedStrings.loginLink}}</a>

样式调整（贴合参考效果） #

添加一段CSS美化按钮，匹配需求的视觉效果：

.login-toggle {
  text-align: center;
  margin-top: 15px;
}

.login-toggle button {
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  color: #0066cc;
}

.login-toggle button:hover {
  border-color: #0066cc;
  background: #f5f8fa;
}

内容的提问来源于stack exchange，提问作者Shyam Sunder