【发布时间】:2018-12-20 12:33:08
【问题描述】:
环境
- Angular 5 前端
- 使用 Adal-Angular 进行 AzureAD 身份验证
当前情景
- 用户身份验证成功并获取访问/刷新令牌
- 一段时间后,访问令牌过期。
- 在后续请求中,用户被重定向回 Azure 登录页面,然后重定向回应用配置的主页。由于涉及重定向,用户将丢失当前页面上的所有工作。用户必须重新启动整个工作流程并再次返回原始请求页面。
要求
到期后,刷新应该在用户没有任何明确操作的情况下静默完成。令牌刷新完成后,用户将留在原处并继续工作。
代码
Adal.service.ts
public get accessToken() {
return this.context.getCachedToken(this.configService.getAdalConfig.clientId);
}
public get graphAccessToken() {
return sessionStorage[new AppConstants().User_Graph_Token];
}
public retrieveTokenForGraphAPI() {
this.context.acquireToken('https://graph.microsoft.com', function (error, id_token) {
if (error || !id_token) {
console.log('ADAL error occurred: ' + error);
} else {
// Store token in sessionStorage
sessionStorage[new AppConstants().User_Graph_Token] = id_token;
return;
}
}.bind(this)
);
}
OAuth.callback.component.ts
export class OAuthCallbackComponent implements OnInit {
ngOnInit() {
if (!this.adalService.userInfo) {
console.log('oauthCallBack::User info not found, redirecting to login');
this.router.navigate(['loginKey']);
} else {
if (!this.adalService.graphAccessToken) {
this.adalService.retrieveTokenForGraphAPI();
}
this.router.navigate([appConstants.App_Home_Page_URL]);
}
图形令牌消费者
在这个地方,它检测到令牌已过期,然后重定向到登录页面(接收缓存的参数)。重定向失去了应用程序的工作流上下文,从而妨碍了用户的工作
if (!this.adalService.isAuthenticated) {
this.adalService.login();
}
const bearer = this.adalService.graphAccessToken;
// Now hit graph client
const client = MicrosoftGraphClient.Client.init({
authProvider: (done) => {
done(null, bearer); //first parameter takes an error if you can't get an access token
}
});
如果需要任何其他配置/代码详细信息,请告诉我。
(是否应该在会话中明确保存令牌,我只调用“retrieveTokenForGraphAPI”,它可以根据需要从自己的缓存或 iframe 中获取它?)
欢迎对改进方法/设计/代码提出任何建议
【问题讨论】:
-
是的,如果可能的话,acquireAccessToken 应该通过 iframe 不可见地获取它。您能在 F12 工具的“网络”选项卡中看到这一点吗?只要用户与 Azure AD 有活动会话,您就应该能够获得新的访问令牌。
-
一旦客户端检测到令牌已过期,我就会被重定向到登录屏幕,然后浏览器会自动登录(可能是因为凭据已保存并设置为记住身份验证)。只是工作流程被打乱了
-
是的,ADAL.JS 应该在后台自动获取令牌,而无需重定向。您立即返回应用程序的原因是用户仍然与 Azure AD 有一个活动会话(请记住,它是一个单点登录系统)。
-
你解决了吗?我也有同样的问题
标签: angular azure-active-directory microsoft-graph-api access-token adal