如何获取 Azure 认知语音服务的凭证

Question

我在 Azure 门户上创建了一个 Speech Cognitive services，我想关注 this guideline。在上述指南的某处有类似以下内容：

fetch('https://webchat-mockbot.azurewebsites.net/speechservices/token', { method: 'POST' }).

我的问题是我应该用哪个地址替换这部分代码？我尝试了几件事但没有成功。例如，我尝试了 https://westeurope.api.cognitive.microsoft.com/sts/v1.0/issuetoken 并尝试将我在 Keys and Endpoints 下看到的两个键之一作为 post 方法的参数。但它没有用。我什至尝试使用订阅密钥和区域，但它也没有用。也许我没有使用正确的语法。

如果有人能帮助我，我将不胜感激。

更新：这是我更新后的代码，但麦克风仍然存在问题：

    <!DOCTYPE html>
    <html lang="en-US">

    <head>
<title>Web Chat: Cognitive Services Speech Services using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="webchat" role="main"></div>
    <script>
        function createFetchSpeechServicesCredentials() {
            let expireAfter = 0;
            let lastPromise;

            return () => {
                const now = Date.now();

                if (now > expireAfter) {
                    expireAfter = now + 300000;
                    lastPromise =  fetch(
                        'https://westus.api.cognitive.microsoft.com/sts/v1.0/issueToken',
                        { method: 'POST', headers: { 'Ocp-Apim-Subscription-Key': 'my_subscription-key-speech-services' } }
                    ).then(
                        res => res.json(),
                        err => {
                            expireAfter = 0;

                            return Promise.reject(err);
                        }
                    );
                }

                return lastPromise;
            };
        }

        const fetchSpeechServicesCredentials = createFetchSpeechServicesCredentials();

        (async function () {

            const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate',
                { method: 'POST', headers: { Authorization: 'Bearer My_direct_line_secret_key1' } });
            const { token } = await res.json();

            const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
                credentials: fetchSpeechServicesCredentials
            });

            window.WebChat.renderWebChat(
                {
                    directLine: window.WebChat.createDirectLine({ token }),
                    webSpeechPonyfillFactory
                },
                document.getElementById('webchat')
            );

            document.querySelector('#webchat > *').focus();
        })().catch(err => console.error(err));
    </script>
</body>
</html>

为简单起见，我复制了与@Hury Shen 长时间讨论后有效的代码：

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Web Chat: Cognitive Services Speech Services using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="webchat" role="main"></div>
    <script>


       

        (async function () {

            const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { method: 'POST', headers: { Authorization: 'Bearer my-directline-secret-key' } });
            const { token } = await res.json();

            let authorizationToken;
            const tokenRes = await fetch(
                'https://westeurope.api.cognitive.microsoft.com/sts/v1.0/issuetoken',
                { method: 'POST', headers: { 'Ocp-Apim-Subscription-Key': 'my-cognitive-services-subscription-key' } }
            );

            if (tokenRes.status === 200) {
                region = 'westeurope', 
                authorizationToken = await tokenRes.text()
            } else {
                return (new Error('error!'))
            }

            const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory({
                authorizationToken: authorizationToken,
                region: region 
            });

            window.WebChat.renderWebChat({
                directLine: window.WebChat.createDirectLine({ token }),
                webSpeechPonyfillFactory: webSpeechPonyfillFactory
            }, document.getElementById('webchat'));
        })().catch(err => console.error(err));
    </script>
</body>
</html>

最好的，汉娜

Answer 1

您需要在 post 请求的 header 中使用“键和端点”下的键之一，但不能作为 post 请求的参数。以下是供您参考的请求示例：

const tokenRes = await fetch(
  'https://westus.api.cognitive.microsoft.com/sts/v1.0/issueToken',
  { method: 'POST', headers: { 'Ocp-Apim-Subscription-Key': 'yourCognitiveServicesSubscriptionKey' } }
);

if (tokenRes.status === 200) {
  region = 'westus',
  authorizationToken = await tokenRes.text()
} else {
  return (new Error('error!'))
}

您也可以在 postman 中测试它。下面的屏幕截图是我的测试，我将密钥放在 post 请求的“header”中，但不在“Params”中。

======================更新============ =========

根据一些测试，我认为你应该使用如下端点地址：

如果在一个应用程序服务中执行，您应该使用：

https://webchat-mockbot.azurewebsites.net/directline/token

js代码应该是：

const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
const { token } = await res.json();

如果只是为了测试（在页面中暴露key），你应该使用：

https://directline.botframework.com/v3/directline/tokens/generate

js代码应该是：

const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { method: 'POST', headers: { Authorization: 'Bearer your_secret' }});
const { token } = await res.json();

======================更新 2=========== ==========

您可以根据下面的代码修改您的代码：

let authorizationToken;
const tokenRes = await fetch(
  'https://westus.api.cognitive.microsoft.com/sts/v1.0/issueToken',
  { method: 'POST', headers: { 'Ocp-Apim-Subscription-Key': 'yourCognitiveServicesSubscriptionKey' } }
);

if (tokenRes.status === 200) {
  authorizationToken = await tokenRes.text()
} else {
  return (new Error('error!'))
}

const webSpeechPonyfillFactory = await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory( {
  authorizationToken: authorizationToken
} );

window.WebChat.renderWebChat({
  directLine: directLine,
  webSpeechPonyfillFactory: webSpeechPonyfillFactory
}, document.getElementById('webchat') );

如何获取 Azure 认知语音服务的凭证

How to fetch credential for azure cognitive speech services

microsoft-cognitive

azure-cognitive-services