I had use the Bot Services sample from Microsoft Sample for Bot Services. After I debug, the web page does not shown any thing. Here with my source code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Web Chat: Minimal bundle with Markdown</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.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://csharpbotdw.azurewebsites.net/directline/token', { method: 'POST' }); const { token } = await res.json(); const markdownIt = window.markdownit(); window.WebChat.renderWebChat( { directLine: window.WebChat.createDirectLine({ token }) }, document.getElementById('webchat') ); document.querySelector('#webchat > *').focus(); })().catch(err => console.error(err)); </script> </body> </html> I only saw the error mention Access to fetch at 'https://csharpbotdw.azurewebsites.net/directline/token' from origin 'http://localhost:63191' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. [http://localhost:63191/Test13122019]

No response from Directline for Azure Bot Services and blocked by CORS policy

Reputation: 231

If the DirectLine or WebChat is created as "Bot Channel Registration" the below code will work.

(async()=>{
        const styleOptions = {
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)',
            rootHeight: '100%',
            rootWidth: '50%',
            botAvatarInitials: 'WC',
            userAvatarInitials: 'WW',
         };
         var response = {};
         const body = {
            "user": {
               "id": "George",
               "name": "George"
            },
            "trustedOrigins": [
               "http://localhost:5500"
            ]
            }
         const res =  await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { 
            method: 'POST' ,
            headers: {
               'Accept': 'application/json',
               'Content-Type': 'application/json',
               Authorization: "Bearer <<YOUR_SECRET>>",
            },
            body:JSON.stringify(body)
         }).then((response) => response.json())
         .then((data) => response = data);
      const  tokenString  = response.token;
      console.log("Token " , tokenString );
         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: tokenString
               }),
               
               username: 'George',
               locale: 'en-US',
               styleOptions
            },
            document.getElementById('webchat')
         );
      })();

Upvotes: 0

Stanley Gong

Reputation: 12153

Obviously , your Azure app service has not configured CORS correctly in the CORS setting of your Azure app service which hosts your codes. I solved a similar issue with detailed steps here, pls have a try to see if it is helpful for you.

Seems there is something wrong with the URL : https://csharpbotdw.azurewebsites.net/directline/token that you get your directLine token. Each time I call this URL I got an 404 error, seems there is no such API there.

If you haven't implemented such API in your code, try the code below in your .net framework project :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;
using Newtonsoft.Json;

namespace CoreBot.Controllers
{
    [Route("api/token")]
    public class TokenController : ApiController
    {
        public async Task<IHttpActionResult> token()
        {
            var secret = "<your bot channel directline secret>";

            HttpClient client = new HttpClient();

            HttpRequestMessage request = new HttpRequestMessage(
                HttpMethod.Post,
                $"https://directline.botframework.com/v3/directline/tokens/generate");

            request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", secret);

            var userId = $"dl_{Guid.NewGuid()}";

            request.Content = new StringContent(
                Newtonsoft.Json.JsonConvert.SerializeObject(
                    new { User = new { Id = userId } }),
                    Encoding.UTF8,
                    "application/json");

            var response = await client.SendAsync(request);
            string token = String.Empty;

            if (response.IsSuccessStatusCode)
            {
                var body = await response.Content.ReadAsStringAsync();
                token = JsonConvert.DeserializeObject<DirectLineToken>(body).token;
            }

            var config = new ChatConfig()
            {
                token = token,
                userId = userId
            };

            return Ok(config);
        }

    }


    public class DirectLineToken
    {
        public string conversationId { get; set; }
        public string token { get; set; }
        public int expires_in { get; set; }
    }
    public class ChatConfig
    {
        public string token { get; set; }
        public string userId { get; set; }
    }
}

You can get bot channel directline secret here :

To integrate this into your project, pls create a TokenController.cs file under your controller folder in your project and paste the code above into it:

And you will be able to get token via URL :https://csharpbotdw.azurewebsites.net/api/token by post method after you publish your project to Azure.

Test result on my local :

You can use the HTML code to connect to your bot after you enabled CORS and publish your code to Azure :

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>Web Chat: Minimal bundle with Markdown</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.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://csharpbotdw.azurewebsites.net/api/token', { method: 'POST' });
            const { token } = await res.json();
            
            window.WebChat.renderWebChat(
              {
                    directLine: window.WebChat.createDirectLine({ token })
    
              },
              document.getElementById('webchat')
            );
            document.querySelector('#webchat > *').focus();
          })().catch(err => console.error(err));
        </script>
    </body>
    </html>

Upvotes: 3

No response from Directline for Azure Bot Services and blocked by CORS policy

Answers (3)

Related Questions