Azure B2C中为回复URL添加变量解决多语言重定向限制问题

我完全懂你的困扰——Azure B2C最多只支持20个回复URL，但你的应用有一堆带语言前缀的路径（比如https://mydomain/de-de/projects、https://mydomain/en-us/projects这类），根本没法把所有可能的语言路径都加进去。遗憾的是，Azure B2C目前不支持直接在redirect_uri里用变量（比如:lang这种通配符形式），不过我有个巧妙的 workaround 能解决这个问题：借助state参数来传递目标重定向URL。

具体实现步骤 #

1. 构造登录URL时，把目标URL注入到state参数里

生成登录请求URL的时候，把你真正想跳转的目标URL拼接到state参数中，同时保留原本的state值（如果有的话），用一个特定的分隔符（比如url）把两者分开。这样state参数会在登录/注册流程完成后，原封不动地返回给你的应用。

示例代码（createLoginUrl()方法）：

let url = that.loginUrl + '?response_type=' + response_type + '&client_id=' + encodeURIComponent(that.clientId) + '&state=' + encodeURIComponent((state) + 'url' + returnedUrl) + '&redirect_uri=' + encodeURIComponent(window.location.origin) + '&scope=' + encodeURIComponent(that.scope);

这里有两个必须注意的细节：

• redirect_uri必须设为当前页面的同源地址（比如window.location.origin），而且这个地址一定要添加到Azure B2C应用的回复URL列表里，保证B2C能正常回调。
• 要用encodeURIComponent对拼接后的state值编码，避免特殊字符引发解析错误。

2. 回调时解析state参数，跳转到目标URL

当B2C完成登录/注册流程、回调到你的应用后，在tryLogin()方法里拆分state参数，提取出之前注入的目标URL，然后跳转过去就行。

优化后的拆分代码：

const statePartsWithUrl = (parts['state'] + '').split('url');
let state = '';
let returnedUrl = '';
if (statePartsWithUrl != null) {
    state = statePartsWithUrl[0]; // 还原原本的state值
    returnedUrl = statePartsWithUrl[1]; // 提取目标重定向URL
}
window.location.href = returnedUrl;

这个方案已经经过实际验证，运行起来很稳定，完美绕开了B2C回复URL数量限制的问题。

内容的提问来源于stack exchange，提问作者Samy Sammour