適用于：
SDK v4
當您
使用 Azure 建立 Bot
時，會自動為您設定網路聊天通道。 網路聊天通道包含
網路聊天控制項
，可讓使用者直接在網頁中與 Bot 互動。
網路聊天通道包含您在網頁中內嵌網路聊天控制項所需的所有專案。 若要這樣做，您將取得 Bot 的秘密金鑰，然後在網頁中內嵌控制項。
Azure 帳戶。 如果您還沒有帳戶，請在開始之前建立
免費帳戶
。
已發佈至 Azure 的現有 Bot。
網路聊天安全性考慮
當您搭配網路聊天使用 Azure AI Bot Service 驗證時，必須牢記一些重要的安全性考慮。 如需詳細資訊，請參閱
安全性考慮
。
在網頁中內嵌網路聊天控制項
下圖顯示在網頁中內嵌網路聊天控制項時所涉及的元件。
使用 Direct Line （透過增強的驗證），在使用 網路聊天 控制項連線到 Bot 時降低安全性風險。 如需詳細資訊，請參閱
Direct Line 增強驗證
。
取得 Bot 秘密金鑰
移至
Azure 入口網站
並開啟 Bot。
在 [設定]
下
，選取 [
通道
]。 然後選取
[網路聊天
]。
網路聊天
頁面隨即開啟。 從 [網站] 清單中選取 [
預設網站
]。
複製第一個
秘密金鑰
和內嵌程式
代碼
。
開發內嵌選項
選項 1 - 交換您的秘密以取得權杖，並產生內嵌
您可以執行伺服器對伺服器要求，以交換您的網路聊天秘密以取得暫存權杖
您想要讓其他開發人員難以將 Bot 內嵌在其網站中
使用此選項並不會完全防止其他開發人員將 Bot 內嵌在其網站中，但這確實會使他們難以這麼做。
若要交換權杖的秘密，並產生內嵌：
對
權杖交換 URL 發出 GET
要求，並透過
Authorization
標頭傳遞您的網路聊天秘密。 標頭
Authorization
會
BotConnector
使用 配置，並包含您的秘密。
對於全域 Bot，權杖交換 URL 為
https://webchat.botframework.com/api/tokens
。
對於區域 Bot，權杖 URL 為
https://europe.webchat.botframework.com/api/tokens
。
對 GET
要求的回應
將包含權杖（以引號括住），可用來藉由轉譯網路聊天控制項來啟動交談。 權杖僅適用于一個交談;若要開始另一個交談，您需要產生新的權杖。
在您
稍早從網路聊天通道複製的 Embedded 程式碼
中，將 參數變更
s=
為
t=
，並將 「YOUR_SECRET_HERE」 取代為您的權杖。
權杖會在到期之前自動更新。
針對全域 Bot：
requestGET https://webchat.botframework.com/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE
針對區域 Bot：
requestGET https://europe.webchat.botframework.com/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE
針對 Azure Government，權杖交換 URL 不同。
requestGET https://webchat.botframework.azure.us/api/tokens
Authorization: BotConnector YOUR_SECRET_HERE
"IIbSpLnn8sA.dBB.MQBhAFMAZwBXAHoANgBQAGcAZABKAEcAMwB2ADQASABjAFMAegBuAHYANwA.bbguxyOv0gE.cccJjH-TFDs.ruXQyivVZIcgvosGaFs_4jRj1AyPnDt1wk1HMBb5Fuw"
範例 HTML 程式碼
<!DOCTYPE html>
<iframe id="chat" style="width: 400px; height: 400px;" src=''></iframe>
</body>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
xhr.setRequestHeader('Authorization', 'BotConnector ' + 'YOUR SECRET HERE');
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("chat").src="https://webchat.botframework.com/embed/<botname>?t="+response
</script>
</html>
選項 2 - 使用秘密在您的網站內嵌網路聊天控制項
如果您想要允許其他開發人員輕鬆地將 Bot 內嵌至其網站，請使用此選項。
使用此選項時，網路聊天通道秘密金鑰會在用戶端網頁中公開。 僅針對開發目的使用此選項，而不是在生產環境中使用。
若要藉由在 Embedded 程式碼 中 指定秘密，在網頁中內嵌 Bot：
從Azure 入口網站內的網路聊天通道複製內嵌程式碼 （如上述取得 Bot 秘密金鑰 中所述 ）。
在該 Embedded 程式碼 中，將 「YOUR_SECRET_HERE」 取代為您 從相同頁面複製的秘密金鑰 值。
生產內嵌選項
隱藏秘密、交換您的秘密以取得權杖，並產生內嵌
此選項不會在用戶端網頁中公開網路聊天通道秘密金鑰。
用戶端必須提供權杖來與 Bot 通訊。 若要瞭解秘密和權杖之間的差異，以及瞭解與使用秘密相關聯的風險，請參閱 Direct Line 驗證 。
下列用戶端網頁示範如何使用權杖搭配網路聊天。 如果您有區域或 Azure Gov Bot，請從公用網站調整 URL 到政府。
<!DOCTYPE html>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</head>
<h2>Web Chat bot client using Direct Line</h2>
<div id="webchat" role="main"></div>
<script>
// "styleSet" is a set of CSS rules which are generated from "styleOptions"
const styleSet = window.WebChat.createStyleSet({
bubbleBackground: 'rgba(0, 0, 255, .1)',
bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
botAvatarImage: '<your bot avatar URL>',
botAvatarInitials: 'BF',
userAvatarImage: '<your user avatar URL>',
userAvatarInitials: 'WC',
rootHeight: '100%',
rootWidth: '30%'
// After generated, you can modify the CSS rules
styleSet.textContent = {
...styleSet.textContent,
fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
fontWeight: 'bold'
const res = await fetch('https:<YOUR_TOKEN_SERVER/API>', { method: 'POST' });
const { token } = await res.json();
window.WebChat.renderWebChat(
directLine: window.WebChat.createDirectLine({ token }),
userID: 'WebChat_UserId',
locale: 'en-US',
username: 'Web Chat User',
locale: 'en-US',
// Passing 'styleSet' when rendering Web Chat
styleSet
document.getElementById('webchat')
</script>
</body>
</html>
如需如何產生權杖的範例，請參閱：
單一登入示範
Direct Line Token
網路聊天概觀
自訂網路聊天
在 網路聊天 中啟用語音
搭配 Direct Line App Service 擴充功能使用網路聊天
將 Bot 連線至 Direct Line Speech
將單一登入新增至 網路聊天
