Botframework-sdk: [Auth, Teams] OAuth Card not rendering in WebChat and sign in button doesn't work in Teams

[tariksetia]

Bot Info

• SDK Platform: Nodejs
• SDK Version: 3.13.1
• Active Channels: Teams,webchat
• Deployment Environment: AzureBot Service

Issue Description

I am not able to see OAuth card in Azure's Test in webchat page.
OAuth card renders in MS-Teams but sign in button didnt work
image -> https://github.com/tariksetia/euc-Bot/blob/master/OAuth%20card.PNG

Code Example

I have Setup AzureADv2 integration using botservice docs https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-tutorial-authentication?view=azure-bot-service-3.0

my code: https://github.com/tariksetia/euc-Bot/blob/master/app.js
which is similar to example -->https://github.com/Microsoft/BotBuilder/blob/master/Node/examples/basics-oauth/app.js

Expected Behavior

Card should render in webchat and clicking sign-in in teams should open sigin window

[tariksetia]

I deployed the bot on Skype channel and SignIn button worked. It opend the microsoft login window.
Looks like the issue is only with Azure's "Test in webchat" page and MS Teams

[tariksetia]

I still couldn't figure it out. Is there something wrong with OAuth Card?

[amazaheri]

We see the same issue on our end.

[stevkan]

Hi @tariksetia and @amazaheri, I will begin looking into this today and will keep you posted.

[jeffaknine]

Hi @stevkan, any news on this ?

[JasonSowers]

WebChat - If you are using webchat via iFrame or in the azure portal's "test in webchat" the signin card will not render. If you use the CDN or NPM version it will render as long as you use 0.13.0 or higher, the card will render. You can find instructions on how to add webchat to your website using various methods in the webchat readme

Teams - The sign in card's button has an ActionType of signin and teams does not support this ActionType. In order to make this work as present time you need to go in and change the ActionType to ActionType.OpenUrl There are a few other issues discussing this one is #2104

[jeffaknine]

About changing the the OAuthCard ActionType, any example on how to do this? Thanks

[JasonSowers]

@jeffaknine There would be multiple ways to change the buttons action type from signIn to openUrl. Below is just one method I am using. For both Node and C# the strategy i am using is to basically catch the activity before it is sent to the user and changing the Button type to OpenUrl.

Note: you cannot copy and paste the magic code into teams, you must actually type it out.

---

Node.JS

add a method like this to your bot code:

bot.use({
    botbuilder: function(session, next) {
        next();
    },
    send: function(event, next) {
        if (event.source === "msteams" && event.attachments[0].contentType === "application/vnd.microsoft.card.signin") {
            event.attachments[0].content.buttons[0].type = "openUrl";
        }
        next();
    }
});

---

C

You will need to first add a class like this that inherits from IMessageActivityMapper:

    public sealed class CustomActivityMapper : IMessageActivityMapper
    {
        public IMessageActivity Map(IMessageActivity message)
        {
            if (message.ChannelId == ChannelIds.Msteams)
            {
                if (message.Attachments.Any() && message.Attachments[0].ContentType == "application/vnd.microsoft.card.signin")
                {
                    var card = message.Attachments[0].Content as SigninCard;
                    var buttons = card.Buttons as CardAction[];
                    if (buttons.Any())
                    {
                        buttons[0].Type = ActionTypes.OpenUrl;
                    }
                }
            }
            return message;
        }
    }

next you will need to register that class in your global.asax like this:

                builder
                    .RegisterType<CustomActivityMapper>()
                    .AsImplementedInterfaces()
                    .SingleInstance();

[JasonSowers]

Is anyone still having issues with this that they need help with?

[amazaheri]

Its on our task list for this sprint, I will update soon.

[jeffaknine]

Thank you @JasonSowers , indeed changing the button type opens the sign in in a web page. But now it also gives a magic code that i have to paste. The issue i'm having now is verifying the magic code. I'm using the example from https://github.com/Microsoft/BotBuilder/blob/master/Node/examples/basics-oauth/app.js
but i'm getting a "JWT validation failed: IDX10500: Signature validation failed. Unable to resolve"

Thanks
Jeff

[JasonSowers]

Are you typing out the code or copy paste? There is a very annoying bug in teams in which you cannot paste the magic code in.

[jeffaknine]

Indeed i was copy pasting... thanks for you help the sign in works now. Suggestions and adaptive cards are not being displayed though

[JasonSowers]

Did anyone else still need help with this issue or are we all good to close this?

[ravensorb]

I am running into an issue where the OAuth Card does not render when using "Visual Studio Services" -- could this be related to this issue?

Note: Azure AD and Github are working fine its only VSTS that is not so far

[Rykimaruh]

@JasonSowers ,I too have this issue, but more related to MS Teams. The Sign In button doesn't seem to work when clicking on it.

I tried implementing your workaround, but there is one thing I'm unclear on:

1. the builder in the global.asax.cs is it also missing something?

[JasonSowers]

@Rykimaruh apologies as I was running under the assumption that most bots will already be registering things and would already have the rest of the code, the full code that would need to be added would be this in your Application_Start() method, assuming you do not have any other code in there, if you do add this to it:

        protected void Application_Start()
        {
            Conversation.UpdateContainer(
                builder =>
                {
                    builder
                    .RegisterType<CustomActivityMapper>()
                    .AsImplementedInterfaces()
                    .SingleInstance();
                });
        }

[JasonSowers]

@ravensorb I am still unable to test with VSTS because of the issue I told you about on Stack Overflow with the callback URL. We are getting in contact with the VSTS app team to try to resolve this.

[elizathomas]

The signin option does not work in 1:1 / private conversations. It works from within a teams channel. The signin card displays, but am not able to click the sign in button.

[JasonSowers]

I'm not sure why you are experiencing this, I have has success in bot 1:1 and in a channel. can you please share your code?

[JiunHong]

I have similar issues, although using the middleware to catch the command and throw it to openurl worked, there isn't anywhere to copy the challenge code to (why is this not automatic in teams). When i paste the challenge code back, it isn't an event, thus it doesn't understand what I am doing...

My guess is that we have to create our own waterfall method to validate the code?

[mark-szabo]

For those of you out there who is trying to use @JasonSowers's awesome solution (above) with the SDK v4, here is my solution for aspnetcore (C#):

We need to add a new middleware...

public class TeamsAuthWorkaroundMiddleware : IMiddleware
{
    public async Task OnTurnAsync(ITurnContext turnContext, NextDelegate next, CancellationToken cancellationToken = new CancellationToken())
    {
        // hook up onSend pipeline
        turnContext.OnSendActivities(async (ctx, activities, nextSend) =>
        {
            foreach (var activity in activities)
            {
                if (activity.ChannelId != "msteams") continue;
                if (activity.Attachments == null) continue;
                if (!activity.Attachments.Any()) continue;
                if (activity.Attachments[0].ContentType != "application/vnd.microsoft.card.signin") continue;
                if (!(activity.Attachments[0].Content is SigninCard card)) continue;
                if (!(card.Buttons is CardAction[] buttons)) continue;
                if (!buttons.Any()) continue;

                // Modify button type to openUrl as signIn is not working in teams
                buttons[0].Type = ActionTypes.OpenUrl;
            }

            // run full pipeline
            return await nextSend().ConfigureAwait(false);
        });

        await next(cancellationToken);
    }
}

...and register it in Startup.cs.

services.AddBot<YourBot>(options =>
{
    options.CredentialProvider = new SimpleCredentialProvider(endpointService.AppId, endpointService.AppPassword);

    options.Middleware.Add(new TeamsAuthWorkaroundMiddleware());
});

And that's it! 😊

[msekkappan]

I used Mark's solution in the 24.bot-authentication-msgraph sample project, nothing gets rendered in Teams, works good in emulator. Debugging in emulator shows OAuthCard card as opposed signin card, changing it in the code did not make any difference. I am not aware of a way to debug in teams, any ideas?

[msekkappan]

Please disregard my message, the reason for not rendering anything in Teams is because I did not turn on the teams channels in Azure

[Basavarajsk1992]

I am using OAuth login in bot framework sdkv4 but, button click is not triggering on msteam, where as it is triggering in Direct line client.
If anybody knew what is the issue please share.
Thanks

[mark-szabo]

@Basavarajsk1992 have you tried the workaround from my comment above?

[Basavarajsk1992]

@mark-szabo Thanks. Checked it but, i need it in Node js.

[iMicknl]

@Basavarajsk1992 it sounds like you are missing the validDomains section in your Teams manifest, read more on StackOverflow.

[milinsick]

For those of you out there who is trying to use @JasonSowers's awesome solution (above) with the SDK v4, here is my solution for aspnetcore (C#):

We need to add a new middleware...

public class TeamsAuthWorkaroundMiddleware : IMiddleware
{
    public async Task OnTurnAsync(ITurnContext turnContext, NextDelegate next, CancellationToken cancellationToken = new CancellationToken())
    {
        // hook up onSend pipeline
        turnContext.OnSendActivities(async (ctx, activities, nextSend) =>
        {
            foreach (var activity in activities)
            {
                if (activity.ChannelId != "msteams") continue;
                if (activity.Attachments == null) continue;
                if (!activity.Attachments.Any()) continue;
                if (activity.Attachments[0].ContentType != "application/vnd.microsoft.card.signin") continue;
                if (!(activity.Attachments[0].Content is SigninCard card)) continue;
                if (!(card.Buttons is CardAction[] buttons)) continue;
                if (!buttons.Any()) continue;

                // Modify button type to openUrl as signIn is not working in teams
                buttons[0].Type = ActionTypes.OpenUrl;
            }

            // run full pipeline
            return await nextSend().ConfigureAwait(false);
        });

        await next(cancellationToken);
    }
}

...and register it in Startup.cs.

services.AddBot<YourBot>(options =>
{
    options.CredentialProvider = new SimpleCredentialProvider(endpointService.AppId, endpointService.AppPassword);

    options.Middleware.Add(new TeamsAuthWorkaroundMiddleware());
});

And that's it! 😊

Hi @mark-szabo, as a novice coder I'm struggling with the implementation of your fix. Would it be possible to add this fix to the example code of Microsoft's BotBuilder Samples? Or could you provide guidance on how to exactly implement those code snippets?

Sorry for bothering you with this, but I'm really interested in getting started with the development of Bot for Microsoft Teams. I can't understand why this is not fixed in Microsoft Teams itself, especially since Teams is a hero product for Microsoft...

Thanks and best,
Boris

[mark-szabo]

Hi @BorisMilincicDev, sure! 😊

You'll need to add the first code snippet somewhere (it can be in another file for example).

The second code snippet should be added to Startup.cs's ConfigureServices() method. Actually there should already be a line like this:

services.AddBot<YourBot>(options =>
{
    options.CredentialProvider = new SimpleCredentialProvider(endpointService.AppId, endpointService.AppPassword);
});

You'll just need to add this one line to the body of that lamba:

options.Middleware.Add(new TeamsAuthWorkaroundMiddleware());

You can check out my implementation in this project:
TeamsAuthWorkaroundMiddleware.cs
Startup.cs

[Sean0885]

Hello,
thanks for the workaround middleware.
In my case the button now shows up, opens up a new window and closes it directly without posting any magic number or message back to the bot.

A second click on the Login button says: "The Sign In code was not found or expired. Please try asking the bot to sign in again."
So the code seems to be generated correctly, but the window closes automaticly without a chance to get the magic number or error message.

does anyone facing the same issue?

(edit) maybe one step further
after the login the user is redirected to "/api/oauth/PostSignInCallback?signin"....

there is the following javascript code in the response of this page:
microsoftTeams.initialize();
microsoftTeams.authentication.notifySuccess('820661');

Which should post the code to msteams - maybe this function is broken

Thanks & regards,
Andreas

[madhukarchaure04]

@Sean0885 I'm also facing the similar issue. I have a fully working Teams bot. I'm adding few new features to it. For testing when I'm trying to signin, the signin prompt is coming. After giving signing details, nothing is getting returned. Earlier using same bot I was able to login. Any recent changes to OAuthCard?
If I copy the signin URL and paste it in browser, it does give me magic code and after typing it into chat the signin is successful, but no further invoke commands are invoked from teams conversation.

[Emod94]

I'm facing the similar issue like @madhukarchaure04 and @Sean0885. The OAuthCard open a new window.After the user authentication the window close an the OauthDialog won't continue.

[stevenh6696]

I got it to work by doing the following. However, this only works for Teams and not the Emulator.

// Allow Restify to parse the body
let server = restify.createServer();
server.use(restify.plugins.jsonBodyParser());

/// This code is from bot framework samples
server.post('/api/messages', (req, res) => {

    // This part converts the request so Teams thinks the verification code was input
    if (req.body && req.body.type === 'invoke' && req.body.name === 'signin/verifyState') {
        req.body.text = req.body.value.state;
        req.body.type = 'message';
        req.body.textFormat = 'plain';
        delete req.body.value;
    }

    // Route received a request to adapter for processing
    adapter.processActivity(req, res, async (turnContext) => {
        // route to bot activity handler.
        await bot.run(turnContext);
    });
});

[Zack-Strife]

I got it to work by doing the following. However, this only works for Teams and not the Emulator.

// Allow Restify to parse the body
let server = restify.createServer();
server.use(restify.plugins.jsonBodyParser());

/// This code is from bot framework samples
server.post('/api/messages', (req, res) => {

    // This part converts the request so Teams thinks the verification code was input
    if (req.body && req.body.type === 'invoke' && req.body.name === 'signin/verifyState') {
        req.body.text = req.body.value.state;
        req.body.type = 'message';
        req.body.textFormat = 'plain';
        delete req.body.value;
    }

    // Route received a request to adapter for processing
    adapter.processActivity(req, res, async (turnContext) => {
        // route to bot activity handler.
        await bot.run(turnContext);
    });
});

This is probably not the best way to do it but it's working and it's really easy to implement, a great workaround while waiting for Microsoft to actually do something about this.
Thanks !

[ashishkumar070]

@JasonSowers I tried registering the middleware like this

services.AddBot<YourBot<Dialog>>(options =>
{
    options.CredentialProvider = new SimpleCredentialProvider(endpointService.AppId, endpointService.AppPassword);

    options.Middleware.Add(new TeamsAuthWorkaroundMiddleware());
});

The bot stops working.

[RohanSaini]

I got it to work by doing the following. However, this only works for Teams and not the Emulator.

// Allow Restify to parse the body
let server = restify.createServer();
server.use(restify.plugins.jsonBodyParser());

/// This code is from bot framework samples
server.post('/api/messages', (req, res) => {

    // This part converts the request so Teams thinks the verification code was input
    if (req.body && req.body.type === 'invoke' && req.body.name === 'signin/verifyState') {
        req.body.text = req.body.value.state;
        req.body.type = 'message';
        req.body.textFormat = 'plain';
        delete req.body.value;
    }

    // Route received a request to adapter for processing
    adapter.processActivity(req, res, async (turnContext) => {
        // route to bot activity handler.
        await bot.run(turnContext);
    });
});

I tried this but still signin card not working. Can any one help how to get token on Teams channel.
As I want to use some graph API's but signin card is not wroking.

[EricDahlvang]

Does the Teams manifest contain: validDomains: [ "token.botframework.com" ] ? I've missed this before...

https://docs.microsoft.com/en-us/microsoftteams/platform/bots/how-to/authentication/add-authentication#install-and-test-the-bot-in-teams

[d60ht2]

I'm a novice bot developer and I had a similar issue to @Sean0885, @madhukarchaure04 and @Emod94 using OAuth login in bot framework sdkv4 inside Teams.
The prompt box would show but then immediately close or say I was already signed in if I tried a second time. The solution was to implement the OnTeamsSigninverifyStateAsync method inside my bot - similar to here

[upendra1588]

hi @mark-szabo , I am facing same issue in virtual assistance template, Oauth card authentication is working in webchat and emulator but it is not working in teams. i followed all above mentioned steps. could you please help me to resolve this issue. thanks in advanced.

[EricDahlvang]

Hi @upendra1588

I'm sorry but, Teams does not support the OAuth Card. This is why the OAuthPrompt creates a SignInCard when on the Teams channel: https://github.com/microsoft/botbuilder-dotnet/blob/master/libraries/Microsoft.Bot.Builder.Dialogs/Prompts/OAuthPrompt.cs#L313