如何为Azure AD B2C登录页添加EN/FR语言切换按钮

实现核心依托Azure AD B2C原生支持的ui_locales请求参数，不需要改写服务端逻辑，全程只需要做租户侧配置加前端模板改动就行，步骤如下：

• 前置配置：开启用户流的多语言支持
  进入你当前使用的用户流（注册/登录、密码重置等流程都要单独配置），找到语言设置项，将英语、法语两个语言启用即可。如果需要调整默认翻译文案，可以在对应语言条目下上传自定义的翻译资源，没有特殊文案需求直接用系统自带的官方翻译包就可以，这步不做的话传语言参数不会生效。
• 自定义页面加切换按钮和逻辑
  如果你已经在用自定义HTML模板托管B2C登录页，直接在页面合适位置（一般是右上角）加两个切换按钮，代码参考：

  <div style="text-align: right; margin: 10px;">
    <button onclick="changeLang('en')" style="margin: 0 5px;">EN</button>
    <button onclick="changeLang('fr')" style="margin: 0 5px;">FR</button>
  </div>
  

  再在页面脚本里加切换逻辑，核心是修改当前URL的ui_locales参数后重定向，B2C识别到参数会自动渲染对应语言的页面：

  function changeLang(lang) {
    const currentUrl = new URL(window.location);
    currentUrl.searchParams.set('ui_locales', lang);
    window.location.replace(currentUrl.toString());
  }
  

• 可选优化：全流程语言保持
  如果需要用户选完语言后，后续跳转的注册页、密码重置页、MFA页都保持选中的语言，可以在切换语言时把选中的语言码存在localStorage里，在你自己的应用发起B2C认证请求时，把存储的语言码拼到认证请求的ui_locales参数里，这样整个认证链路都会保持用户选的语言，不会切回默认语言。

注意：不要自己写前端DOM替换去硬改页面文案，ui_locales是OIDC标准的语言指定参数，B2C原生适配，传对参数后所有内置文案、错误提示、按钮文字都会自动切换成对应语言，不会出现漏翻的问题。你之前查的官方文档只覆盖了服务侧语言包的配置方法，自定义切换按钮属于前端页面自定义范畴，不在服务配置文档的覆盖范围内，所以没找到相关说明。

内容的提问来源于stack exchange，提问作者MJ X