Question

A正在将Azure AppInsights与某些ASP.NET Core 2.1应用程序配合使用。我将工具密钥保留在appsettings.json中（以后会被Azure应用服务中的应用配置覆盖）。显然，密钥在不同的环境之间可能有所不同（在dev / qa / prod环境上有所不同）。该密钥由后端的AppInsights SDK使用。

我的问题是：如何将密钥传递给JavaScript / React应用程序（与JavaScript App Insisghts sdk一起使用）？我没有使用Razor（并且我不想）来生成主页-它只是静态的html页面：

<!DOCTYPE html>
<html>
<head>
    <title>To Do List</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script type="text/javascript">
         var appInsights=window.appInsights||function(a){
             function b(a){c[a]=function(){var b=arguments;c.queue.push(function(){c[a].apply(c,b)})}}var c={config:a},d=document,e=window;setTimeout(function(){var b=d.createElement("script");b.src=a.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js",d.getElementsByTagName("script")[0].parentNode.appendChild(b)});try{c.cookie=d.cookie}catch(a){}c.queue=[];for(var f=["Event","Exception","Metric","PageView","Trace","Dependency"];f.length;)b("track"+f.pop());if(b("setAuthenticatedUserContext"),b("clearAuthenticatedUserContext"),b("startTrackEvent"),b("stopTrackEvent"),b("startTrackPage"),b("stopTrackPage"),b("flush"),!a.disableExceptionTracking){f="onerror",b("_"+f);var g=e[f];e[f]=function(a,b,d,e,h){var i=g&&g(a,b,d,e,h);return!0!==i&&c["_"+f](a,b,d,e,h),i}}return c
         }({
             instrumentationKey: "how_to_populate_that_key?"
         });
         window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView();
    </script>

</head>
  <body>
    <div id="root"></div>
  </body>
</html>

将密钥从后端动态传递到前端的正确解决方案是什么？这应该由某个端点公开吗？还是我应该以某种方式在后端（包含该键）及其索引index.html上动态生成某种脚本？

我只是不想在JS代码库中对密钥进行硬编码。

Answer 1

在应用加载之前调用API并加载Instrumentation Key，或者这是从后端加载的另一种方式

<script type="text/javascript">
// Standard Application Insights web page script:
var appInsights = window.appInsights || function(config){ ...
// Modify this part:
}({instrumentationKey:  
  // Generate from server property:
  "@Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration.Active.InstrumentationKey"
  }
 )
</script>

有关更多信息，请通过此https://docs.microsoft.com/en-us/azure/azure-monitor/app/separate-resources#web-pages

将可配置的appInsights密钥传递给javascript（反应/角度）应用

1 个答案: