我是 MSAL 新人。所以我只遵循从这里实现它的基本设置https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/README.md https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/README.md.
我所做的是像这样在 app.module 中设置配置
MsalModule.forRoot({
auth: {
clientId: 'myclientid', // This is your client ID
authority: 'https://login.microsoftonline.com/mytenantid', // This is your tenant ID
redirectUri: 'http://localhost:4200'// This is your redirect URI
},
cache: {
cacheLocation: 'sessionStorage',
storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
},
}, {
popUp: !isIE,
consentScopes: [
'user.read',
'openid',
'apiappid/user_impersonation',
],
unprotectedResources: [],
protectedResourceMap: [
[
'https://localhost:44331/',
['apiappid/user_impersonation'],
]
],
extraQueryParameters: {}
})
并在路由文件中添加了此内容
{path : 'das',canActivate: [MsalGuard], component:CrMainComponent},
这是我的 app.component.ts
import {
Component,
Injectable
} from '@angular/core';
import {
Observable,
Subscription
} from 'rxjs';
import {
BroadcastService,
MsalService
} from '@azure/msal-angular';
import {
CryptoUtils,
Logger,
AuthError,
AuthResponse
} from 'msal';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-client';
loggedIn: boolean;
public userInfo: any = null;
private subscription: Subscription;
public isIframe: boolean;
constructor(private broadcastService: BroadcastService, private authService: MsalService) {
this.isIframe = window !== window.parent && !window.opener;
if (this.authService.getAccount())
{
//console.info(JSON.stringify(this.authService.getAccount()));
this.loggedIn = true;
} else {
this.loggedIn = false;
//this.login();
}
}
login()
{
const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;
if (isIE) {
this.authService.loginRedirect();
} else {
this.authService.loginPopup();
}
}
logout()
{
this.authService.logout();
}
ngOnInit() {
this.broadcastService.subscribe("msal:loginFailure", (payload) => {
console.log("login failure " + JSON.stringify(payload));
this.loggedIn = false;
});
this.broadcastService.subscribe("msal:loginSuccess", (payload) => {
console.log("login success " + JSON.stringify(payload));
this.loggedIn = true;
//alert("Login Success");
});
this.authService.handleRedirectCallback((redirectError: AuthError, redirectResponse: AuthResponse) => {
if (redirectError) {
console.error("Redirect error: ", redirectError);
return;
}
console.log("Redirect success: ", redirectResponse);
});
}
ngOnDestroy() {
this.broadcastService.getMSALSubject().next(1);
if (this.subscription) {
this.subscription.unsubscribe();
}
}
}
所以我想，既然我在路由配置中指定了 Msalguard，它就会重定向到 Microsoft 的 Azure AD 身份验证，并且在身份验证成功后，它会将我重定向回我的页面。这一切都工作正常。
但有时我会收到错误
Uncaught (in promise): ClientAuthError: Token renewal operation failed due to timeout.
老实说，我不知道我错过了什么或我做错了什么。在我的任何代码中，我都没有对登录过程执行任何操作。当我准备好这些代码时，这一切都会自动发生。那么我们真的要采取措施来解决这个令牌更新问题吗？我的意思是我们需要手动更新令牌吗？如果是的话怎么办？？
其他答案并没有直接回答问题。阅读答案并研究该问题后，我在问题跟踪链接中找到了适合我的解决方案here https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1592（如其他答案中所提供）。该问题仍然存在，但过了一会儿它似乎自行修复并让我重新进行身份验证。告诉人们去查看角度示例是没有用的，因为它不包含解决此问题的代码。
@NgModule({
imports: [RouterModule.forRoot(routes,
{
enableTracing: false,
useHash: true,
initialNavigation: isInIframe() ? 'disabled' : undefined // <-THIS
})],
exports: [RouterModule]
})
export class AppRoutingModule {
}
export function isInIframe() {
return window !== window.parent && !window.opener;
}
我还必须将登录重定向方法包装在 try catch 块中：
login(loginName: string, password: string) {
try {
this.authService.loginRedirect();
}
catch(error) {
console.log("oh no, there's an error", error);
}
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
