Angular4基于ng2-adal的Azure AD认证问题：哈希策略失效与id_token丢失

我来帮你搞定这两个在集成Azure AD认证时遇到的问题，逐个拆解说明：

问题1：哈希定位策略下认证失败 #

哈希路由（HashLocationStrategy）下认证失败，核心原因是Azure AD的回调URL和Angular的路由机制不匹配，以及ng4-adal的配置需要适配哈希路由。你可以按以下步骤调整：

1. 更新Azure AD应用注册的回复URL
   登录Azure门户，找到你的AD应用注册，在"认证"页面里，把回复URL设置成带哈希的格式，比如：
   http://localhost:4200/#/callback
   （这里的/callback是你Angular项目里用来处理AD回调的路由，可根据自己的路由调整）

2. 同步ng4-adal的redirectUri配置
   修改你的AdalConfig，确保redirectUri和上面设置的回复URL完全一致，比如：

   import {Injectable} from '@angular/core';
   @Injectable()
   export class AdalConfig {
     public get getAdalConfig(): any {
       return {
         tenant: 'YOUR_TENANT_ID',
         clientId: 'YOUR_CLIENT_ID',
         redirectUri: window.location.origin + '/#/callback',
         cacheLocation: 'localStorage', // 建议加上，提升token缓存的稳定性
         // 其他原有配置...
       };
     }
   }
   

3. 确保Angular正确启用哈希路由
   在你的AppModule里，确认已经注册了HashLocationStrategy：

   import { HashLocationStrategy, LocationStrategy } from '@angular/common';
   
   @NgModule({
     declarations: [/* 你的组件 */],
     imports: [/* 你的模块 */],
     providers: [
       { provide: LocationStrategy, useClass: HashLocationStrategy },
       AdalConfig,
       // 其他provider...
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

4. 回调路由的特殊处理
   确保处理AD回调的路由（比如/callback）不要被AdalGuard拦截，否则会陷入循环认证。可以在路由配置里给这个路由加上canActivate: []：

   const routes: Routes = [
     { path: 'callback', component: CallbackComponent, canActivate: [] },
     { path: 'dashboard', component: DashboardComponent, canActivate: [AdalGuard] },
     // 其他路由...
   ];
   

   然后在CallbackComponent的ngOnInit里手动触发回调处理：

   import { AdalService } from 'ng4-adal';
   import { Router } from '@angular/router';
   
   constructor(private adalService: AdalService, private router: Router) {}
   
   ngOnInit() {
     this.adalService.handleWindowCallback();
     // 处理完后跳转到首页或目标页面
     this.router.navigate(['/dashboard']);
   }
   

问题2：认证完成后id_token从URL中被移除 #

这其实是ng4-adal的默认安全行为，它会自动解析URL中的id_token、access_token等敏感信息，然后从地址栏移除，避免这些敏感数据被记录在浏览器历史、服务器日志或被第三方脚本窃取。

如果你只是需要使用token，完全不需要保留在URL里，直接通过ng4-adal的API获取即可：

import { AdalService } from 'ng4-adal';

constructor(private adalService: AdalService) {}

// 获取id_token
getIdToken() {
  // 从缓存中获取已解析的token
  const idToken = this.adalService.userInfo.token;
  // 或者通过客户端ID获取缓存的token
  const cachedToken = this.adalService.getCachedToken(this.adalService.config.clientId);
  return idToken || cachedToken;
}

// 获取用户信息
getUserInfo() {
  return this.adalService.userInfo;
}

如果你出于调试目的需要查看token内容，推荐用浏览器开发者工具：

• 打开Application标签页，查看Local Storage里的adal.idtoken字段
• 或者在控制台直接输入window.adal.userInfo.token查看

⚠️ 注意：不建议修改默认行为保留URL中的token，这会带来严重的安全风险，敏感信息暴露在地址栏可能被恶意利用。

额外注意事项 #

• 确保你的ng4-adal版本和Angular4兼容（ng4-adal专门针对Angular4开发，不要混用更高版本的adal-angular库）
• 在Azure AD应用注册的"认证"页面，确保已经启用了隐式授权流（勾选ID tokens和Access tokens选项），这是SPA应用必须的授权方式

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