Bot framework get the ServiceUrl of embedded chat control page - c#

I want to embed the chat control to many websites and I want to get the Url of the website that I've embedded in order to my bot can get the Data matching with the Website URL. However, when I embed the iframe generated from WebChat, I always get the same ServiceUrl and that's https://webchat.botframework.com/, it isn't the Url of the website, so how can I embed the chat control to any website and my bot can get the website Url not the Url of the WebChat or DirectLine.
Here's what I've tried:Direct-Line chat control
Here's the result I've tested with my published bot:
I've noticed that, when I've tested my bot with the Bot Framework Emulator, it always return the exact Url of the sender (in case of local testingm, it will return http://localhost:XXXX/). So how can we do like this?

I think a way to achieve this would be by using BackChannel, which adds the ability for a bot to communicate with a page that embeds the bot through WebChat. It will a allow you to:
Send events to a page that hosts an instance of a WebChat
Listen for events from the page that hosts an instance of a WebChat
The first piece is, of course, the HTML page, which will contain what you put together, plus the logic to send/listen to events. The sample page with the basic logic can be found here and below is the image with the events related code.
Now, you need to prepare your bot to listen and send events. There is a sample in Node.js, that shows how to do that.
Porting that in C#, is as easy as listen and sending to activities of type Event. A sample code for that (using the events of the HTML page mentioned before):
public async Task<HttpResponseMessage> Post([FromBody]Activity activity)
{
if (activity.Type == ActivityTypes.Event &&
string.Equals(activity.Name, "buttonClicked", StringComparison.InvariantCultureIgnoreCase))
{
ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));
// return our reply to the user
Activity reply = activity.CreateReply("I see that you just pushed that button");
await connector.Conversations.ReplyToActivityAsync(reply);
}
if (activity.Type == ActivityTypes.Message)
{
ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));
// return our reply to the user
var reply = activity.CreateReply();
reply.Type = ActivityTypes.Event;
reply.Name = "changeBackground";
reply.Value = activity.Text;
await connector.Conversations.ReplyToActivityAsync(reply);
}
else
{
HandleSystemMessage(activity);
}
var response = Request.CreateResponse(HttpStatusCode.OK);
return response;
}
Bottom line, in your HTML page you will have to send an event to the bot, with the page URL and the bot will have to listen to that event to get the value

Related

Logging in in embedded browser deprecation

Facebook is terminating logging in via embedded browser. I have implemented FB login using CustomRenderer in Xamarin.Forms.
In that we do not have option of LoginBehavior. So does anyone know how to handle this in Xamarin.Forms?
The best solution is to open the login page in a CustomTab, Android offers such tabs so one does not have to call an external browser (I don't know whether Xamarin offers its own classes to use OAuth).
public void OpenWebsiteInApp(string url)
{
// Use the Android custom tabs to display the webpage inside the app.
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
CustomTabsIntent customTabsIntent = builder.Build();
customTabsIntent.LaunchUrl(_applicationContext, Uri.Parse(url));
}
To catch the redirect from the online service, you need to implement an activity with an IntentFilter defining a DataScheme.
Finally I have got the solution for Xamarin.Forms. I have followed this tutorial and the problem is solved.
https://evgenyzborovsky.com/2018/03/09/using-native-facebook-login-button-in-xamarin-forms/
After successful login we are getting Access_token and userid values and by using it we can get user details like First name, Last name easily.
Here is the code for the same:
var client = new System.Net.Http.HttpClient();
var url = $"https://graph.facebook.com/{facebookResponse.userId}?
fields=id,first_name,last_name,email,picture&access_token=
{facebookResponse.accessToken}";
var response = await client.GetAsync(url);
var result = response.Content.ReadAsStringAsync().Result;
var resultobject = JsonConvert.DeserializeObject<FacebookResponse>(result);
Limitations:
You can not change Login button Icon or Text properties like font and size etc.
If you want to use another FB account to login you first have to logout from device's browser manually.

Dialog automatically continue when user closes or press a button in the webview on Botframework V4

I have a web app deployed in azure that opens in Messenger Webview. I made a empty text prompt for user to click for the user to be able to continue when they close the Webview. However, users sometimes forget to click the button. I read this doc but i can't manage to do it as i learn best seeing actual examples and codes. How can the dialog automatically continue when the user closes or press a button in the Webview? Thank you.
The web view is a set of questions and the answer of the users are save in Cosmos DB and when they close the web view the bot access their scores in Cosmos DB and calculate their scores.
This is my current code.
private static async Task<DialogTurnResult> ThirdStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken = default(CancellationToken))
{
Activity reply = stepContext.Context.Activity.CreateReply();
reply.ChannelData = JObject.FromObject(
new
{
attachment = new
{
type = "template",
payload = new
{
template_type = "generic",
elements = new[]
{
new
{
title = "<title>",
buttons = new object[]
{
new
{
type = "web_url",
title = "<title>",
url = webAppUrl,
messenger_extensions="true",
webview_height_ratio = "tall",
},
new
{
type = "postback",
title = "Done ✔️",
payload = "Done ✔️",
},
},
},
},
},
},
});
await stepContext.Context.SendActivityAsync(reply);
return await stepContext.PromptAsync(
nameof(TextPrompt),
new PromptOptions
{
Prompt = MessageFactory.Text(string.Empty),
RetryPrompt = MessageFactory.Text("Click Done to proceed."),
});
}
private static async Task<DialogTurnResult> FourthStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)
{
var result = stepContext.Result.ToString().ToLower();
if (result == "done ✔️" || result == "done")
{
return await stepContext.NextAsync();
}
await stepContext.Context.SendActivityAsync(
MessageFactory.Text(
$"Please press done to proceed, thank you!"));
return await stepContext.ReplaceDialogAsync(nameof(CalendarIncomeExpensesDialogV2));
}
update rafa:
Since you don't even know what kind of web app you're trying to create or what language you're writing the web app in or how you plan on hosting the web app, your first step is to figure all that out. If you need help with any part of that process then you'll need to ask a new very specific question about it and include what you've tried so far along with all the relevant code.
When you open the web app in your Facebook webview, you'll need to make sure the web app has all the information it needs to send an activity to the bot (I've been calling it a proactive message but those normally refer to bot-to-user messages). The needed credentials should already be built into the web app, so the only thing you'll need to send to the web app's endpoint is the user ID so that the web app can pass it along in the activity and the bot can identify which conversation the activity pertains to. The conventional way to send an activity to the bot is using Direct Line, though you may figure out a way to do it by just sending an HTTP request to the bot's endpoint or even using your Facebook app's callback URL.
There is absolutely no need to involve LUIS in this. LUIS should only be used to interpret messages from the user when you don't know what the user will say. Any time you're in control of the message that's getting sent to the bot, it doesn't make any sense to use LUIS. Keep in mind that there are 15+ activity types and your activity doesn't need to be a "message" activity. There are many ways you can identify the activity and respond accordingly in your bot. I recommend using an event activity.
Based on my understanding of your proficiency level, you will likely need to do a lot of research to accomplish what you're trying to accomplish. The documentation is a great place to start: https://learn.microsoft.com/en-us/azure/bot-service/

Shifting from chatbot view to ionic mobile app page automatically when reaching a step in dialogue flow

I am using MS chatbot-framework V3 and embedding it in my ionic 3 mobile app via Direct line.
What I am aiming to is when reaching the end of conversation, the chatbot is terminated and shifting to another page in the mobile app with passing some values from chatbot to that page.
When you reach the end of your conversation, you can send an event activity to your DirectLine Client with channel data from the conversation, and once the client receives the event, you can transition to the next view in your app with the channel data. See the code snippets below.
Sending Transition Event
In the bot, we are going to send back channel events to DirectLine with the data we have gathered in the chat. Basically, you just need to send an activity with the type property set to 'event' and the name attribute set to some string value - we are going to use 'transition' in this case. The conversation data is going to be encapsulated in the activity's channel data.
// End of conversation
var reply = turnContext.Activity.CreateReply();
reply.Name = "transition";
reply.Type = "event";
reply.ChannelData = JObject.FromObject( new {
user = new {
name = "TJ",
location = "Seattle"
}
});
await turnContext.SendActivityAsync(reply, cancellationToken: cancellationToken);
Listen for Transition Event
On the client side, we are going to filter the incoming activities to listen for our 'transition' event from the bot. When it's received, you can transition to the next view and pass along the channel data which contains the conversation data.
import { DirectLine } from 'botframework-directlinejs';
var directLine = new DirectLine({
secret: "<DIRECTLINE_SECRET"
});
directLine.activity$
.filter(activity => activity.type === 'event' && activity.name === 'transition')
.subscribe( activity => { /* Initiate transition to next view with activity.channelData */ });
Hope this helps!

Resume Bot Framework dialog when triggered by external service

The Scenario
I have a bot built using the Bot Framework with a series of dialogs. One of these dialogs gives the user the option of inputting some complex data via a web page by presenting a button to them. Clicking the button they are then taken to the site, fill out the data, save and are then directed back to the bot.
I want my bot to pause the dialog until it receives an event from my web page telling me the user has saved the data and then continue asking the user questions.
Before
I had a version implemented whereby I would store a ConversationReference before the user clicked the button and then when the external event happened I would send the cards and next messages I wanted to show (not in a dialog) from a webhook, that was fine but it got quite complicated/messy - I'd rather keep the whole app in one continuous dialog.
Idea 1: Use DirectLine API
I did some research and many people were suggesting using the DirectLine API. So I implemented this:
public async Task SendEventAsync(InternalEventMessage message, ConversationReference reference) {
var client = new DirectLineClient(!String.IsNullOrEmpty(_settings.DirectLineSecret) ? _settings.DirectLineSecret : null);
if (_settings.SiteUrl.Contains("localhost")) {
client.BaseUri = new Uri(_settings.DirectLineServiceUrl);
}
var eventMessage = Activity.CreateEventActivity();
//Wrong way round?!?
eventMessage.From = reference.Bot;
eventMessage.Type = ActivityTypes.Event;
eventMessage.Value = message;
var conversation = await client.Conversations.PostActivityAsync(reference.Conversation.Id, eventMessage as Activity);
}
This uses the DirectLine client to send an event message to the serviceUrl using a stored ConversationReference, basically imitating a user (bot and user seem to be the wrong way round in the SDK). Checking for localhost was so that the DirectLine library pointed at the emulator server rather than https://directline.botframework.com.
In my dialog I call:
//method above shows input button and links to web page
context.Wait(WaitForAddressInput);
}
private async Task WaitForAddressInput(IDialogContext context, IAwaitable<IActivity> result) {
var message = await result;
switch (message.Type) {
case ActivityTypes.Message:
//TODO: Add response
break;
case ActivityTypes.Event:
var eventMessage = message as IEventActivity;
if (((JObject)eventMessage.Value).ToObject<InternalEventMessage>().Type == EventType.AddressInputComplete) {
_addressResult = (await _tableService.ReadOrderById(Order.OrderId)).Address;
await context.PostAsync($"Great}");
context.Done(_addressResult);
}
break;
}
}
This waits for any message from the user after the button has been shown and if our event matches then we proceed with the dialog.
This works locally using the emulator but, frustratingly, doesn't live. It fails to recognise channels created via webchat or Messenger. That is explained here: Microsoft Bot Framework DirectLine Can't Access Conversations
For security reasons, you can't use DirectLine to spy on messages from
another conversation.
So I can't access a channel that I haven't created using DirectLine.
Idea 2: BotConnector
So I thought I'd try the BotConnector using similar code:
public async Task SendEventAsync(InternalEventMessage message, Microsoft.Bot.Connector.DirectLine.ConversationReference reference) {
var botAccount = new ChannelAccount(reference.User.Id, reference.User.Name);
var userAccount = new ChannelAccount(reference.Bot.Id, reference.Bot.Name);
MicrosoftAppCredentials.TrustServiceUrl(reference.ServiceUrl);
var connector = new ConnectorClient(new Uri(reference.ServiceUrl), new MicrosoftAppCredentials("xxxxxxxxxxxxxxxxxxxxxxxx", "xxxxxxxxxxxxxxxxxxxxxxxx"));
connector.Credentials.InitializeServiceClient();
var eventMessage = Activity.CreateMessageActivity();
eventMessage.Recipient = botAccount;
eventMessage.From = userAccount;
eventMessage.Type = ActivityTypes.Event;
eventMessage.Conversation = new ConversationAccount(id: reference.Conversation.Id);
eventMessage.ServiceUrl = reference.ServiceUrl;
eventMessage.Timestamp = DateTimeOffset.UtcNow;
eventMessage.LocalTimestamp = DateTime.Now;
eventMessage.ChannelId = reference.ChannelId;
var result = await connector.Conversations.SendToConversationAsync(eventMessage as Microsoft.Bot.Connector.Activity);
}
This doesn't crash and I can see the event appear in the emulator request console but nothing happens, it seems to be ignored!
Idea 3: Try to imitate the bot service calling my bot
I haven't tried this yet because I think it might be the most time consuming but I was reading here about the service authentication and wondered if it would be possible to imitate the hosted bot service sending a message and send my event that way with the required data?
This seems like a fairly common scenario so I'm surprised I haven't come across a way to do this yet. If anyone has any other ideas on how I can send an event message to my bot from an external service then I'd love to hear it.
Update:
See my answer below Eric's to see what I did.
Idea 1:
DirectLine is a channel, not a library to use in order to connect to channels. (For instance: you would not use Facebook Messenger to connect to Skype) DirectLineClient is useful for creating a client application that connects to the DirectLine channel through the Direct Line connector service.
Idea 2:
This method should work. In fact, the BotAuth library uses this method for the MagicNumber login flow within the CallbackController: https://github.com/MicrosoftDX/botauth/blob/9a0a9f1b665f4aa95b6d60d09346dda90d8b314e/CSharp/BotAuth/Controllers/CallbackController.cs
For your scenario, you should be able to construct a CardAction of type ActionTypes.OpenUrl that contains a value with the ConversationReference encoded in the url. Clicking the button will call an mvc controller that displays a page (saving the ConversationReference in a cookie or something) and when the user finishes adding the address on the page, use the ConversationReference to send an event to the bot (similar to how BotAuth resumes the conversation in the CallbackController).
Idea 3:
This would bypass the connector services, and is not a supported scenario. The link you shared explains the details of how authentication works in the Bot Framework, not how to bypass the connector services.
Eric's answer led me to solve the issue using the BotAuth example but, for completeness, here is what I did using Idea 2.
I created a CallbackController on my Bot Framework endpoint and then used the following code to send an event back to the awaiting dialog:
MicrosoftAppCredentials.TrustServiceUrl(reference.ServiceUrl);
var message = reference.GetPostToBotMessage();
message.Value = new InternalEventMessage(type);
message.Type = ActivityTypes.Event;
await Conversation.ResumeAsync(reference, message);
The dialog awaits with this code and continues:
context.Wait(WaitForAddressInput);
}
private async Task WaitForAddressInput(IDialogContext context,
IAwaitable<IActivity> result)
{
var message = await result;
switch (message.Type)
{
case ActivityTypes.Message:
//TODO: Add response
break;
case ActivityTypes.Event:
//Process event and continue!
break;
}
}
This is the most complicated issue I've had with the Bot Framework and I found the docs a little lacking. Hope this helps someone!

Teams bot Activity.CreateReply throwing NullReferenceException

I'm working on a bot for Microsoft Teams. I am using the custom bot feature. I got the bot working as a sideloaded package, but due to the constraints of my network, I need to keep the bot internal and use the custom bot feature. I am currently testing it by using ngrok to tunnel to my localhost.
I am now running into an issue when I try to create my reply. Whenever I call this:
var reply = activity.CreateReply(message.ReadToEnd());
I get a NullReferenceException saying that the "Object reference not set to an instance of an object". message is an open .txt file. I get this error every time I call activity.CreateReply(). The part that I don't understand is that everything works as intended in the Bot Framework Emulator and when the bot is a sideloaded package, but not when the bot is a custom bot.
Here's my full Post method:
public async Task<HttpResponseMessage> Post([FromBody]Activity activity)
{
var connector = new ConnectorClient(new Uri(activity.ServiceUrl));
if (activity.Type == ActivityTypes.Message)
{
// Commands:
// Retrieve TFS Work Item(s)
if (new Regex(#"\but\s?\d{5}\b").IsMatch(activity.Text.ToLower()))
{
var reply = new RetrieveWorkItem();
await connector.Conversations.ReplyToActivityAsync(reply.Response(activity));
}
// Help
else if (activity.Text.ToLower().Contains("help"))
{
var message = File.OpenText($"{System.AppDomain.CurrentDomain.BaseDirectory}/Messages/HelpMessage.txt");
var reply = activity.CreateReply(message.ReadToEnd());
await connector.Conversations.ReplyToActivityAsync(reply);
}
// Not Recognized
else
{
var reply = activity.CreateReply("Command not recognized. Type \"#Keller Bot Help\" for a list of commands.");
await connector.Conversations.ReplyToActivityAsync(reply);
}
}
else
{
HandleSystemMessage(activity, connector);
}
var response = Request.CreateResponse(HttpStatusCode.OK);
return response;
}
Here's the full error and StackTrace sent by the bot: https://pastebin.com/ZSrjrA9z
You say you're implementing this as a custom bot, per the instructions here. The issue is that it appears as if you're using the Bot Framework messaging calls (e.g. CreateReply()), which won't work since you're not dealing with a registered BF bot when you go through the custom bot process.
Instead, you can just create a new Activity() and return that in response to the HttpPost request.
We do have a sample you can check out, in case that helps.

Categories