I have created few scenarios in health bot designer. I am trying to integrate with my front end. However, I don't see any complete documentation around integrate process. I have already referred https://github.com/Microsoft/HealthBot-WebChat without any luck. How do I get directline link for healthbot. I have tried with web bot and able to generate directline but not sure how to link web bot channel to health bot scenario. Any help?
You can integrate the Healthcare bot service into a web application using WebChat. First, you need to get your WebChat Secret from the Healthcare Bot Service Manager. In the pane on the left, click on the integrations blade, select secrets in the drop down options, and copy the webchat_secret.
Once you have the secret, you can request a token from DirectLine and render a WebChat component on your web app. Take a look at the example below.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Healthcare bot</title>
<script src="https://cdn.botframework.com/botframework-webchat/master/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"></div>
<script>
(async function() {
// Note, for the simplicity of this example, we are fetching the DirectLine token here;
// however, it is recommended that you create a backend REST API to generate and manage
// your tokens.
const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate',
{
method: 'POST',
headers: {
'Authorization': `Bearer <WEBCHAT_SECRET>`,
'Content-Type': 'application/json'
},
body: {
// The user id must start with `dl` and should be unique for each user.
User: { Id: 'dl_user_id' }
}
});
const { token } = await res.json();
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
}, document.getElementById('webchat'));
})().catch(err => console.log(err));
</script>
</body>
Note, for the simplicity of this example, we are fetching the DirectLine token here; however, it is recommended that you create a backend REST API to generate and manage your tokens.
Hope this helps!
Found a way to do it. We need to add a model and enable the trigger through Health Bot Management Portal
There is a direct way to trigger a scenario from the front end. If you want to completely rely on your own responses, then you have to turn off the built-in scenarios and call a scenario name in the event post javascript code. Look at the "trigger" element below:
botConnection
.postActivity({
type: "event",
value: {
trigger: "your_scenario_name_here", args: {}
},
from: your_user_name,
name: "BeginDebugScenario"
});
Related
I need to send a JWt (access token) to the chatbot via directline. I'm using react as the front end, and the chatbot is integrated into the front end via botframework-webchat.
So far, I was able to send the access token through an activity, which is not recommended as I think.
Right now, the chatbot is asking the user to log in, which is not good because the user is already logged in to the application.
My first question - Is it possible to authenticate the chatbot by an id token instead of connecting with Azure AD, B2C, or any auth service provider?
If it is possible, How can I send the id token to the bot, via botframework-webchat
Thanks in advance
Here is my code for the front end
const Chatbot = (props) => {
const language = localStorage.getItem('language');
const directLine = useMemo(
() => createDirectLine({ token: <my_token>, locale: 'sv-se' }),
[]
);
useEffect(() => {
var activity = {
from: {
id: '001',
name: 'noviral',
},
name: 'startConversation',
type: 'event',
value: 'Hi noviral!',
locale: language === 'en' ? 'en-US' : 'sv-se',
};
directLine.postActivity(activity).subscribe(function (id) {
if (console) {
console.log('welcome message sent to health bot');
}
});
}, []);
return (
<Layout className="login-layout">
<div className="login-div">
<div className="chatbot">
<div className="consent-wrapper">
<ReactWebChat
directLine={directLine}
userID={'001'}
username="Noviral"
locale={language === 'en' ? 'en-US' : 'sv-se'}
></ReactWebChat>
</div>
</div>
</div>
</Layout>
);
};
export default withTranslation()(Chatbot);
Sending the token via an activity is acceptable as activities sent via Direct Line are secure. If you look over the 24.bot-authentication-msgraph sample, you can see that the default action the bot takes is to send an activity displaying the user's token.
As for authentication, the question doesn't seem to be what token you will use but rather how you will authenticate. If you don't use a service provider + login, how is the bot going to verify who the user is? That being said, there are some SSO (single sign-on) options available via Web Chat (see here) that, if a user is already logged in, then SSO could pick it up. You will have to look them over to decide if these options meet your needs.
I built a QnA Maker and integrated it via Direct Line in my Website using BotFramework-WebChat for styling.
Messages of the user and the bot are appearing at the same side of the chat container. I can't figure why.
This is how it currently looks like:
This is the code I'm using:
<script>
const styleSet = window.WebChat.createStyleSet({
bubbleFromUserBackground: 'rgba(227, 227, 227, .1)',
hideUploadButton: true,
botAvatarInitials: 'WD',
sendTypingIndicator: true,
userAvatarInitials: 'you'
});
styleSet.textContent = Object.assign(
{},
styleSet.textContent,
{
fontFamily: '\'Lato\', sans-serif'
}
);
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: 'xxxxxx'
}),
styleSet,
userID: 'qna-homepage-bot',
username: 'Web Chat User',
locale: 'en-US',
},
document.getElementById('webchat')
);
document.querySelector('#webchat > *').focus();
</script>
I wasn't able to reproduce this, but I suspect you are setting your user ID to the same value as the bot ID. When Web Chat receives an activity, it sets the role property in the activity's from attribute based on the ID (you can take a look at the source code here). Web Chat then uses the role to determine how the activity is styled. If the bot id equals the user id, Web Chat will confuse the role attribute and apply the wrong CSS stylings. Try changing the userID value in the render Web Chat options to something else.
Note, the userID value should be unique for each user; otherwise, every conversation will share the same user state.
Hope this helps!
We have created a bot using ms bot framework and wanted to pass some data to bot which user will not input. Like I was thinking if we can pass query string to below web channel.
https://webchat.botframework.com/embed/myformbot?s=XXXXXX&mycustomfield=text
And from bot api code, I can somehow read this querystring parameter...Ideally I know we don't have control over above webchat link, we are only giving access to bot api. But is this possible or any other way to pass data to bot which is not entered by user ?
We are planning to display web channel url to different sites in iframe and wanted to pass currently browsed url to identify from where user has started conversation.
Thanks
Siddharth
This is easily done using the BotFramework-WebChat library. There are just a few steps to perform to get yourself setup.
First, include a div with an id for the webchat instance of your bot to anchor to. In this example, the id is "webchat".
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Bot Chat</title>
<style>
#webchat,
#webchat>* {
border: 1px solid #333;
float: left;
min-height: 600px;
height: 600px;
position: relative;
width: 460px;
}
</style>
</head>
<body>
<div class="example">
<h2>Back Channel Bot</h2>
<div id="webchat"></div>
Next, you will want to include the following scripts in your html page. Please keep in mind that you should NOT store your secret in the browser or client app. It is included here for simplicity.
Here's what is happening. You use the Direct Line secret (from the channel settings in your Azure bot) to generate a token. The token is used to instantiate the bot webchat control. In this example, the user's location is saved in the store's payload as the activity object. This is sent to the bot on any POST_ACTIVITY event (i.e. the user interacts with the bot).
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://cdn.botframework.com/botframework-webchat/master/webchat.js'></script>
<script src='https://unpkg.com/simple-update-in/dist/simple-update-in.production.min.js'></script>
<script>
(async function () {
// 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.
const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + secret
},
json: true
});
const { token } = await res.json();
let location = window.location.href;
let store = window.WebChat.createStore(
{},
({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
// simple-update-in is used to update the "action"
action = window.simpleUpdateIn(action, ['payload', 'activity', 'channelData', 'location'], () => location);
}
return next(action);
}
);
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),
store,
styleOptions: {
botAvatarInitials: 'BF',
userAvatarInitials: 'WC'
}
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));;
</script>
</body>
</html>
On the bot side, the bot is listening for the incoming message. The activity object will contain the data you sent and will look something like this:
channelData: { clientActivityID: '15469824216440.emdrovn0f5h', location: 'http://localhost:3000/' }
Hope of help!
In our app, we have a simple Google-Sign-In flow where a popup opens, users log in and grant us offline permission for accessing Google Analytics.
We just got emailed that we're using a Google+ API (plus.people.getOpenIdConnect method) that is about to get deprecated, but we don't use it in our code.
I can't seem to figure out where we are using Google+ API so I could replace it.
Here is our simple code:
prepareGoogleClient() {
$.ajax({
url: "//apis.google.com/js/client:platform.js",
dataType: "script"
}).done(() => {
gapi.load("auth2", () => {
let auth = gapi.auth2.init({
client_id: ENV.googleClientId,
scope:
"https://www.googleapis.com/auth/analytics.readonly https://www.googleapis.com/auth/webmasters.readonly"
});
this.auth = auth;
});
if (gapi.auth2 && !this.auth) {
this.auth = gapi.auth2.getAuthInstance();
}
});
}
Later on we call this.auth.grantOfflineAccess(params), which returns the token that we save for later.
If I disable Google+ API in our Google Platform dashboard, the Sign-In stops working and the popup responds with a sign-in error. I was also able to confirm that Google+ API (from its metrics panel) is indeed used in the process of our users signing in the popup and granting scope permissions.
How do I need to rewrite this so it won't use the deprecated plus.people.getOpenIdConnect method?
The issue was in Rails back-end code which handles OAuth2. The outdated omniauth-google-oauth2 gem was using the deprecated Google+ endpoint.
I think everyone using Google+ API's in their app, have got that mail.
Don't know if this helps but got this is from google API's site.
The Google+ Sign-in feature has been fully depreciated and will also
be shut down on March 7, 2019. Developers should migrate to the more
comprehensive Google Sign-in authentication system.
https://developers.google.com/+/web/api/javascript
https://developers.google.com/+/integrations-shutdown
Other References:
List of API's to be removed https://developers.google.com/+/api-shutdown
New Sign(identity) https://developers.google.com/identity/
Identity for web app https://developers.google.com/identity/sign-in/web/
Add Google Sign-In to Your Web App
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile=googleUser.getBasicProfile();
console.log("ID: " + profile.getId()); // Don't send this directly to your server!
console.log('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
console.log("Image URL: " + profile.getImageUrl());
console.log("Email: "+profile.getEmail());
// The ID token you need to pass to your backend:
var id_token=googleUser.getAuthResponse().id_token;
console.log("ID Token: "+id_token);
}
<html lang="en">
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
</body>
</html>
I am using Bot Framework Web Chat and I correctly setup a front-end for the user to chat with my bot. I am trying to enable speech for it, I try following the tutorial here: https://learn.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-webchat-speech?view=azure-bot-service-3.0
The problem I have is I try to use Azure Speech Service, I setup my service correctly, and I set the key. But I am not sure where to get the CognitiveServices? The tutorial doesn't specify where to get it.
Here is my code:
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
const speechOptionsRemote = {
speechRecognizer: new CognitiveServices.SpeechRecognizer({ subscriptionKey: '...' }),
speechSynthesizer: new CognitiveServices.SpeechSynthesizer({
gender: CognitiveServices.SynthesisGender.Female,
subscriptionKey: '...',
voiceName: 'Microsoft Server Speech Text to Speech Voice (en-US, JessaRUS)'
})
};
BotChat.App({
directLine: { secret: '...' },
user: { id: 'WebChat' },
bot: { id: '...' },
resize: 'detect',
speechOptions: speechOptionsRemote,
showUploadButton: false
}, document.getElementById("bot"));
var header = document.getElementsByClassName("wc-header");
header[0].innerHTML = "<span ><p align='center' >My Bot</p></span>"
</script>
It complain that CogntiveService is not found when I navigate to the page. Where do I get it?
Your code sample is using v3 of Webchat, which is now deprecated, see here. There is a v4 of BotFramework-WebChat on the GitHub repository, the update has been a few days ago.
So when in your code your are downloading cdn.botframework.com/botframework-webchat/latest/botchat.js, it is the v4: that explains why it can't found CognitiveServices: it has been refactored.
For using Cognitive Services Speech in the v4, have a look to the dedicated sample: https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/speech-cognitive-services-bing-speech