Disable Magic Code

[fj4870]

We have built chatbot using bot V4 with Direct line channel. I am trying to disable the magic code functionality by following steps mentioned in the bot framework official document (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).

Unfortunately steps have been specified for C# and Javas script in the official documentation but I am trying to achieve the same by ReactWebChat component.

Sample Code given below :

<ReactWebChat directLine={this.state.directLine} styleOptions={WEBCHAT} User={{ id: 'dl_123', name: 'user_name' }} disabled={!this.state.chatEnabled} locale={this.state.locale} store={store} />

But I am getting following error (error code : 400) : {code: "BadArgument", message: "tokenParameters is missing User."}

It would be great help if you can help me with Reactwebchat code to pass User to directline API (https://directline.botframework.com/v3/directline/conversations)

C# Reference code is given below:

public class HomeController : Controller { public async Task Index() { var secret = GetSecret();

    HttpClient client = new HttpClient();

    HttpRequestMessage request = new HttpRequestMessage(
        HttpMethod.Post,
        $"https://directline.botframework.com/v3/directline/tokens/generate");

    request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", secret);

    var userId = $"dl_{Guid.NewGuid()}";

    request.Content = new StringContent(
        JsonConvert.SerializeObject(
            new { User = new { Id = userId } }),
            Encoding.UTF8,
            "application/json");

    var response = await client.SendAsync(request);
    string token = String.Empty;

    if (response.IsSuccessStatusCode)
    {
        var body = await response.Content.ReadAsStringAsync();
        token = JsonConvert.DeserializeObject<DirectLineToken>(body).token;
    }

    var config = new ChatConfig()
    {
        Token = token,
        UserId = userId
    };

    return View(config);
}

}

public class DirectLineToken { public string conversationId { get; set; } public string token { get; set; } public int expires_in { get; set; } } public class ChatConfig { public string Token { get; set; } public string UserId { get; set; } }

[stevkan]

For your implementation, are you using a particular template or setup that you are drawing from? Or, do you have complete code that you could share for reproducing?

[fj4870]

For your implementation, are you using a particular template or setup that you are drawing from? Or, do you have complete code that you could share for reproducing?

Hi Stevkan We are using reactwebchat and which has been extended from botframework-webchat.

Sample code for your reference

<ReactWebChat directLine={this.state.directLine} styleOptions={WEBCHAT} User={{ id: 'dl_123', name: 'user_name' }} disabled={!this.state.chatEnabled} locale={this.state.locale} store={store} />

Please let me know if you need more information on the same.

[stevkan]

Can you read over this blog post, Using WebChat with Azure Bot Services Authentication, and then verify the below questions for me? When reading, you shouldn't need to update your code with the provided example code as it looks like you already have all the necessary components in your bot. But, double check that you do.

• Is the Direct Line channel is enabled in your bot's Channel's blade in Azure?
• "Enhanced authentication options" has been enabled within the Direct Line channel?
• You have added at least one trusted origin? This should be where your are hosting your bot.
• That the user Id begins with "dl_". (I can see you do in your posted code, but it would be good to double check your actual code.)

If you've followed all the steps in the blog, the above is true, and it still isn't working, please try regenerating the Direct Line secret without changing any other settings and test again.

[rajivcoomar]

Is the Direct Line channel is enabled in your bot's Channel's blade in Azure? - Yes "Enhanced authentication options" has been enabled within the Direct Line channel?- Yes You have added at least one trusted origin? This should be where your are hosting your bot.- Yes. Do you mean the bot messaging endpoint or the webchat ui endpoint??
That the user Id begins with "dl_". - Yes

We have also generated the new directline key, but it still generate the Magic code and we have to paste it in the Bot after user sign in. Can assist with below queries:

• We are not using Home controller, instead generating the access token via HTTP call using api : https://directline.botframework.com/v3/directline/tokens/generate, passing the auth header and User Json object. Like to know that it wont affect the magic code disability feature we are working on?
• Do we have to change anything at AD application side, currently redirect URI is : https://token.botframework.com/.auth/web/redirect. Is it correct? Anything else we have to change at AD app side?
• We are using AadV2 from Bot for OAuthCard sign in. Is this version fine?
• Our overall bot is in Virtual assistant bot template, Is this version fine?

Thank you

[stevkan]

You have added at least one trusted origin? This should be where your are hosting your bot.- Yes. Do you mean the bot messaging endpoint or the webchat ui endpoint??

This would be the URI the bot will be hosted at. For example, if I created a bot with a messaging endpoint of my-bot.azurewebsites.net/api/messages and am hosting that bot on a website via Web Chat at https://my-website.somewhere.com/help, I would enter https://my-website.somewhere.com as the trusted origin. Or, in my case, I run my bot and a web server locally. The bot is on port 3978 and the web server is on port 7000. So, I added http://localhost:8000 as the trusted origin.

We are not using Home controller, instead generating the access token via HTTP call using api : https://directline.botframework.com/v3/directline/tokens/generate, passing the auth header and User Json object. Like to know that it wont affect the magic code disability feature we are working on?

This shouldn't be an issue. In my test bot, which is JS-based, this is what I do. You mention you don't use the Home Controller, but your code above (which matches the code in the blog post) shows the API call being made under within it. Just want to make sure we are on the same page on this.

Do we have to change anything at AD application side, currently redirect URI is : https://token.botframework.com/.auth/web/redirect. Is it correct? Anything else we have to change at AD app side?

We are using AadV2 from Bot for OAuthCard sign in. Is this version fine?

That is the correct redirect URL and OAuth type. But, the AAD app registration is unrelated to enabling/disabling the magic code.

Our overall bot is in Virtual assistant bot template, Is this version fine?

It shouldn't matter.

Double check the trusted origin is setup correctly and let me know.

[rajivcoomar]

It worked, I earlier added only http://localhost, now i changed to http://localhost:3300 where my local UI is pointing and I was able to login without magic code. This should have been mentioned in the azure doc, in the example they have given only http://localhost, no where mentioned of port. Thank you for all your help.

[stevkan]

Closing as resolved.