如何获取天蓝色认知语音服务的凭据

问题描述

我已经在Speech Cognitive services门户网站上创建了Azure，我想关注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',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,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',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',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>

最好，汉娜

解决方法

您需要在发布请求的标题中使用“键和端点”下的键之一，但不能将其用作发布请求的参数。以下是一个请求示例供您参考：

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!'))
}

您也可以在邮递员中对其进行测试。下面的屏幕快照是我的测试，我将密钥放在发布请求的“标头”中，而不放在“ 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();

如果仅用于测试（将键显示在页面中），则应使用：

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

js代码应为：

const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate',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',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-cognitive-services microsoft-cognitive

如何获取天蓝色认知语音服务的凭据

问题描述

解决方法

相关问答