Angular11 MSAL B2C登录实例 (一)
2023-12-18 09:40:52
前言
因为项目需求,需要把Angular 11项目中登录方式改成B2C登录,所以在参考了一系列文档后,成功通过MSAL将项目的登录方式改成B2C登录。下面介绍了详细步骤及一些注意事项。
步骤:
1. 安装MSAL
在项目中安装msal
npm i @azure/msal-angular --save
npm i @azure/msal-browser --save
通过查阅MSAL的文档,发现v2以上版本才支持Angualr11,所以在本项目的代码中使用的是:
"@azure/msal-angular": "^2.0.3",
"@azure/msal-browser": "^2.17.0",
2. 引入MSAL
在项目中引入MSAL主要是在两个文件中引入,app.module.ts和app-routing.module.ts中引入,下面先讲解app.module.ts这个文件。
app.module.ts
...
import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
import { MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalRedirectComponent } from '@azure/msal-angular';
export function loggerCallback(logLevel: LogLevel, message: string) {
}
export function MSALInstanceFactory(): IPublicClientApplication {
return new PublicClientApplication({
auth: {
clientId: "your-client-id",
authority: "your-authority",
knownAuthorities: "your-knownAuthorities",
redirectUri: "your-redirectUri",
postLogoutRedirectUri: "your-LogoutRedirectUri:"
}
cache: {
cacheLocation: BrowserCacheLocation.SessionStorage,
storeAuthStateInCookie: false,
},
system: {
loggerOptions: {
loggerCallback,
logLevel: LogLevel.Info,
piiLoggingEnabled: false
}
}
});
}
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
const protectedResourceMap = new Map<string, Array<string>>();
protectedResourceMap.set("your-local-set", [yourB2CScope]);
return {
interactionType: InteractionType.Redirect,
protectedResourceMap
};
}
@NgModule({
declarations: [
...
],
imports: [
...
MsalModule
],
providers: [
...
{
provide: HTTP_INTERCEPTORS,
useClass: MsalInterceptor,
multi: true
},
{
provide: MSAL_INSTANCE,
useFactory: MSALInstanceFactory
},
{
provide: MSAL_INTERCEPTOR_CONFIG,
useFactory: MSALInterceptorConfigFactory
},
MsalService,
MsalBroadcastService
],
bootstrap: [AppComponent, MsalRedirectComponent]
})
}
注意: 在以上实例中,your开头的,都是需要自己配置的信息。 省略号代表着你自己项目中的其他代码。
#app-routing.module.ts会在下篇文章讲解
文章来源:https://blog.csdn.net/m0_73117087/article/details/134392522
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!