Add sample for using Direct Line tokens

[navzam]

Fixes #2343

Changelog Entry

• Fixes #2343. Add sample for Direct Line tokens, by @navzam, in PR #3779

Description

(following up on the discussion with @corinagum in #2343)

Added a sample that shows how to integrate Web Chat using a token instead of a secret, which can help developers protect their secret and mitigate user impersonation.

I took my original direct-line-token-sample and tried to make it fit the format of other Web Chat samples, particularly the ones in 07.advanced-web-chat-apps.

Open Questions

Since I'm new to contributing to this repo, I have some open questions:

• Which samples folder does this best fit into? For now it's in 01.getting-started/k.direct-line-token.
• Is there a GitHub Action that needs to be created for this sample? Or should I remove the badge at the top?
  • Related to CI, which corinagum/compulim would handle
• What are the steps to get a hosted demo of this sample?
• Should I include the Docker-related files that other samples in 07.advanced-web-chat-apps have? If so, any guidance on how I can verify those files?
• I have a C# version of the API as well, but didn't include it here because I didn't see precedent for that. Would that be helpful for me to include?
  • C# version added
• Does the C# version need a proxy from the API to the bot localhost endpoint, similar to what other JS samples have? Or is that only needed for the hosted demo?

Specific Changes

• Added bot and API code in bot/ and web/ respectively (in both csharp and javascript), and a README.md. Currently lives in 01.getting-started/k.direct-line-token but can be moved easily.

• I have added tests and executed them locally
  • Not applicable to samples
• I have updated CHANGELOG.md
• I have updated documentation
  • README.md included

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[corinagum]

This is fantastic! Thanks for getting this up.

• Which samples folder does this best fit into? For now it's in 01.getting-started/k.direct-line-token.
• Is there a GitHub Action that needs to be created for this sample? Or should I remove the badge at the top?
• What are the steps to get a hosted demo of this sample?
• Should I include the Docker-related files that other samples in 07.advanced-web-chat-apps have? If so, any guidance on how I can verify those files?

• I feel like the getting started folder is most appropriate. Usually that's reserved for the quick deploy samples, but in this case it's something most developers will need to implement.
• Could you clarify what you mean by badge? Took a look at the README.md and didn't see what you meant.
• Getting this hosted: I'll have to defer to @compulim on this one. Although I see the benefit of hosting it, I think it is most beneficial that the code is available, and hosting would add complexity we don't have the manhours for right now. Let's see what compulim says.
• Looks like the Docker files on the 07. samples are related to CI, which I think we can ignore if we don't deploy. TBH, I'm not confident that all of those samples are even running publicly right now ^^;;

Correct :)

@compulim could you verify the above?
[Edit]
Early feedback is that we do want this hosted. Hopefully compulim will have logistics recommendations on that front as well.

[navzam]

Thanks! I snuck a 5th question into the PR description regarding a C# API - any thoughts on that?

Could you clarify what you mean by badge?

I'm referring to the build status badge that some of the samples show, I'm guessing related to the CI you mentioned. For example:

[corinagum]

For the badge - yeah, that's it, how did I miss it? It's for the CI - from what I know atm, compulim or I would do the CI so you don't have to worry about that for now :)

Since I know there are plenty of C# bot devs out there - for a C# section, is your /web/ directory similarly done with CHTML etc?
There isn't technically a precedence... but I know there are plenty of C# devs that would take advantage of this sample. I'm thinking doing something like the following:

samples/a.getting-started/k.direct-line-token/csharp
samples/a.getting-started/k.direct-line-token/javascript

Inspiration taken from https://github.com/microsoft/BotBuilder-Samples/tree/main/samples

Thoughts?

[navzam]

I had the API in both JS and C#, but both of them used a static index.html for the frontend. I only had the bot in JS since it's more of an accessory in the sample, but in hindsight, that's not ideal b/c a C# dev would want a C# bot to run the full sample.

So yeah, I think the structure you suggested makes sense, with the README (and maybe the static files in /web/public/) at the root since they're common to both.

[corinagum]

Quick update - I've put this PR on @compulim's radar, but he's shuffling a ton of work right now (aren't we all? :) ), so a review may be delayed. :( Thanks for your patience -- we're VERY excited for your contribution. Feel free to ping us here. I'm also adding it to our project board so 🤞 for sooner review rather than later.

[navzam]

Sounds good, thanks for the update. I'll try to get the C# version in here shortly

[navzam]

C# version is in there now. I added another open question around whether the C# version needs the API-to-bot proxy that other JS samples have.

[corinagum]

@navzam I updated your branch with master, just FYI :)

[corinagum]

LGTM! Due to time constraints, I'd be satisfied just having this merged in, and if @compulim gets time later on to do his review, we can always go back and make edits. At the very least this is a huge ask from customers and is a solid basis to get them started.

I also think that a hosted demo is a relatively low priority, considering there's not much interaction to test out. So I suggest we don't worry about that for now.

Many many thanks again @navzam for your hard work (and following the format of our samples too!), and my apologies for the long delay in getting this up and running.

[navzam]

Awesome, thanks @corinagum for helping review and merge this!