Angular8中Azure AD B2C传递自定义state变量至公共落地页问题

我来帮你解决这个问题，你遇到的两个核心问题其实都是因为对angular-oauth2-oidc的State传递机制理解有误，下面分步给出清晰的解决方案：

1. 为什么不能直接在AuthConfig里加state？ #

AuthConfig类型确实没有state这个属性，所以编辑器会抛出类型错误。正确的做法是通过initLoginFlow()方法的参数来传递自定义State——这个方法专门支持传入自定义State值，框架会自动把它附加到认证请求中，Azure AD B2C也会在认证完成后原封不动地返回这个值。

2. 解决重定向URL不匹配的问题 #

你之前尝试手动把State加到redirectUri里导致不匹配，是因为Azure AD B2C严格校验重定向URL必须和你在门户中配置的完全一致（不能额外拼接参数）。实际上，State会通过URL的state参数传递，框架和Azure会自动处理这个参数的传递与返回，不需要你手动修改redirectUri。

3. 具体实现步骤 #

步骤1：修改登录逻辑，传递自定义State #

根据不同的登录入口（Login1.html/Login2.html），在调用登录方法时传入对应的State值：

// app.component.ts
public login(loginSource: string) {
  // 传入自定义State，比如'log1'对应Login1，'log2'对应Login2
  this.oauthService.initLoginFlow(loginSource);
}

如果是独立的登录页面（比如Login1.html），可以通过跨窗口调用的方式触发登录：

<!-- Login1.html -->
<button onclick="window.opener.angularComponentRef.login('log1'); window.close();">Login from Login1</button>

（如果是Angular组件形式的登录页，直接通过组件通信调用login('log1')即可）

步骤2：在认证完成后获取并存储State #

在AppComponent的初始化逻辑中，登录成功后获取返回的State，并存储到localStorage（方便index.html在Angular初始化前就能访问）：

// app.component.ts
constructor(private http: HttpClient, private oauthService: OAuthService) {
  this.configure();
  // 尝试完成隐式流登录
  const isLoggedIn = this.oauthService.tryLoginImplicitFlow();
  
  if (isLoggedIn) {
    // 获取返回的自定义State
    const customState = this.oauthService.state;
    console.log('登录来源:', customState);
    
    // 存储到localStorage，供index.html使用
    if (customState) {
      localStorage.setItem('loginSource', customState);
    }
  }
}

步骤3：在index.html中获取State值 #

在index.html的<script>标签中，直接读取localStorage中的值即可：

<!-- index.html -->
<script>
  window.addEventListener('DOMContentLoaded', () => {
    const loginSource = localStorage.getItem('loginSource');
    if (loginSource) {
      console.log('从index.html获取登录来源:', loginSource);
      // 这里可以根据loginSource做自定义逻辑，比如显示不同内容
      if (loginSource === 'log1') {
        alert('欢迎来自Login1的用户！');
        // 执行Login1专属的初始化逻辑
      }
    }
  });
</script>

4. 额外注意事项 #

• 确保Azure AD B2C应用门户中配置的重定向URL是http://localhost:4200/index.html，不要添加任何额外参数。
• 你的auth.config.ts已经正确设置了strictDiscoveryDocumentValidation: false，这对于Azure AD B2C是必要的，因为它的发现文档不完全符合OIDC标准。
• 如果需要在Angular组件中使用State，直接通过this.oauthService.state获取即可，无需从localStorage读取。

内容的提问来源于stack exchange，提问作者Athulya Ratheesh