如何从Angular代码读取Azure Key Vault密钥，替代Git仓库中的不安全密钥？

首先明确核心原则：绝对不能让Angular前端直接访问Azure Key Vault——前端代码会被浏览器完全解析，任何嵌入的身份凭证都会公开泄露，反而加剧安全风险。正确的做法是通过后端服务中转，或利用Azure托管服务实现安全的密钥传递。

方案一：后端API中转（推荐） #

这是最通用且安全的实现方式，流程逻辑为：后端服务获取Key Vault访问权限→后端读取密钥→提供接口给Angular前端调用→前端通过HTTP请求获取密钥。

后端配置要点（以ASP.NET Core为例） #

1. 在Azure门户中，给后端服务的托管标识（如App Service的系统分配标识）分配Key Vault的Secret User角色权限
2. 在后端appsettings.json中配置Key Vault地址：

"AzureKeyVault": {
  "VaultUri": "https://your-vault-name.vault.azure.net/"
}

3. 启动时配置Key Vault访问：

builder.Configuration.AddAzureKeyVault(
    new Uri(builder.Configuration["AzureKeyVault:VaultUri"]),
    new DefaultAzureCredential());

4. 编写带权限验证的API接口返回密钥：

[ApiController]
[Route("api/[controller]")]
public class SecretsController : ControllerBase
{
    private readonly IConfiguration _configuration;

    public SecretsController(IConfiguration configuration)
    {
        _configuration = configuration;
    }

    [HttpGet("{secretName}")]
    [Authorize] // 需添加身份验证，比如JWT或Azure AD OAuth2
    public IActionResult GetSecret(string secretName)
    {
        var secretValue = _configuration[secretName];
        if (string.IsNullOrEmpty(secretValue))
        {
            return NotFound();
        }
        return Ok(new { Value = secretValue });
    }
}

Angular前端调用示例 #

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class SecretService {
  constructor(private http: HttpClient) {}

  getSecret(secretName: string) {
    const headers = new HttpHeaders().set('Authorization', 'Bearer ' + yourAuthToken);
    return this.http.get(`/api/secrets/${secretName}`, { headers });
  }
}

方案二：Azure Static Web Apps集成API（适合静态部署场景） #

若Angular部署在Azure Static Web Apps上，可直接利用其内置的API功能：

• 在Static Web Apps中添加API后端（支持Node.js、Python等语言）
• 给API的托管标识分配Key Vault的Secret User权限
• API读取Key Vault密钥后，Angular前端调用Static Web Apps的API接口获取密钥

关键安全注意事项 #

• 禁止在Angular代码或前端环境变量中存储任何Key Vault访问凭证（如客户端ID、密钥）
• 后端API必须添加身份验证，仅允许授权用户访问
• 遵循最小权限原则：只给后端服务分配Secret User权限，不赋予更高权限
• 启用Key Vault日志记录，监控所有访问请求

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