如何将不同环境中的clientId传递给AppModule
How to pass clientId in different environment to AppModule
我用msal做认证。在我的AppModule.ts(来自the example)
@NgModule({
declarations: [
AppComponent,
HomeComponent,
ProfileComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MsalModule.forRoot( new PublicClientApplication({
auth: {
clientId: 'Enter_the_Application_Id_here', // This is your client ID
authority: 'Enter_the_Cloud_Instance_Id_Here'/'Enter_the_Tenant_Info_Here', // This is your tenant ID
redirectUri: 'Enter_the_Redirect_Uri_Here'// This is your redirect URI
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
}
}), null, null)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
对于clientId,我不想在这里硬编码。它在配置文件中。问题是我有不同的环境,例如 dev/qa 和 prod 等。每个端点的 clientId 都不同。
如何将值而不是硬编码传递给 AppModule?
您可以为“./src/environments/”下的每个阶段创建 environment.[stage].ts 文件。
// environment.ts
export const environment = {
production: false,
clientId: 'Enter_the_Application_Id_here',
authority: 'Enter_the_Cloud_Instance_Id_Here',
redirectUri: 'Enter_the_Redirect_Uri_Here'
}
// environment.qa.ts
export const environment = {
production: true,
clientId: 'Enter_the_Application_Id_here',
authority: 'Enter_the_Cloud_Instance_Id_Here',
redirectUri: 'Enter_the_Redirect_Uri_Here'
}
完成后,每个阶段应该有 N 个文件。例如:
- environment.ts
- environment.qa.ts
- environment.prod.ts
通过在 angular.json 中对每个 [阶段] 进行一些额外的配置,您可以轻松地做到这一点:
import { environment } from './../environments/environment';
//inside app.module
MsalModule.forRoot( new PublicClientApplication({
auth: {
clientId: environment.clientId,
authority: environment.authority,
redirectUri: environment.redirectUri
},
angular.json 中的附加配置添加了一个 "fileReplacements" 以将 environment.ts 替换为 envirnment.[stage].ts:
"configurations": {
"qa": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
],
现在您可以 运行 阶段特定构建:
ng build --configuration=qa
官方 angular 文档有一个关于此主题的页面:https://angular.io/guide/build
我用msal做认证。在我的AppModule.ts(来自the example)
@NgModule({
declarations: [
AppComponent,
HomeComponent,
ProfileComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MsalModule.forRoot( new PublicClientApplication({
auth: {
clientId: 'Enter_the_Application_Id_here', // This is your client ID
authority: 'Enter_the_Cloud_Instance_Id_Here'/'Enter_the_Tenant_Info_Here', // This is your tenant ID
redirectUri: 'Enter_the_Redirect_Uri_Here'// This is your redirect URI
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
}
}), null, null)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
对于clientId,我不想在这里硬编码。它在配置文件中。问题是我有不同的环境,例如 dev/qa 和 prod 等。每个端点的 clientId 都不同。
如何将值而不是硬编码传递给 AppModule?
您可以为“./src/environments/”下的每个阶段创建 environment.[stage].ts 文件。
// environment.ts
export const environment = {
production: false,
clientId: 'Enter_the_Application_Id_here',
authority: 'Enter_the_Cloud_Instance_Id_Here',
redirectUri: 'Enter_the_Redirect_Uri_Here'
}
// environment.qa.ts
export const environment = {
production: true,
clientId: 'Enter_the_Application_Id_here',
authority: 'Enter_the_Cloud_Instance_Id_Here',
redirectUri: 'Enter_the_Redirect_Uri_Here'
}
完成后,每个阶段应该有 N 个文件。例如:
- environment.ts
- environment.qa.ts
- environment.prod.ts
通过在 angular.json 中对每个 [阶段] 进行一些额外的配置,您可以轻松地做到这一点:
import { environment } from './../environments/environment';
//inside app.module
MsalModule.forRoot( new PublicClientApplication({
auth: {
clientId: environment.clientId,
authority: environment.authority,
redirectUri: environment.redirectUri
},
angular.json 中的附加配置添加了一个 "fileReplacements" 以将 environment.ts 替换为 envirnment.[stage].ts:
"configurations": {
"qa": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
],
现在您可以 运行 阶段特定构建:
ng build --configuration=qa
官方 angular 文档有一个关于此主题的页面:https://angular.io/guide/build