Sign In Card Does Not Render in Web Chat

[kashifkhan]

Bot Info

• SDK Platform: .NET
• SDK Version: 3.15.2.2
• Active Channels: Web Chat
• Deployment Environment: Azure Bot Service, Azure App Service, local development with Emulator

Issue Description

When running the sample code for Oath login https://github.com/Microsoft/BotBuilder/tree/master/CSharp/Samples/AadV2Bot the bot is able to render a sign card in the emulator but not in web chat. Running the web chat in Edge or Chrome renders the following when sign in is requested "[File of type 'application/vnd.microsoft.card.oauth']"

Code Example

https://github.com/Microsoft/BotBuilder/tree/master/CSharp/Samples/AadV2Bot

Reproduction Steps

1. Deploy https://github.com/Microsoft/BotBuilder/tree/master/CSharp/Samples/AadV2Bot on Azure
2. Enable Web Chat Channel
3. Enter in "me" command

Expected Behavior

Expect to see the Sign in card which allows a user to authenticate against the graph API

Actual Results

Since the card is rendered an attachment the browser (Edge, Chrome) display "[File of type 'application/vnd.microsoft.card.oauth']" . In the emulator it works as intended.

[JasonSowers]

Thanks for reporting this, we will look into it.

[abhatt29]

Reproducible for AADv1 authentication sample code also.

Any update?

[JasonSowers]

I have let our WebChat team know about this issue, but no update at this time.

[ukphillips]

This seemed to work with the emulator still so I would think this is purely an issue with the webchat rendering. I created an issue in that repo because this is a major blocker for testing any other bot functionality if you can't authenticate a user.

[JasonSowers]

I will touch base with the WebChat team today to check on progress

[compulim]

@abhatt29 @kashifkhan I am investigating this on Web Chat side, with this issue.

@JasonSowers and @ukphillips thanks for alerting me on this one.

[JasonSowers]

We will be monitoring this on the issue that @compulim linked, please post in there if you have any questions or comments.

[souuuf]

Hi All,
Is there any update on this issue please ?

[manoj1201]

Hi All,
Any update, I am also facing same issue. I tried with both AADv1 & AADv12 . Sign in Card is not coming up but its working in emulator. Please update. it seems like blocker.

[compulim]

@souuuf and @manoj1201 I guess the problem you are hitting might be different than the top one.

The top one is because OAuth is a new feature, it was recently added to microsoft/BotFramework-WebChat#954. For some reasons, the new card is not on <iframe href="https://webchat.botframework.com/"> yet.

If you are using Web Chat via CDN or NPM, you should see the OAuth sign in button.

Can you give more information about your scenarios?

• Are you using Web Chat in <iframe>, CDN, or NPM?
  • <iframe href="https://webchat.botframework.com/embed/...?s=...">
  • CDN means <script src="https://cdn.botframework.com/botframework-webchat/.../botchat.js">
  • NPM means npm install botframework-webchat
• For CDN and NPM, which version of Web Chat are you using?
  • CDN
    • <script src="https://cdn.botframework.com/botframework-webchat/0.12.4/botchat.js"> means 0.12.4
    • <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"> means 0.14.2 (as of today)
    • <script src="https://cdn.botframework.com/botframework-webchat/master/botchat.js"> means latest development build
  • NPM
    • npm install botframework-webchat means latest, which means 0.14.2 (as of today)
    • npm install botframework-webchat@master means latest development build
• For not working, do you mean?
  • The activity did not render because Web Chat say it does not understand application/vnd.microsoft.card.oauth
  • The activity did not render because Web Chat show nothing
  • When click on "Sign in" button, it did not work as my expectation
    • Does it pop up a new window?
    • Does it goes to OAuth provider page?
    • Does it show up magic code but you are not expecting it?
    • Does it fail in mysterious way?

[jonathanhotono]

I'm getting this straight on azure portal

[sourav-prescriber-360]

I'm getting this straight on azure portal

@jonathanhotono did u find any fix ?

[babaibhat]

One alternative way is to use ordinary cards with link action to login URL. This will open in new window

[compulim]

OAuth card does not work in Azure yet, Web Chat on Azure is ~6 months lagging behind the CDN/NPM release. We have a plan to bump it to latest.

Please use OAuth card via CDN or NPM. And as a side note, please make sure you don't leak Direct Line secret in the browser, always use a token server.

[compulim]

OAuth card is not just a link. Direct Line service will help the bot to negotiate for a token and send it to the bot directly, without passing it thru the browser.

When the user click on the link, it will send to the OAuth provider, with a redirect URL set to token.botframework.com, which we receive the token, and send to the bot behind the curtain.

[sourav-prescriber-360]

@compulim If I use DirectLine , then its generating magic numbers that needs to be verified against my code and I don't to know how to handle the verification on the code side. But the previous one for webchat secrets is working on the emulator. It seems under the curtain everything is done by GetTokenDialog.

Do we have any samples to the solution you are suggesting. Any link. ? highly appreciate

[naguluvemula]

i am also facing the same issue in azure web chat but it is working fine in emulator please let me know the solution

[msekkappan]

Same issue

[angeloferrante]

This bug stops my whole project. Need at least working work around to use Web Chat and to authenticate, at least how can I handle verification code?

[jonathanhotono]

2 options to work around this:
BOT DIRECTLINE CHANNEL:

1. Create a bot channel (enable directline channel )
2. use ngrok and set the configuration endpoint to ngrok endpoint
   
3. Create a simple directlinejs application (instruction on their github) https://github.com/Microsoft/BotFramework-DirectLineJS and connect your bot into your bot channel id
4. Run your bot on vscode/your favourite IDE, you should then be able to communicate with your bot (make sure to update env variable)

MS TEAMS

1. Enable teams channel
2. Change the configuration endpoint to ngrok endpoint as above
3. import the bot config (sample here: https://gist.github.com/jonathanhotono/790db0a67730b6728b8438eb81fbe215)
4. you can test it straight on your teams and oAuth card should work, you must run the bot locally first.

I would recommend to spin up a new Bot Channels Registration instead of using your existing bot service.

[compulim]

@naguluvemula @msekkappan @David201406

I am the owner of Web Chat. OAuth sign-in is a platform feature that is supported by multiple channels, Web Chat is one of them. I know how to set it up and would ❤ to help.

I do have a sample setup to make it work. I agree it requires deeper understanding of OAuth. I read IETF RFC to fully understand how it works and why we need those extra security measures.

Since I am currently tightened up for something more urgent, I can only help by writing steps (out of my memory). Let's work from here to diagnose the issue. I can point you to correct person once we identify the problematic area.

Prerequisites

• Bot running Bot Builder SDK v4
• Web Chat v3 (>= 0.13.0) or v4 (>= 4.0.0)
  • Prefer v4, we are deprecating v3
  • Must be either from CDN or NPM due to restriction on Direct Line access token (see steps below)
  • OAuth flow never work on <IFRAME>, thus, it will never work on Azure Portal
• A token REST server
  • Never hand out Direct Line secret to the browser, your secret is the key to everything, including past conversations
  • Use a server-side token server to do token exchange (i.e. secret -> limited access token)
  • Access token contain conversation ID and user ID, it will be protected against forgery using signature (we adopt JSON Web Token standard)
  • If you have limited budget, you can use your static web server for token exchange purpose
    • restify + serve-handler is a good choice on Node.js

Steps

Please start using a new bot first. It will work with your existing bot (if it fulfill prerequisites). But a new bot will make debugging easier.

1. Setup a new bot on Azure
   • I use Bot Channel Registration and BotBuilder SDK v4 on Node.js
   • I copy bot code from this sample
   • For dev and debugging, I recommend hosting your bot locally and expose it via ngrok
   • Set up messaging endpoint to something like, https://1a2b3c4.ngrok.io/api/messages/
     • Important: make sure you have the trailing slash
   • Add a new OAuth Connection Strings
     • I tried GitHub OAuth and it works
2. Test your bot on Azure Portal, if it doesn't work, make sure
   • ngrok is running
   • MS App ID and password is correct (it's a silent error)
   • Messaging endpoint is correct
3. On Azure Portal, go to Direct Line channel settings (important: not Web Chat channel settings)
   • Write down the secret
   • Add your domain to "trusted origin", must be https or http://localhost:*/
     • This is the domain you will host Web Chat on
4. You will need a token server to exchange Direct Line secret to Direct Line access token
   • REST API reference at 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
   • Like other services, secret is your key to everything, never hand it to the browser
   • You can steal my simple Node.js token server from here, this Git branch will go into Web Chat samples once we clean it up
     • Its README.md looks very complicated because the sample was designed to host on Azure Container Services (AKS) with Docker, you can just host it locally, as long as it is reachable by the browser
   • Important: during server-side token exchange, you will need to specify a user ID like dl_xxx (code here), it must start with dl_, details here
5. Verify your token server can give out access token
6. Create a HTML page with Web Chat
   • You can steal our sample here
     • This sample will talk to a token server to retrieve a Direct Line access token, you should modify this line and point to your own token server
   • Don't use <IFRAME> code to embed Web Chat, it don't work with OAuth flow
7. Verify Web Chat works, if it doesn't, make sure
   • Verify your token server is returning an access token
   • Verify your bot is running (best way: test it on Azure Portal)
   • Verify Web Chat UI is loaded
   • See if there are any errors logged in F12 dev tools
8. Modify your bot to include OAuth flow
   • Copy the official sample here
     • Make sure to modify OAUTH_CONNECTION_NAME or use it from environment variable, it need to match the one you set in Azure
   • My working bot (a.k.a. MockBot) can be found here
     • This line handle the OAuth response sent from Direct Line service
     • This file send the OAuth response and talk to GitHub
9. Open Web Chat again and start your OAuth flow

Up to this point, your bot should works with OAuth. It should authenticate the user via GitHub, without the need to type in "magic code". If it doesn't,

• Verify your browser does not block third-party cookies
• On IE11, make sure both your site and https://token.botframework.com/ are on the same security zone
  • Some companies may set their intranet website as "Trusted zone" while leaving https://token.botframework.com/ as Internet zone
• Try my MockBot, it's live at https://webchat-playground.azurewebsites.net/
  • Source code is at https://github.com/compulim/BotFramework-MockBot/
  • Click on "Start conversation with official MockBot"
  • Type "oauth"
  • Click to sign into GitHub
  • Authorize our GitHub app
  • You should not see magic code flow here, if you do, verify your browser does not block third-party cookies

Please let me know how it works. I am happy to help.

(Reopening the issue so we can track the response.)

(Updated to add IE11 troubleshooting guide.)

[jonathanhotono]

@compulim thanks for the thorough explanation 👍

For this bit here:

• A token REST server

  • Never hand out Direct Line secret to the browser, your secret is the key to everything, including past conversations

  • Use a server-side token server to do token exchange (i.e. secret -> limited access token)

  • Access token contain conversation ID and user ID, it will be protected against forgery using signature (we adopt JSON Web Token standard)

  • If you have limited budget, you can use your static web server for token exchange purpose

    • restify + serve-handler is a good choice on Node.js

Is there any good sample of a token REST server to perform token exchange ?

[compulim]

@jonathanhotono steal my Node.js token server here.

This is a pull request in-the-work. It got a very comprehensive README.md, which primarily talks about two things:

• How to automatically build/deploy to Azure Container Services (AKS)
  • The project is not bound to GitHub + Travis CI + Docker + Kubernetes, but it has all the setup files you need if you prefer this modern deployment stack
• How to make this token server production ready
  • We can't build that for you because it would largely depends on your current infrastructure, especially around your user database and auditing facility

I am not Kubernetes expert, if you found any mistakes in the branch, please point them out. I will fix it. 💪

[huajunzhao]

@compulim I tried your MockBot, it works. Our scenario is more on .NET, is there an .NET example for gracefully handling the magic code? Thanks.

[PrasenjitSaha]

Hi,
Same Experience with me I have followed https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-authentication?view=azure-bot-service-4.0&tabs=csharp link and used Azure AD v1 application but OAuth Card not redering. It is showing [File of type 'application/vnd.microsoft.card.oauth'].

In MS Team OAuth Card is coming but not action is happening after clicking Sign In button.

[bhushang19]

Hi,
Faced same issue of non-functional OAuth card in teams and came across this post microsoft/botframework-sdk#4768 where mark-szabo has suggested to use TeamsAuthWorkaroundMiddleware and seems logical.
However even after using it, the card which gets rendered in the teams does not work and I think it is because of the missing 'Value' property of the OAuthCard when you explicitly make it's Type as ActionTypes.OpenUrl.

Anyone else have found any workaround for this issue?

[AngryVirginian]

@bhushang19 Did you enable the Teams channel in bot channel registration? My bot is working fine in Teams (still need the magic code though). It seems like SigninCard card button is now OpenUrl type when the channelId is msteams.

[josch83]

I also encountered the original problem "Sign In Card Does Not Render in Web Chat" - no problems with Direct Line integrations and also not when using the Web Chat integrated in the Azure Portal.
After bringing together some hints from other Github and Stack Overflow discussions I was able to figure out a workaround which I'd like to share: append the version specification "0.15.0" as query parameter.

Example: https://webchat.botframework.com/embed/bot-name?s=SECRET&v=0.15.0

[michaelmaston]

This problem has been going on for something like a year or more from what I can see from the numerous threads about it. Is there really no better answer than:

Step 1: Reinvent the Universe in 5000 complex steps.
Step 2: Fight with Step 1 until you give up and go do something else.

I just tried my bot on the Azure portal Web Chat and this problem still exists. Works fine in the emulator.

I see so many references to "we're putting out a fix on this day or that" and yet a year later it is still broken. Is there a credible plan to fix this or should I just jump to Step 2 above?

[infact]

This problem has been going on for something like a year or more from what I can see from the numerous threads about it. Is there really no better answer than:

Step 1: Reinvent the Universe in 5000 complex steps.
Step 2: Fight with Step 1 until you give up and go do something else.

I just tried my bot on the Azure portal Web Chat and this problem still exists. Works fine in the emulator.

I see so many references to "we're putting out a fix on this day or that" and yet a year later it is still broken. Is there a credible plan to fix this or should I just jump to Step 2 above?

Any update on this? I am having same issue

[babaibhat]

I believe the feature we are using are not popular or MS does not think it to be relevant.
Maybe our use case only covers 0.5% of all usage of the SDK, hence low on priority.

There are alternative Chat SDK available from competing vendors, that might be worth a look.

[michaelmaston]

My heartburn is the repeated promises throughout this thread and elsewhere of fixes being planned to be rolled out over a year ago. Don't promise things you don't plan to do. Or offer overly complicated solutions to something that you can and should easily fix. If it isn't an important feature, take it down entirely. Apparently it *is* important enough to make work in their emulator and in other versions of the Web Chat. Why not fix it on their main Azure Portal? I'm not interested in excuses, just resolution of the issue as repeatedly promised.

…

On Thu, Jun 20, 2019 at 12:04 AM babaibhat ***@***.***> wrote: I believe the feature we are using are not popular or MS does not think it to be relevant. Maybe our use case only covers 0.5% of all usage of the SDK, hence low on priority. There are alternative Chat SDK available from competing vendors, that might be worth a look. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://github.com/microsoft/botframework-sdk/issues/4632?email_source=notifications&email_token=AIZRMQP4BDCEKTBQT64RE6DP3MTV7A5CNFSM4FATZX52YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYEPNRA#issuecomment-503903940>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIZRMQKIBJVTK3TXHHKOT7TP3MTV7ANCNFSM4FATZX5Q> .

[EricDahlvang]

@mingweiw any idea on timeline for WebChat embed supporting oath cards (upgrade to webchat v4)?

The portal is now working as expected:

WebChat embed is not:

[mingweiw]

We don't want to update webchat at the existing embed url because we don't know who's relying on its existing behavior. The new webchat (4.4) embed is available at https://webchat.botframework.com/embed/b/gemini?s=YOUR_SECRET&b=YOUR_BOT_ID.