如何在Asp.net-Angular应用中将谷歌地图API密钥设为环境变量保障安全

第一步：创建appsetting.json配置文件 #

在src/assets/目录下新建appsetting.json，直接写入配置内容，生产部署时仅需修改该文件无需重新编译项目：

{
  "googleMaps": {
    "apiKey": "你的生产环境谷歌地图API密钥",
    "libraries": ["geometry"]
  }
}

第二步：定义配置类型与加载服务 #

首先新建src/app/core/config/app.config.ts定义配置类型与注入令牌：

import { InjectionToken } from '@angular/core';

export interface IAppConfig {
  googleMaps: {
    apiKey: string;
    libraries: string[];
  }
}

export const APP_CONFIG = new InjectionToken<IAppConfig>('APP_CONFIG');

再新建src/app/core/config/config-loader.service.ts实现配置文件加载逻辑：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { lastValueFrom } from 'rxjs';
import { IAppConfig } from './app.config';

@Injectable({ providedIn: 'root' })
export class ConfigLoaderService {
  private config: IAppConfig;

  constructor(private http: HttpClient) {}

  loadConfig(): Promise<IAppConfig> {
    const config$ = this.http.get<IAppConfig>('/assets/appsetting.json');
    return lastValueFrom(config$).then(config => {
      this.config = config;
      return config;
    });
  }

  getConfig(): IAppConfig {
    return this.config;
  }
}

第三步：预加载配置到应用全局 #

修改app.module.ts，通过APP_INITIALIZER保证应用启动前完成配置加载：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ConfigLoaderService } from './core/config/config-loader.service';
import { APP_CONFIG } from './core/config/app.config';
import { AppComponent } from './app.component';

export function initConfig(configLoader: ConfigLoaderService) {
  return () => configLoader.loadConfig();
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  declarations: [AppComponent],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [ConfigLoaderService],
      multi: true
    },
    {
      provide: APP_CONFIG,
      useFactory: (configLoader: ConfigLoaderService) => configLoader.getConfig(),
      deps: [ConfigLoaderService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

第四步：修改MapModule动态读取密钥 #

替换原来硬编码的AgmCoreModule.forRoot配置，通过工厂函数动态注入密钥：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AgmCoreModule, LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral } from '@agm/core';
import { AddressCoordsComponent, MapComponent } from './components';
import { APP_CONFIG, IAppConfig } from '../core/config/app.config';

export function agmConfigFactory(config: IAppConfig): LazyMapsAPILoaderConfigLiteral {
  return {
    apiKey: config.googleMaps.apiKey,
    libraries: config.googleMaps.libraries
  };
}

@NgModule({
  declarations: [AddressCoordsComponent, MapComponent],
  imports: [
    CommonModule,
    FormsModule,
    AgmCoreModule
  ],
  providers: [
    {
      provide: LAZY_MAPS_API_CONFIG,
      useFactory: agmConfigFactory,
      deps: [APP_CONFIG]
    }
  ],
  exports: [AddressCoordsComponent, MapComponent]
})
export class MapModule { }

注意事项 #

前端公开的谷歌地图API密钥需要在谷歌云控制台配置域名引用限制，仅允许你的生产域名调用即可避免被盗用，属于前端调用谷歌地图的标准操作。

内容的提问来源于stack exchange，提问作者canbrian