How to run WebChat locally and talk directly to the locally hosted bot?

[pefi1011]

Hi, is WebChat able to (emulate BotConnector services and) talk directly to the locally hosted bot?

Right now, I'm talking to my locally hosted bot, but I have registered it and exposed it to outer world via ngrok. What should I change to enable this? Dan Driscoll mentioned something like unhooking security.

[billba]

WebChat cannot talk directly to a bot. It requires a Direct Line endpoint. There is some talk about adding a Direct Line endpoint to the Emulator, which is the best way I can think of to hook WebChat up to a local bot. Of course the Emulator itself runs a WebChat instance, but I understand you may wish to test WebChat in a website.

[pefi1011]

Thanks for the reply @billba . Yes, I wanted to run a WebChat in a website and talk directly to the bot avoiding the BotConnector.

[billba]

Can you say a little more abut why you want to do this?

[pefi1011]

I'm developing a bot which should be mainly used in an intranet and hence not exposed to the outer world (in the moment).

[billba]

Unfortunately that is not currently a supported scenario. You would need to build your own Direct Line connector.

[billba]

However it's worth saying that even an Intranet bot can be hosted on the Internet. You control which clients have access, so it would still be private to your employees.

[forensicsguy20012004]

@pefi1011 and @billba....I am running into the same situations...corporate policies do not allow for me to "hook up" an external Bot to an Intranet...just not happening.

[billba]

Yup, I understand that this is a widespread requirement. But any solution will not be in WebChat itself, whose whole purpose in life is to be speak Direct Line with BotBuilder bots. What you need, as I mentioned above, is a Direct Line connector for BotBuilder bots.

[pefi1011]

@billba Could you please elaborate what you mean with DirectLine connector? As far as I understand, DirectLine API connects to BotConnector. Once, on the right side which connects different channels with BotConnector and on the left side which connects BotBuilder bots with BotConnector.

Still, if I control over what clients have access, BotConnector sees the whole communications because it's the man in the middle.

P.S. Merry Christmas :smiley:

[forensicsguy20012004]

@pefi1011 and @billba....so for me..if there was a way to take the "botframework-emulator" and "webenize" it that would take care of things. I have my Bot build through "botbuilder" and hosting my Bot internally ... I just need to get a front-end to it. I played around some more with [BotFramework-WebChat] trying to figure out the best way to get the UI to interface with my bot...still working around with the DirectLine stuff. I just wanted to toss out my "user story."

[billba]

@pefi1011 as I understand it there is a BotConnector for each channel, e.g. Skype, Slack, Facebook Messenger. There is also one for DirectLine, which is essentially a generic channel used by custom clients and also WebChat. You are correct: BotConnector is a man in the middle. Of course that's also true for e.g. Facebook and any other messaging system that doesn't do end-to-end encryption of messages. So what you (and @forensicsguy20012004) want is a version of the Direct Line BotConnector that you can run on your Intranet.

I totally get this scenario. I just don't have a solution for you at the moment, and whatever that solution is will not be part of WebChat.

[billba]

Reopening this issue to make it more visible.

[abhishan]

We are also looking at the emulator and seeing if the same can be used to emulate a DirectLine endpoint for webchat clients to hook into. Observations (may not be completely accurate as its WIP):

1. Emulator uses msbotchat (webchat) and extends it to connect to an emulated DirectLine endpoint. Within the emulator client src, mainView.tsx file, I can see this code: `this.directline = new BotChat.DirectLine( { secret: settings.conversation.conversationId, token: settings.conversation.conversationId },' '${Emulator.serviceUrl}/v3/directline'
2. The emulator server listens on a port for incoming bot connections. When you run the emulator you can see the port its listening on
3. If we decouple the emulator server and the webchat client and make the server run independently, it (just!) might be possible to run a bot completely on localhost.

We are currently trying to do this. If anyone here makes a breakthru, please do share.

Optional Notes We have found Azure Bot Services to be an awesome deployment option for bots. Its makes the whole deployment experience very simple, so that we can focus on the building the core conversational experience. Also the security and the scale that we get with Azure, we just cannot get it with any on-prem or private cloud infrastructure. That being said, few customers are still wary of taking the plunge into the cloud. They are definitely lagging when it comes to the adoption of a cloud first enterprise. But with Bots, we are making breakthroughs with such clients as well. For example, we have been able to convince customers to use the power of Cognitive Services to make bots smarter. Its a baby step towards Azure, but its working.

[billba]

@abhishan This is the approach we are looking at - extracting the Direct Line connector out of the Emulator into its own project that can be run independently.

[siddiq-rehman]

@abhishan I hope it works. I have used the emulator as a state endpoint in the similar manner.

[abhishan]

@siddiq-rehman Kindly share the code or the steps how you achieved this. Especially the security issues.

I have tried to expose the emulator server to a stand alone webchat window, but I faced the following issues:

1. Cross Domain Request issues - I tried to set CORS in Restify and made some progress there but results were inconclusive
2. Access Denied Error - After setting CORS, the webchat connection got access denied while connecting. I had set the direct line endpoint to the emulator listening port URL.
3. DirectLine secret and token - I entered the one that was generated by the webchat client (of emulator). I know this is not correct, but I need to still figure this part out.

Still struggling :(

Any help would be appreciated.

[siddiq-rehman]

@abhishan I have used emulator as a state end point in the bot server. I have made changes in chatConnector.js. Wherever the bot server is making a request to the emulator for the state of conversation, there I have bypassed the loop for getting the accesstoken from "https://login.microsoftonline.com/common/oauth2/v2.0/token".

Since the changes are confined only to bot server it was not a difficult task.

But here i tried the same way in webchat client code, so whenever posting the messages i have removed the authorization in the header. But unfortunately it didnt work :(

Still I am too working on it.

[cruise-insights]

@billba @siddiq-rehman

I need to authenticate my user in bot using cookies , already stored in my domain eg. I have a website a.b.com , my user logs into my website When he/she clicks On the bot , the bot should be aware about the user details

I have apis to get the user details , just dont want to ask user to sign in again. I use a session id and other cookies in my website

How can I implement it , my current website runs on azure web app

Thanks

[siddiq-rehman]

Hi,

I am not sure about that, but one thing that I can suggest is, there is a user variable in index.html to which you can pass your cookie. when you check the req.body in ChatConnector file of bot builder module, you can see your user details passed.

This is the basic idea i got. Please reply back if you got any other option.

[billba]

First of all, this sort of question belongs on StackOverflow.

@siddiq-rehman That's not really what the user property is for.

A better approach is to use the backchannel to send authentication information from your web page to your bot.

[siddiq-rehman]

@billba Thanks for the correction.

[sachinsbucket]

Hi , Anyone has got any solution for this. I am struggling with the same issue. I want to connect bot with my custom chat window UI.

[mohdkhan786]

@siddiq-rehman @abhishan @billba Even I am Struggling with the same issue to enable bot completely private to organization. If someone finds a solution pls do share ..

[Nostreum]

Does anyone find a solution at this time ?

[mohdkhan786]

I think no one able to find solution for this so far...

[maheshksingh]

Any solution found for intranet bots

[soonwong]

I have achieved this (testing local webchat on local hosted bot). To do this, you need to:

• Run ngrok locally.
• Log into dev.botframework.com, and update the API callback URL of your bot to https://ngrock.io:xxxx/api/message

This will route your chatbot UI back to your localhost instance :)

[mohdkhan786]

Dear soonwonng

Good that you have achieved it. Could you please share some code or steps to configure this.

Thanks

[maheshksingh]

Amazing, Great stuff soonwong, could you please elaborate or have any reference WEB URL which I can follow to run the ngrok... Thanks

[soonwong]

Righto. On my local computer, I do the following:

• Configure my webchat front end to be hosted on IIS. (e.g. https://localhost:80).
• Configure my webchat to use the direct line API.
• Configure my API to be hosted on IIS. I ensure that a binding to https://localhost:1234 works. Note the port number is arbitrary, I wanted it to be not port 80 to be certain of connectivity.

I then locate ngrok.exe (you will have it if you have successfully set up the BotFramework Emulator). I run the command ngrok http 1234. This will open up a tunnel via ngrok to https://localhost:1234. Use your preferred port number.

I then log on to the https://dev.botframework.com portal:

• I locate my bot
• I configure the bot settings
• I change the endpoint URL from https://mybotinazure.com/api/messages/ to https://xxxxxx.ngrok.io/api/messages/

Presto!

Before this is done, your web traffic will look like: user -> webchat -> directline -> botframework -> bot API -> botframework -> directline -> webchat -> user

After this, it should look like: user -> webchat -> directline -> botframework -> ngrok -> localhost -> ngrok -> botframework -> directline -> webchat -> user.

[maheshksingh]

Geat work and nice way of telling the steps.... only one thing... how secure is it to expose the local intranet to internet thru ngrok? does it provide any security features?

[soonwong]

This should only be done for debugging a development environment. The tunnel will only be running so long as the command line instance of ngrok is running. If you're going to be deploying a production instance of the bot onto an intranet, you will need to find another means of connecting your bot to the botframework in Azure.

[ryanvolum]

@soonwong, @maheshksingh @mohdkhan786 I've created an unofficial testing package that allows you to emulate the connector locally:

NPM package Github Repo

[maheshksingh]

Hello Ryan.. I am still struggling to get a proper solution.. Could you please elaborate your solution please... Thanks for the help...

[ryanvolum]

have you checked out the readme? If you're not a node guy it might be a bit confusing. If you have node running on your computer you can npm install this package and run the directline command mentioned in the readme, passing in the port where you want to host your connector and the endpoint where your bot lives.

[billba]

@maheshksingh The right place to ask questions about Ryan's solution is that GitHub repo: https://github.com/ryanvolum/offline_dl

[mohdkhan786]

Hello Ryan Thats great... My problem is that my bot is in. Net. Will your solution works for. Net bot also or only to node bot?

[mohdkhan786]

For me it is getting error when I run npm run directline 3000 localhost://127.0.0.1:3979/api/messages

May be because of firewall in company. Is there any alternative to install this with firewall.

I tried with setting proxy as well but no success

[billba]

@mohdkhan786 again, please go to that repo to ask questions. This repo is for WebChat itself.

[telkomops]

another option is implement a customer middle ware, which replicates direct line protocol. you can point to your own implementation of directline protocol

[billba]

@telkomops of course you can put a Direct Line endpoint on anything. Ryan's repo is middleware that puts a Direct Line endpoint on any bot using Bot Builder.

[ihachani]

Is there any update on this issue. I want to create a client that talks with a chatbot hosted internally.

[billba]

There are no updates. I again recommend you look at https://github.com/ryanvolum/offline_dl

[maheshksingh]

Hello there... The way we achieved it is... We deployed the bot on a enterprise internal server which is open to receive and send requests to Microsoft bot URLS where the bot is registered... and it works

[KrnAggarwal]

@maheshksingh you implemented in .NET or node.js. Because both have different ways to implement. If implemented in .NET, then can you tell me how you did it?

[compulim]

I have some demo code running at https://github.com/compulim/docker-bot.

Since we recently refactored some code from Bot Emulator, now you can run the emulator server (a.k.a. Emulator Core) from CLI.

The demo in my repos use 3 Docker containers:

• Web site (hosting Web Chat)
• Bot.js exposed on port 3978
• Emulator Core

Just docker-compose build and docker-compose up.

[MatthiasGwiozda]

Why is this issue closed? We need to debug an activity that we send from the webchat and are not able to debug it locally. Will there be a convenient way to do it in the future?