如何在TS+React的PBIViz自定义视觉中隐藏Azure Maps API密钥？

首先明确：PBIViz自定义视觉对象运行在浏览器环境，而非Node.js，所以dotenv和process.env这类Node.js环境的工具完全不适用，这就是你遇到报错和undefined的原因。下面是可行的安全存储方案：

• 通过PowerBI视觉对象属性面板配置密钥
  这是最安全且符合PowerBI生态的方式，让用户在PowerBI界面中自行输入API密钥，视觉对象运行时从配置属性读取：

  1. 在视觉对象的capabilities.json中添加自定义配置项：

     {
       "objects": {
         "azureMapsConfig": {
           "displayName": "Azure Maps 配置",
           "properties": {
             "apiKey": {
               "displayName": "API 密钥",
               "type": {
                 "text": true
               }
             }
           }
         }
       }
     }
     

  2. 在视觉对象代码中读取该配置：

     export class CustomMapVisual extends Visual {
       private apiKey: string;
     
       public update(options: VisualUpdateOptions) {
         const config = VisualSettings.parse(options.dataViews[0]);
         this.apiKey = config.azureMapsConfig.apiKey;
         // 使用this.apiKey调用Azure Maps自动补全API
       }
     }
     

  这种方式下密钥由用户自行管理，不会被打包到视觉对象代码中，避免泄露风险。

• 用Azure AD认证替代API密钥
  如果场景允许，可以放弃API密钥，改用Azure AD令牌认证Azure Maps API。视觉对象可通过PowerBI嵌入式认证流程获取令牌，或让用户配置Azure AD应用信息来生成认证令牌，进一步提升安全性。

• 关键注意事项

  • 绝对不要将API密钥硬编码到视觉对象代码中，前端环境不存在真正安全的密钥存储方式，任何前端存储的敏感信息都可能被用户获取。
  • 所有敏感凭据都应由用户在PowerBI界面中配置，依托PowerBI的机制管理存储。

内容的提问来源于stack exchange，提问作者יהונתן דוד סולימן