Site icon TheWindowsUpdate.com

Private Endpoint & Direct Line App Service Extension Configuration with Bot Services and App Service

This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Community Hub.

Private Endpoint and Direct Line App Service Extension Configuration with Azure Bot Service and Azure App Service.

We must place all the resources in the same region and under the same resource group.

Let's first create a simple Azure Bot and App Service and get the Bot working.

Please follow the steps below to create and configure Bot Service and App Service.

 

Create an App Service:

 

Create a Bot Service:

Update the Messaging Endpoint of Bot:

Download the sample Bot code from below GitHub repository:

GitHub - microsoft/BotBuilder-Samples: Welcome to the Bot Framework samples repository. Here you will find task-focused samples in C#, JavaScript and TypeScript to help you get started with the Bot Framework SDK!

 

I am going to use Echo-Bot sample for .NET Core.

Open the code in your editor (I am using VS code) and update below 4 property values available at appsettings.json file:

 

 

 

 

 

 

 

 

 

 

 

 

{ "MicrosoftAppType": "", "MicrosoftAppId": "", "MicrosoftAppPassword": "", "MicrosoftAppTenantId": "" }

 

 

 

 

 

 

 

 

 

 

 

 

Please follow below steps to get the values for above properties:

Once code is deployed successfully to App Service, test the Bot using "Test in Web Chat".

 

If everything is working as expected then we are good to go to next step.

 

Configure .NET bot for extension:

We will follow below article to configure .NET bot for extension:

Configure .NET bots for the Direct Line App Service extension in the Bot Framework SDK - Bot Service | Microsoft Learn

 

If your requirement is to use Nodejs bot then you must follow below document to configure Nodejs bot for extension:

Configure Node.js bots for Direct Line App Service extension in the Bot Framework SDK - Bot Service | Microsoft Learn

Prerequisites

 

We have fullfilled the prerequirsites.

 

Enable Direct Line App Service extension:

This section describes how to enable the Direct Line App Service extension using the App Service extension key from your bot's Direct Line channel configuration.

Update bot code

 

 Note

The Microsoft.Bot.Builder.StreamingExtensions NuGet preview packages have been deprecated. Starting with v4.8, the SDK contains a Microsoft.Bot.Builder.Streaming namespace. If a bot previously made use of the preview packages, they must be removed before following the steps below.

Enable bot Direct Line App Service extension

Confirm the Direct Line extension and the bot are configured

In your browser, go to https://<your_app_service>.azurewebsites.net/.bot. If everything is correct, the page will return the following JSON content:

 

 

 

 

 

 

 

 

 

 

{"v":"123","k":true,"ib":true,"ob":true,"initialized":true}

 

 

 

 

 

 

 

 

 

 

Troubleshooting

 

 

 

 

 

 

 

 

 

public class AdapterWithStaticClaimsIdentity : BotFrameworkHttpAdapter { public AdapterWithStaticClaimsIdentity(IConfiguration configuration, ILogger<BotFrameworkHttpAdapter> logger, ConversationState conversationState = null) : base(configuration, logger) { // Manually create the ClaimsIdentity and create a Claim with a valid AudienceClaim and the AppID for a bot using the Direct Line App Service extension. var appId = configuration.GetSection(MicrosoftAppCredentials.MicrosoftAppIdKey)?.Value; ClaimsIdentity = new ClaimsIdentity(new List<Claim>{ new Claim(AuthenticationConstants.AudienceClaim, appId) }); } }

 

 

 

 

 

 

 

 

If everything works as expected till this point then we are good to proceed to next step.

Configure network isolation:

You can add network isolation to an existing Direct Line App Service extension bot. A private endpoint lets your network isolated bot communicate with required Bot Framework services so that the bot can run correctly while being limited to the virtual network.

 

To add network isolation to your bot:

Prerequisites

To confirm that your existing bot is configured correctly:

Create a virtual network

 

 

 

Deny outbound traffic from your network

Verify that connectivity is broken

The value of initialized should be false, because your app service and app service extension are unable to connect to other Bot Framework services to initialize itself. Your bot is now isolated in a virtual network for outbound connections.

 

Create your private endpoint

Add your private endpoint to your bot's app service

Restart your app service and verify that connectivity is restored

The value of initialized should be true.

If your private endpoint doesn't work correctly, you can add a rule to allow outbound traffic to NSG configured with the App Service subnet (subnet-appservice) specifically to Azure Bot Service.

 

 

 

 

This will make you virtual network a little less isolated.

 

 

 

 

 

 

Disable public network access to your bot

If you try to browse the App Service URL and the Pipe URL, you would not get any response. 

 

Now, lets create a client to test the Bot. We will use below article to get the required HTML and replace the required values:

Use Web Chat with the Direct Line App Service extension in Bot Framework SDK - Bot Service | Microsoft Learn

 

Copy the provided HTML:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
crossorigin="anonymous"
src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"
></script>
<style>
html,
body {
background-color: #f7f7f7;
height: 100%;
}

body {
margin: 0;
}

#webchat {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
height: 100%;
margin: auto;
max-width: 480px;
min-width: 360px;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
(async function() {
<!-- NOTE: You should replace the below fetch with a call to your own token service as described in step 2 above, to avoid exposing your channel secret in client side code. -->
const res = await fetch('https://<your_app_service>.azurewebsites.net/.bot/v3/directline/tokens/generate',
{
"method": "POST",
"headers": {
"Authorization": "Bearer " + "<Your Bot's Direct Line channel secret>"
},
"body": "{'user': {'id': 'my_test_id', 'name': 'my_test_name'}}"
}
);
const { token } = await res.json();

window.WebChat.renderWebChat(
{
directLine: await window.WebChat.createDirectLineAppServiceExtension({
domain: 'https://<your_app_service>.azurewebsites.net/.bot/v3/directline',
token
})
},
document.getElementById('webchat')
);

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

 

Replace <your_app_service> with your App Service name in 2 places hightlighed in the HTML above.

Replace <Your Bot's Direct Line channel secret> with the Direct line channel secret:

 

Now run the client in the machine, which is part of the same vnet, configured here as part of the private endpoint. 

 

For testing purpose, we will create a Virtual Machine and configure this VM to be part of same vnet which is configured with App Service and Bot Service.

 

Create a VM:

Once VM is created successfully, login to VM and take the client HTML created earlier and run inside the VM.

It must work without any issue and you must see the expected response from the Bot.

 

You must be albe to use pipe URL too, inside the VM:

 

 

 

Exit mobile version