Botframework-webchat: WebChat Secret Management

[cleemullins]

Directly from (CSS) Jimmy Russ, as an ask.

Concrete instructions how to use a token for webchat (in C#). There is a "Hard to find" blog for node, but that's it.

We have guidance around "Don't expose your secret", but not guidance around how to actually achieve this.

CSS Ask: Full e2e app/sample working for how to do this.

@yochay has suggestions how to do this.

[cleemullins]

Note: There is significant frustration around this.

[cleemullins]

"Customers give up and just embed the secret in the web page".

[jwiley84]

FWIW: I have a C# bot that, once deployed with a directline channel implemented, takes the DL token and exchanges it for a secret.

https://github.com/jwiley84/SimplifiedDLConnector/tree/master/JJDirectLineBot

[tdurnford]

I have a simple version for node https://github.com/tdurnford/BotBuilder-Samples/blob/2a700aa5b66fd858df35d5279ef847a140121382/samples/javascript_nodejs/48.directline-token/index.js#L55

[jiruss]

I have a simple version for node https://github.com/tdurnford/BotBuilder-Samples/blob/2a700aa5b66fd858df35d5279ef847a140121382/samples/javascript_nodejs/48.directline-token/index.js#L55

@tdurnford I have a little node sample that I have sent customers as well but it lacks documentation. https://github.com/jiruss/WebchatApp/edit/master/app.js

@jwiley84 we run a bot internally that I have similar C# code for that we have shared on occasion.

I want to clarify that the issue is not that we don't have source for the token swap but we lack a clear and concise working sample that isolates just this functionality that can easily be sent to customers. Your code is fine but some customers are not sure how to get this from your code sample into their own environment. Ideally a well documented sample from one of the official repos or in Docs would be best and instill the most confidence. Thanks!

[jwiley84]

@jiruss : Oh, I know. I made that example BECAUSE a customer needed one and couldn't find one.

[corinagum]

Related to this sample request: https://github.com/microsoft/BotFramework-WebChat/issues/1412.

[tdurnford]

@WashingtonKayaker opened a PR in the samples repo demonstrating how to manage Direct Line tokens

https://github.com/microsoft/BotBuilder-Samples/pull/1733

[tdurnford]

The token server sample should include adding a user id to the Direct Line token request to support enhanced authentication and traditional welcome messages in Web Chat.

server.post('/directline/token', async (req, res) => {
  try {
    const id = Date.now() + '-' + Math.random().toString(36).substr(2);

    const response = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', {
      body: JSON.stringify({ user: { id }}),
      headers: {
        'authorization': `Bearer ${process.env.DIRECT_LINE_SECRET}`,
        'Content-Type': 'application/json'
      },
      method: 'POST',
    });
    const token = await response.json();

    res.send(token);
  } catch (error) {
    console.log(error);
    res.status(500);
  }
});

References

• Direct Line Authentication
• Enhanced Authentication
• Web Chat Welcome Messages

[mmiele]

Hello everyone. I work in the Bot Framework SDK doc team. My good friend in the support team made me aware of this issue while I was trying to streamline our current documentation on Web Chat channel/control. This is the article: Connect a bot to Web Chat. As this issue highlights, even if we discuss secret, token and so forth, we do not provide an example of a web page where we can show the use of the token without embedding the secret in the web page itself, which will defeat the purpose, obviously.
An article that comes closer to the answer is this: Authentication. If you scroll to the end of the page, you see 2 examples (C# and JS) of controllers that will get the secret and return the token.
But we do not show a web page that uses them. Can somebody help to create a simple example that does just that?
Any help is appreciated.

PS
This post I wrote does not address the secret/token issue but highlights the difference between Web Chat channel and Web Chat control that is a little blurry currently.

[navzam]

Are you open to a PR that adds a sample for this? For the same reasons above (repeated requests for guidance, falling back to secret, etc.), I'm creating a sample that demonstrates retrieving a user-specific Direct Line token. It doesn't exactly meet the requirements here, but I think I can address the gaps pretty easily:

• It goes one step further since it is using an ID token from AAD (or other identity provider) to validate a user and get their ID, which I think is useful, but I could isolate that piece to avoid confounding too many concepts.
• Currently it only contains the backend API. I could make it end-to-end by including a simple bot and a simple page that embeds WebChat.
• Currently it only exists in TypeScript. I could add JS and C#.

[corinagum]

@navzam your contributions are MORE THAN welcome! Please let us know if you have questions. I suggest creating it as your own project first, and later on we can discuss possibly moving it into our samples section.

In reply to your bullets:

• This sounds great. One thing we struggle with is introducing too many concepts in a single sample. Any way you can split concepts up is appreciated. If it's a large enough section, should we consider having it as it's own sample?
• Having a simple bot / basic Web Chat would help match our samples section format, so this sounds good to me
• Having all three languages would be wonderful. Based on our samples history, JS would be highest priority in terms of sharing on Web Chat.

[mmiele]

@navzam and @corinagum I wholly heartedly support the effort. A simple example in JS (a small web app?) that shows how to generate a token from the Web Chat channel secret will go a long way. It would help to have one in C#, too. I could incorporate the sample into the Bot Frameworks SDK documentation where we talk about the Web Chat channel and Web Chat control.

[mmiele]

@navzam Did you ever work on SSO with Web Chat?

[navzam]

@corinagum I've simplified the sample (took out the AAD part), added a C# API in addition to the JS API, and added a very simple bot and HTML page that embeds WebChat. I pushed it to my own repo here: navzam/direct-line-token-sample.

What's the next best step? I'd love to get a review from someone, including for the README since I think the documentation will be key.

I'm creating a separate sample at navzam/user-direct-line-token-sample that shows the bit with AAD that I mentioned before. It isn't ready yet, but I was hoping to get the process started with the first sample since a lot of the code is shared anyway.

[navzam]

@mmiele I've done some digging into SSO with WebChat, specifically how to reuse a user's identity on an already-authenticated site (see navzam/webchat-authed-site-sample) and how to silently acquire an AAD token that your bot can use (see navzam/webchat-silent-sso-sample). I think these are separate from the secret management issue, but I'm happy to discuss on a separate issue if useful.

[mmiele]

@navzam Thank you for your feedback. Let's keep the SSO separated from the main discussion on this thread. I just started looking more closely into the SSO/Web Chat area. I'll get in touch with you on Teams.

[corinagum]

@navzam Thank you so much! Due to time constraints I won't be able to get to a code/tutorial review right away, but this is absolutely on my radar and I'll get back to you!

[navzam]

An update: I finished up the user-specific Direct Line token sample. It's essentially an extension of the more basic sample above, incorporating AAD tokens to ensure consistent and verifiable user IDs.

[corinagum]

@navzam I'm sorry that this slipped through the cracks and I never got back to you. Are you still available to review these samples? If so it'd be great if we could discuss how best to add your examples to Web Chat's repo and get signoff from our other developers. Please let me know if you're still interested in this. Our preference would be that you submit a pull request and continue discussion from there.

[navzam]

@corinagum Yeah let me take a look at the existing Web Chat samples and see if I can match the format. Then I can submit a pull request.