如何在React应用程序[Keyscript]中从KeyVault检索秘密

Question

我想通过传递clientid，clientkey和tenantid从React应用程序的keyvault中检索秘密。遵循以下示例，但收到错误-“浏览器不支持EnvironmentCredential”。

https://github.com/Azure/azure-sdk-for-js/blob/master/sdk/keyvault/keyvault-secrets/samples/typescript/src/helloWorld.ts

应用程序-React [TypeScript]

浏览器-Chrome 86.0

谢谢。

Deb

Answer 1

该错误是有意的-Node（服务器端JS）支持DefaultAzureCredential（），但客户端Javascript不支持：https://github.com/Azure/azure-sdk-for-js/issues/10645

这样做的主要原因是因为向所有浏览您的网站的人公开clientKey通常是一个严重的安全漏洞。

如果您的React应用程序使用的是API，那么最好让React调用您的API，然后让API与Key Vault对话。如果您目前还没有，那么像简单的Function或Logic应用程序之类的东西就可以充当您的API。 （如果您的网站访问量少，则功能尤其是免费套餐）。

如果您了解风险并且仍然希望在浏览器中执行此操作，则有两种选择-您可以自行创建TokenCredential传递给客户端，也可以跳过SDK和{{3 }}。