|
| 1 | +# Description |
| 2 | + |
| 3 | +In this demo, we will show how to connect a custom canvas to directly send messages and recieve dynamic responses like Adaptive Cards, Carousels, etc. and custom rendor them from the Power Virtual Agents. |
| 4 | + |
| 5 | +> IMPORTANT: When dealing with personal data, please respect user privacy. Follow platform guidelines and post your privacy statement online. |
| 6 | +
|
| 7 | +# How to run locally |
| 8 | + |
| 9 | +This demo integrates with multiple services. There are multiple services you need to setup in order to host the demo. |
| 10 | + |
| 11 | +1. [Clone the code](#clone-the-code) |
| 12 | +1. [Setup Azure Bot Services](#setup-azure-bot-services) |
| 13 | +1. [Setup Power Virtual Agent And Direct Line](#setup-power-virtual-agent-and-direct-line) |
| 14 | +1. [Prepare and run the code](#prepare-and-run-the-code) |
| 15 | + |
| 16 | +## Clone the code |
| 17 | + |
| 18 | +To host this demo, you will need to clone the code and run locally. |
| 19 | + |
| 20 | +1. Clone this repository |
| 21 | +1. Create two empty files for environment variables, `/bot/.env` and `/web/.env` |
| 22 | + |
| 23 | +## Setup Azure Bot Services |
| 24 | + |
| 25 | +> We prefer to use [Bot Channel Registration](https://ms.portal.azure.com/#create/Microsoft.BotServiceConnectivityGalleryPackage) during development. This will help you diagnose problems locally without deploying to the server and speed up development. |
| 26 | +
|
| 27 | +You can follow our instructions on how to [setup a new Bot Channel Registration](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration?view=azure-bot-service-3.0). |
| 28 | + |
| 29 | +1. Save the Microsoft App ID and password to `/bot/.env` |
| 30 | + - `MICROSOFT_APP_ID=12345678-1234-5678-abcd-12345678abcd` |
| 31 | + - `MICROSOFT_APP_PASSWORD=a1b2c3d4e5f6` |
| 32 | + |
| 33 | +> When you are building your production bot, never expose your Web Chat or Direct Line secret to the client. Instead, you should use the secret to generate a limited token and send it to the client. For information, please refer the documentation on [Direct Line token generation](https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0#generate-token) and the [Enhanced Direct Line Authentication feature](https://blog.botframework.com/2018/09/25/enhanced-direct-line-authentication-features/). |
| 34 | +
|
| 35 | +During development, you will run your bot locally. Azure Bot Services will send activities to your bot thru a public URL. You can use [ngrok](https://ngrok.com/) to expose your bot server on a public URL. |
| 36 | + |
| 37 | +1. Run `ngrok http -host-header=localhost:3978 3978` |
| 38 | +1. Update your Bot Channel Registration. You can use [Azure CLI](https://aka.ms/az-cli) or [Azure Portal](https://portal.azure.com) |
| 39 | + - Via Azure CLI |
| 40 | + - Run `az bot update --resource-group <your-bot-rg> --name <your-bot-name> --subscription <your-subscription-id> --endpoint "https://a1b2c3d4.ngrok.io/api/messages"` |
| 41 | + - Via Azure Portal |
| 42 | + - Browse to your Bot Channel Registration |
| 43 | + - Select "Settings" |
| 44 | + - In "Configuration" section, set "Messaging Endpoint" to `https://a1b2c3d4.ngrok.io/api/messages` |
| 45 | + |
| 46 | +## Setup Power Virtual Agent And Direct Line |
| 47 | +1. Create your Power VA bot through the Dynamics Bot Designer portal: `https://va.ai.dynamics.com/#/` |
| 48 | +1. Click on Manage > Channels within the Sidebar |
| 49 | +1. Click on Demo Website and Copy the bot Url to your clipboard. |
| 50 | + |
| 51 | +1. Retreive the botid and bottenentid from the url, you will need to place these within `/bot/.env` |
| 52 | + - `BOT_ID=<your_bot_id>` |
| 53 | + - `BOT_TENANT_ID=<your_bot_tenant_id>` |
| 54 | + |
| 55 | + |
| 56 | +## Prepare and run the code |
| 57 | + |
| 58 | +1. Under each of `bot`, and `web` folder, run the following |
| 59 | + 1. `npm install` |
| 60 | + 1. `npm start` |
| 61 | +1. Browse to http://localhost:5000/ to start the demo |
| 62 | + |
| 63 | + |
| 64 | +# Code |
| 65 | + |
| 66 | +- `/bot/` is the bot server |
| 67 | +- `/web/` is the REST API for distributing Direct Line tokens |
| 68 | + - `GET /api/directline/token` will generate a new Direct Line token for the React app |
| 69 | + - During development-time, it will also serve the bot server via `/api/messages/` |
| 70 | + - To enable this feature, add `PROXY_BOT_URL=http://localhost:3978` to `/web/.env` |
| 71 | + |
| 72 | +# Overview |
| 73 | + |
| 74 | +This sample includes multiple parts: |
| 75 | + |
| 76 | +- A basic web page with Web Chat integrated via JavaScript bundle |
| 77 | +- A Restify web server for distributing tokens |
| 78 | + - A REST API that generate Direct Line token for new conversations |
| 79 | +- Connection to the Power Virtual Agents allowing for dynamic responses based off of configuration. |
| 80 | + |
| 81 | + |
| 82 | +## Content of the `.env` files |
| 83 | + |
| 84 | +The `.env` file hold the environment variable critical to run the service. These are usually security-sensitive information and must not be committed to version control. Although we recommend to keep them in [Azure Key Vault](https://azure.microsoft.com/en-us/services/key-vault/), for simplicity of this sample, we would keep them in `.env` files. |
| 85 | + |
| 86 | +To ease the setup of this sample, here is the template of `.env` files. |
| 87 | + |
| 88 | +### `/bot/.env` |
| 89 | + |
| 90 | +``` |
| 91 | +MICROSOFT_APP_ID=12345678-1234-5678-abcd-12345678abcd |
| 92 | +MICROSOFT_APP_PASSWORD=a1b2c3d4e5f6 |
| 93 | +``` |
| 94 | + |
| 95 | +### `/web/.env` |
| 96 | + |
| 97 | +``` |
| 98 | +BOT_ID=21wejwl2-2j34-dse3-12df-1123rgted34 |
| 99 | +BOT_TENANT_ID=3fde45d-32we-3342-ewer-err3fr32564 |
| 100 | +``` |
| 101 | + |
| 102 | + |
| 103 | +# Further reading |
| 104 | + |
| 105 | +- [Power Virtual Agents Documentation and Resources](https://docs.microsoft.com/en-us/power-virtual-agents/overview) |
| 106 | +- [Setting up a new Bot Channel Registration](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-quickstart-registration?view=azure-bot-service-3.0) |
| 107 | +- [Generating a Direct Line token](https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0#generate-token) |
| 108 | +- [Enhanced Direct Line Authentication feature](https://blog.botframework.com/2018/09/25/enhanced-direct-line-authentication-features/) |
| 109 | +- [Microsoft Flow Documentation and Resources](https://docs.microsoft.com/en-us/flow/) |
0 commit comments