Как приложение Gatsby получает доступ к хранилищу ключей Azure

#reactjs #gatsby #azure-keyvault #azure-static-web-app

Вопрос:

Я успешно развернул свое приложение Gatsby в Azure в соответствии с этими инструкциями. Это отдельный ресурс от «обычного» веб-приложения. «Обычное веб-приложение будет развернуто на ресурсе службы приложений, но для Gatsby оно развернуто на другом ресурсе статической веб-страницы. Таким образом, URL-адрес теперь имеет вид https://<сгенерированное имя>.azurestaticapps.net где сгенерированное имя НЕ является именем приложения. Похоже, что в инструкциях по подключению веб-службы к хранилищу ключей есть некоторые пробелы, которые необходимо заполнить. Какие шаги мне нужно предпринять, чтобы подключить мое приложение Gatsby к моему хранилищу ключей azure во время разработки и на производственной площадке?

1. Это то, чего вы хотите? learn.microsoft.com/en-us/azure/key-vault/secrets /…

2. Проблема, с которой я сталкиваюсь с этой документацией, заключается в том, что, похоже, я столкнулся с проблемой TypeScript. Мой секрет — это строка. Я не совсем понимаю, как получить эту «строку» из KeyVaultSecret.

3. Также у меня настроен код, подобный get GoogleMapApiKey() { return (async () => await this.keyVaultClient.getSecret(‘GoogleMapApiKey’)); } Который, как я понимаю, вернет KeyVaultSecret, когда обещание будет выполнено. К сожалению, кажется, что обещание никогда не будет выполнено?

4. Я замечаю, что при настройке секретного клиента я получаю сообщение об ошибке: эта ошибка как-то связана с этим? Ошибка: EnvironmentCredential не поддерживается в браузере.

Ответ №1:

Ошибка: EnvironmentCredential не поддерживается в браузере.

В вашем случае используйте ClientSecretCredential вместо других.

Убедитесь, что вы выполнили предварительные условия, затем в своем коде используйте ClientSecretCredential , передайте ему tenantId, clientId, clientSecret вашего участника-службы, это должно быть что-то вроде приведенного ниже, retrievedSecret.value это значение секрета.

 const { ClientSecretCredential } = require("@azure/identity");
const { SecretClient } = require("@azure/keyvault-secrets");

const keyVaultName = "xxxx";
const KVUri = "https://"   keyVaultName   ".vault.azure.net";

const credential = new ClientSecretCredential(tenantId, clientId, clientSecret);
const client = new SecretClient(KVUri, credential);

const retrievedSecret = await client.getSecret(secretName);

1. Спасибо. Вы были очень полезны. Используя TypeScript, у меня есть « const mapsKey:KeyVaultSecret = ожидает KeyVault. GoogleMapApiKey; setGoogleMapsApiKey(mapsKey.value ?? » ); « и get « Свойство ‘properties’ отсутствует в типе ‘() => Promise<KeyVaultSecret>’, но требуется в типе ‘KeyVaultSecret’.ts(2741) keyvault-secrets.d.ts(101, 5): здесь объявлены ‘properties’. «`

2. Я знаю, что это не предназначено для обсуждения, но после «решения» проблемы с Promise теперь я получаю ошибку консоли, которая, похоже, указывает мне на проблему CORS, но, похоже, у меня нет никакого контроля над запросом? «` Доступ к XMLHttpRequest по адресу ‘ greatstatekeyvault.vault.azure.net/secrets/GoogleMapApiKey /… ‘ из источника ‘ localhost: 8000 ‘ заблокирован политикой CORS: ответ на предполетный запрос не проходит проверку контроля доступа: заголовок ‘Access-Control-Allow-Origin’ отсутствует в запрошенном ресурсе. «`

3. Далее по стеку я вижу, какова моя основная причина: « { «ошибка»: { «код»: «Неавторизованный», «сообщение»: «В запросе отсутствует токен на предъявителя или PoP». } } «`

4. @KevinBurton В связи с этой проблемой я рекомендую вам задать ее в новом вопросе, включая код и ошибку, это будет понятно другим.