[英]Authenticate to Azure AD from Angular 9 Application
Trying to authenticate with Azure AD from my Angular application.尝试从我的 Angular 应用程序使用 Azure AD 进行身份验证。 It is so hard to understand how to do it due to so many obsolete exemples on the web.由于网络上有太多过时的例子,很难理解如何做到这一点。 I've been following the most up-to-date documentation on github but I keep getting this error when accessing the app :我一直在关注 github 上的最新文档,但在访问应用程序时我不断收到此错误:
ClientConfigurationError: No redirect callbacks have been set. Please call handleRedirectCallback() with the appropriate function arguments before continuing
What should I do to make it work ?我该怎么做才能让它发挥作用?
app-routing.module.ts app-routing.module.ts
const routes: Routes = [
{ path: '', component: AppComponent, canActivate: [MsalGuard] },
{ path: 'auth-callback', component: DashboardComponent }
];
app.module.ts app.module.ts
const config = {
auth: {
clientId: 'my-client-id',
//popUp: true,
consentScopes: ['https://graph.microsoft.com/User.ReadWrite'],
redirectUri: 'http://localhost:4200/auth-callback',
}
};
@NgModule({
declarations: [
AppComponent,
DashboardComponent
],
imports: [
MsalModule.forRoot(config),
BrowserModule,
AppRoutingModule
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MsalInterceptor,
multi: true
}
]
,
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {
const myMSALObj = new UserAgentApplication(config);
function authCallback(error, response) { }
myMSALObj.handleRedirectCallback(authCallback);
}
You need to add a callback, even if it does nothing.您需要添加回调,即使它什么都不做。 You can add it to the module constructor.您可以将其添加到模块构造函数中。
@NgModule({ ... })
export class AppModule {
constructor(msalService: MsalService) {
msalService.handleRedirectCallback(_ => { });
}
}
I created not so long ago a blog post about exactly that!不久前我写了一篇关于这个的博客文章! Angular 9 broke my authentication flow, so had to figure things out. Angular 9 破坏了我的身份验证流程,所以必须弄清楚。
You can check the full code there and all the details that you should pay attention to.您可以在那里查看完整代码以及您应该注意的所有细节。 https://www.pshul.com/2020/03/29/authenticate-your-angular-9-to-azure-ad-using-msal/ https://www.pshul.com/2020/03/29/authenticate-your-angular-9-to-azure-ad-using-msal/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.