[BotFramework]：在使用C＃SDK V4開發的BOT中，是否可以在英雄卡或自適應卡中顯示Oauth提示？

Question

我正在使用C＃中的V4開發聊天機器人； 我已經使用OauthCard提示在瀑布對話框中實現了身份驗證功能，我希望此oauth卡提示顯示在Hero卡或Adaptive卡或任何其他合適的登錄卡中，以便登錄功能可在Webchat Channel中使用。

目前，由於無法登錄，因此無法在網絡聊天頻道中顯示oauth卡提示，因此，如果可以在Hero卡或任何合適的卡中顯示oauth Prompt的登錄功能，則可以進行身份驗證功能。

我使用下面的鏈接啟用了Oauth Prompt，它在模擬器中可以正常運行：

如何在不鍵入任何內容的情況下使用C＃創建的SDK V4機器人的瀑布對話框中的oauth提示符下修復帶有oauth提示的下一步導航？

但是無法在Webchat頻道中執行此操作，因此認為如果將其保存在英雄卡中，它將可以正常工作。

語言：C＃
SDK：V4
頻道：WebChat頻道

由於我對BOT和編碼還很陌生，因此請以詳細的指導方式逐步提供代碼或過程，以便我解決問題。

請幫忙。

致謝-ChaitayaNG

我不知道該怎么做，所以我嘗試在index.html中執行以下操作： https : //github.com/microsoft/BotFramework-WebChat/tree/master/samples/18.customization-open-url

這對我也不起作用。

我也查看了以下鏈接，但據我了解，對團隊頻道有評論，但對於網絡聊天頻道沒有具體評論：

https://github.com/microsoft/botframework-sdk/issues/4768

我也查看了以下鏈接，但是由於它與React有關，因此我沒有進行調查，因為我正在Webchat頻道和Azure C＃中使用chatbot：

https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/10.a.customization-card-components

我還嘗試在Singin卡中調用oauth提示，該提示不起作用，因為它沒有在Emulator或Webchannel中調用提示。

因此，我需要幫助，因為即使遵循上述鏈接信息，oauth卡也不會加載到Web聊天頻道中。 因此，以為如果我們可以保留一些卡片，可以做到，但沒有發現任何具體的事情也可以做。 由於我是BOT和編碼的新手，所以我可能錯過了一些東西，所以請幫助或提供逐步指導。

預期結果：需要將oauth提示顯示在HeroCard或任何其他合適的卡中，因為代碼不起作用，或者在Webchat通道中加載oauth提示在Emulator中工作正常。 實際結果：不知道如何實現。

根據Richardson的評論添加詳細信息：您好Richardson，

我在瀑布對話框中使用了OauthPrompt，在第1步中：我顯示OAuthCard提示符，然后單擊鏈接，它會彈出一個新窗口以輸入憑據，並提供了一個神奇的代碼。 我在瀏覽器中輸入魔術代碼，然后轉到步驟2：在這里，我正在檢索令牌，並進一步進行操作，因為我說這將在仿真器中工作，如下面的鏈接所述：

如何在不鍵入任何內容的情況下使用C＃創建的SDK V4機器人的瀑布對話框中的oauth提示符下修復帶有oauth提示的下一步導航？

來到Webchat時，向我顯示了以下內容：[文件類型'application / vnd.microsoft.card.oauth']

而不是登錄按鈕或鏈接。

我使用的代碼如下：

public class LoginDialog : WaterfallDialog
{
    public LoginDialog(string dialogId, IEnumerable<WaterfallStep> steps = null)
         : base(dialogId, steps)
    {
        AddStep(async (stepContext, cancellationToken) =>
        {
            await stepContext.Context.SendActivityAsync("Please login using below option in order to continue with other options...");

            return await stepContext.BeginDialogAsync("loginprompt", cancellationToken: cancellationToken); // This actually calls the  dialogue of OAuthPrompt whose name is  in EchoWithCounterBot.LoginPromptName.  


        });

        AddStep(async (stepContext, cancellationToken) =>
        {
            Tokenresponse = (TokenResponse)stepContext.Result;

            if (Tokenresponse != null)
            {

                await stepContext.Context.SendActivityAsync($"logged in successfully... ");


                return await stepContext.BeginDialogAsync(DisplayOptionsDialog.Id); //Here it goes To another dialogue class where options are displayed
            }
            else
            {
                await stepContext.Context.SendActivityAsync("Login was not successful, Please try again...", cancellationToken: cancellationToken);


                await stepContext.BeginDialogAsync("loginprompt", cancellationToken: cancellationToken);
            }

            return await stepContext.EndDialogAsync();
        });
    }

    public static new string Id => "LoginDialog";

    public static LoginDialog Instance { get; } = new LoginDialog(Id);
}

在稱為Mainrootdialog類的maindialog中：1.我有一個變量LoginPromptName = "loginprompt"和另一個用於連接名稱的參數； public const string ConnectionName = "conname";

然后，我有一個名為提示符的方法，該方法接受連接名稱，並具有如下所示的與oauthprompt相關的代碼：

  private static OAuthPrompt Prompt(string connectionName)
        {
            return new OAuthPrompt(
               "loginprompt",
               new OAuthPromptSettings
               {
                   ConnectionName = connectionName,
                   Text = "signin",
                   Title = "signin",
                   Timeout = 300000, // User has 5 minutes to login (1000 * 60 * 
               });
        }

最后，此提示將添加到對話框集或堆棧中，如下所示：

     public MainRootDialog(UserState userState)
            : base("root")
        {
            _userStateAccessor = userState.CreateProperty<JObject>("result");

            AddDialog(Prompt(ConnectionName));
            AddDialog(LoginDialog.Instance);            
            InitialDialogId = LoginDialog.Id;
        }

正如您試圖在模擬器中完美解釋的那樣，您可以從上面共享鏈接中的評論中看到

但是在網絡聊天頻道中不會加載按鈕或鏈接，這給了我：[類型為'application / vnd.microsoft.card.oauth'的文件]

我嘗試了以下GitHub鏈接，但我無法粘貼或附加HTML文件以供參考： https : //github.com/microsoft/BotFramework-WebChat/tree/master/samples/18.customization-open-url

 <!DOCTYPE html> <html lang="en-US"> <head> <title>Web Chat: Customize open URL behavior</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js". When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js", or lock down on a specific version with the following format: "/4.1.0/webchat.js". --> <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script> <style> html, body { height: 100% } body { margin: 0 } #webchat, #webchat > * { height: 100%; width: 100%; } </style> </head> <body> <div id="webchat" role="main"> <iframe src='https://webchat.botframework.com/embed/TestBotForOauthPrompt?s=<<Given my secretkey of web chat channel>>' style='min-width: 400px; width: 100%; min-height: 500px;'></iframe> </div> <script> (async function () { // In this demo, we are using Direct Line token from MockBot. // To talk to your bot, you should use the token exchanged using your Direct Line secret. // You should never put the Direct Line secret in the browser or client app. // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication const res = await fetch('https://testbotforoauthprompt.azurewebsites.net//directline//token', { method: 'POST' }); const { token } = await res.json(); window.WebChat.renderWebChat({ directLine: window.WebChat.createDirectLine({ token }), // We are adding a new middleware to handle card action cardActionMiddleware: () => next => async ({ cardAction, getSignInUrl }) => { const { type, value } = cardAction; switch (type) { case 'signin': // For OAuth or sign-in popups, we will open the auth dialog directly. const popup = window.open(); const url = await getSignInUrl(); popup.location.href = url; break; case 'openUrl': if (confirm(`Do you want to open this URL?\\n\\n${ value }`)) { window.open(value, '_blank'); } break; default: return next({ cardAction, getSignInUrl }); } } }, document.getElementById('webchat')); document.querySelector('#webchat > *').focus(); })().catch(err => console.error(err)); </script> </body> </html>

來到您提供的鏈接無法打開它給我404錯誤

日期：2019年5月29日原因：進一步詢問Richardson提供的意見

我了解在生成令牌的控制器類中編寫了.NET代碼。 有一個用於加載網絡聊天的html頁面，其中包含存儲或公開令牌所需的腳本，然后只要打開此HTML文件，聊天機器人就會打開。 但是，我有以下查詢。 這些看起來很基礎，但是請耐心接受，因為我是編碼新手：

應該在哪里編寫代碼，如何調用該代碼，因為我未在html腳本中指定或在任何地方調用Controller類Index方法來生成令牌並使用它？ 或者它將自動調用控制器內部的index方法。 如果沒有，我應該在哪里自動指定u調用索引方法？ 是否可以提供完整的解決方案，例如在解決方案中包含機器人代碼和控制器類，這樣我可以得到更好的畫面，以便可以詢問其他任何進一步的查詢（如果有）？
.net代碼是單獨的解決方案還是應該在同一機器人解決方案控制器類中編寫？ 如果是單獨的解決方案，那么如何將其以藍色發布到BOT資源？ 僵屍程序和新解決方案如何在不提供任何連接的情況下自動交互？
我假設它應該在Visual Studio的同一BOT代碼解決方案內創建一個新類。 現在，我對此有進一步的查詢（基於此假設）：

一種。 根據我對您的解釋的理解，post方法不起作用，因為沒有令牌生成器，因此它會給您一個錯誤。 您可以使用下面的鏈接編寫代碼並獲取令牌，該令牌又使問題1出現？

從HTML文件中的JavaScript到Bot Framework v4的Microsoft Web Chat控件進行身份驗證的正確方法是什么？

b。 在HTML文件中，如果我編寫了按上述鏈接給出的腳本，則該腳本應位於相同的異步函數中，否則我們必須刪除異步函數？

C。 如果保持原樣，像BOT Avatar之類的樣式選項是否仍然有效？ 其他腳本顯示歡迎消息的方式是否相同？

d。 在GetElementByID（''）中，我們通過上面的鏈接傳遞bot作為值，但在實際示例中，我們傳遞了網絡聊天，這是因為我們已經將POST方法更改為新腳本了嗎？

e。 應該保留張貼方法還是可以將其刪除？ 代替發布行：

const res = await fetch（' https://examplebot.azurewebsites.net/directline/token '，{method：'POST'}）; 編寫如下新腳本：下面給出的腳本（摘自上面的鏈接）：

@model ChatConfig
@{
    ViewData["Title"] = "Home Page";
}
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<div id="bot" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
      BotChat.App({
          directLine: {
              secret: '@Model.Token'
          },
        user: { id: @Model.UserId },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("bot"));
</script>

您還解釋了為避免所有這些復雜情況並使它變得簡單，只需將您的秘密保存在文件中即可：Current：const {token} = await res.json（）; 簡單起見：const {token} = <>; 我的理解對嗎？

在第四個問題之上：然后，也應該刪除POST方法行，即在該行下面，我們不必編寫新的控制器類或上面的Model config腳本，其余的保持原樣：類似於下面和bot當我打開頁面並加載OAuth提示和自適應卡片時，加載不會出現任何問題：

Avanade D365 F＆O資產BOT

 <!-- For demonstration purposes, we are using development branch of Web Chat at "/master/webchat.js". When you are using Web Chat for production, you should use the latest stable at "/latest/webchat.js". Or locked down on a specific version "/4.1.0/webchat.js". --> <script 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>

 </div> <script> (async function () { // In this demo, we are using Direct Line token from MockBot. // To talk to your bot, you should use the token exchanged using your Direct Line secret. // You should never put the Direct Line secret in the browser or client app. // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication const { token } = <<Directline secret from azure portal durect line channel>>; const styleOptions = { botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0', botAvatarInitials: 'BF', userAvatarImage: 'https://avatars1.githubusercontent.com/u/45868722?s=96&v=4', userAvatarInitials: 'WC', bubbleBackground: 'rgba(0, 0, 255, .1)', bubbleFromUserBackground: 'rgba(0, 255, 0, .1)' }; // We are using a customized store to add hooks to connect event const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => { if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') { // When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT dispatch({ type: 'WEB_CHAT/SEND_EVENT', payload: { name: 'webchat/join', value: { language: window.navigator.language } } }); } return next(action); }); window.WebChat.renderWebChat({ directLine: window.WebChat.createDirectLine({ token }), store }, document.getElementById('webchat')); document.querySelector('#webchat > *').focus(); })().catch(err => console.error(err)); </script>

我的理解對嗎？

2019年5月30日更新ChaitanyaNG的評論：屏幕快照：供參考使用Richardson提供的HTML文件原樣並將其替換為我的BOT Direct Channel密鑰

Answer 1

真正的問題在您的評論中：

來到Webchat時，向我顯示了以下內容：[文件類型'application / vnd.microsoft.card.oauth']

原因是：

<div id="webchat" role="main">
        <iframe src='https://webchat.botframework.com/embed/TestBotForOauthPrompt?s=<<Given my secretkey of web chat channel>>' style='min-width: 400px; width: 100%; min-height: 500px;'></iframe>
    </div>
    <script>
      (async function () {
        // In this demo, we are using Direct Line token from MockBot.
        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
        // You should never put the Direct Line secret in the browser or client app.
        // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
        const res = await fetch('https://testbotforoauthprompt.azurewebsites.net//directline//token', { method: 'POST' });
        const { token } = await res.json();

第一個問題：您同時使用iframe（ <iframe src='https://webchat... ）和 WebChat（ <script> (async function ()... ）。

修復：刪除iframe並僅使用WebChat代碼 。 這在任何地方都沒有實際記載，但是iFrame使用的是botchat ，它是WebChat的較舊版本，無法與OAuth配合使用，並且為您提供了[File of type...錯誤。

第二個問題：您沒有獲得有效的令牌

const res =等待fetch（' https://testbotforoauthprompt.azurewebsites.net//directline//token '，{method：'POST'}）;

該代碼返回404，因為https://testbotforoauthprompt.azurewebsites.net/directline/token不存在。

您應該遵循代碼注釋中鏈接的指南，該指南將使您向POST請求發送https://directline.botframework.com/v3/directline/tokens/generate ，並在標題中添加Authorization: Bearer <YourSecretFromAzurePortal> 。

另外，您可以直接使用const token = <YourSecretFromAzurePortal> 。 請注意，直接使用您的秘密不是一個好主意。 您應該真正設置一個令牌服務器。 這應該可以幫助您入門（注意：這是我打算在上面的評論中使用的鏈接），但是稍微復雜一些。 如果您只是想要簡單的東西，而不管您的應用程序密碼是否泄露，請使用const token = <YourSecretFromAzurePortal>方法。

我剛剛在這里回答了類似的問題。

關於您的更新

代幣生成器

關於：這個答案

如果您想將Secret保密，則需要編寫自己的令牌服務器。 鏈接答案的前半部分說明了執行此操作的基本方法。 您既可以編寫自己的代碼，也可以在鏈接的答案中使用示例，也可以使用在該答案中鏈接的博客文章中的代碼。

將代碼放在何處取決於您希望它如何運行。 樣本令牌服務器與機器人完全分開。 博客文章樣本展示了如何將其集成到您的機器人中（盡管您也可以單獨托管它）。

WebChat客戶端向該令牌服務器發出請求，該令牌服務器向https://directline.botframework.com/v3/directline/tokens/generate發出請求並返回響應，這是有效的DirectLine令牌。

然而，在許多情況下，你不需要編寫自己的令牌服務器的額外的安全性。 鏈接答案的后半部分說明，對於許多簡單的漫游器而言，暴露秘密的安全風險很小。

我建議您（因為您說過對編碼還不const token = <Directline secret from azure portal direct line channel>; ），所以不要編寫自己的令牌服務器，而const token = <Directline secret from azure portal direct line channel>;公開在const token = <Directline secret from azure portal direct line channel>; （請注意，我刪除了{} ，因為您的令牌是一個string ）。 如果您真的想使用令牌服務器，則需要學習如何用C＃編寫服務器。

HTML文件

您從examplebot.azurewebsites...獲得的代碼使用Angular（我認為）。 老了 不要使用它。

您應該基於WebChat示例之一創建HTML代碼。

看起來就像您的最后一個代碼塊一樣。 由於存在很多混亂，請使用以下命令：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Custom style options</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
      For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
      When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
      or lock down on a specific version with the following format: "/4.1.0/webchat.js".
    -->
    <script src="https://cdn.botframework.com/botframework-webchat/master/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 () {
        // In this demo, we are using Direct Line token from MockBot.
        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
        // You should never put the Direct Line secret in the browser or client app.
        // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication

        // Token is found by going to Azure Portal > Your Web App Bot > Channels > Web Chat - Edit > Secret Keys - Show
        // It looks something like this: pD*********xI.8ZbgTHof3GL_nM5***********aggt5qLOBrigZ8
        const token = '<Directline secret from azure portal durect line channel>';

        // You can modify the style set by providing a limited set of style options
        const styleOptions = {
            botAvatarImage: 'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
            botAvatarInitials: 'BF',
            userAvatarImage: 'https://avatars1.githubusercontent.com/u/45868722?s=96&v=4',
            userAvatarInitials: 'WC',
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
        };

        // We are using a customized store to add hooks to connect event
        const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            // When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
            dispatch({
            type: 'WEB_CHAT/SEND_EVENT',
            payload: {
                name: 'webchat/join',
                value: { language: window.navigator.language }
            }
            });
        }
        return next(action);
        });

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

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

回答你的問題

一種。 正確。 POST方法不起作用，因為您使用的鏈接上沒有令牌服務器。

b。 使用我上面的代碼

C。 是的，您可以根據需要設置樣式。 由於出現'DIRECT_LINE/CONNECT_FULFILLED'代碼，因此歡迎消息應該起作用。 您可以從WebChat示例中添加其他代碼來完成其他事情，是的。

d。 不要使用在getElementById中傳遞“ bot”的代碼。 使用WebChat示例中的代碼或我發布的代碼

e。 除非使用令牌服務器，否則刪除post方法。

基本上是對的。 請參閱以上回復。
是。 刪除POST方法。 您的代碼非常接近！

確保您使用的令牌來自此處：

[BotFramework]：在使用C＃SDK V4開發的BOT中，是否可以在英雄卡或自適應卡中顯示Oauth提示？

問題描述

1 個解決方案

解決方案1
1 已采納 2019-05-27 18:58:41

關於您的更新

[BotFramework]：在使用C＃SDK V4開發的BOT中，是否可以在英雄卡或自適應卡中顯示Oauth提示？

問題描述

1 個解決方案

解決方案1 1 已采納 2019-05-27 18:58:41

關於您的更新

解決方案1
1 已采納 2019-05-27 18:58:41