I have developed a chat bot using Microsoft Bot Framework V4, and have used BotFramework-WebChat for providing the user to chat from website using DirectLine Token,
I am able to set the bot avatar and the user avatar by assigning the static public image URL. The problem is that I want to set the user avatar dynamically in the WebChat using below steps
- Fetch the user icon using the Microsoft graph API after OAuthCard login
- Set the signed in user image in the Webchat styleSetOptions dynamically.
I have gone through the Demo for setting the bot framework server and the webchat for the bot by following the samples provided
bot server == https://github.com/Microsoft/BotBuilder-Samples
webchat == https://github.com/Microsoft/BotFramework-WebChat
but there is no proper example or documentation on how to set the user image after the user has signed in. using the signed user object.
can any one point on the right direction on how can it be achieved.
Thanks in advance
You can achieve this by wrapping the Graph API call and result into the result of the AAD login process. The following code is based off of the BotBuilder-Samples
24.bot-authentication-msgraph
sample and BotFramework-WebChat17.chat-send-history
sample using React.Component.(Please be aware that the Graph sample currently located in the master branch does not include obtaining the AAD login user's photo. I have a PR which adds this feature into the sample, however I have included it here, as well. I used the WebChat sample as a reference for building the below.)
WebChat
You will need these files from sample #17, followed by the App.js file that needs altering:
App.js:
Note: I generate the direct line token locally in a separate project. This assumes an AAD profile has a photo.
package.json
MS Graph Bot
Update the following files in sample #24:
bot.js:
Replace
async processStep
with:oauth-helpers.js:
Add
static async loginData
:simple-graph-client.js:
Add
async getPhoto
:package.json:
Be sure the
@microsoft/microsoft-graph-client
installs version 1.0.0 due to breaking changes around AAD 'displayName' acquisition in subsequent versions.Once the above code was implemented, I was able to login which, upon success, immediately updated the user avatar.
Hope of help!