CODEWITHSUNDEEP
azureblazor
W Tech
W Tech

Reputation: 65

SignalR with Azure AD (Blazor Server chat app)

https://learn.microsoft.com/en-us/azure/azure-signalr/signalr-tutorial-build-blazor-server-chat-app

How do I get this to work with Azure AD activated? It works perfect when I run in locally in visual studio, but when deployed it will not work with Azure AD, only if I remove Azure AD it works.

This is the error message when deployed and after clicking the button "Chat!" next to username textbox:

"ERROR: Failed to start chat client: Response status code does not indicate success: 403 (Forbidden)."

(I have found other threads like this Blazor Server SignalR Chat works on Local, not on Azure but no solution)

//Program.cs

using BlazorApp6ADChat;
using BlazorApp6ADChat.Data;
using BlazorChat;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"));
builder.Services.AddControllersWithViews()
    .AddMicrosoftIdentityUI();

builder.Services.AddAuthorization(options =>
{
    // By default, all incoming requests will be authorized according to the default policy
    options.FallbackPolicy = options.DefaultPolicy;
});

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor()
    .AddMicrosoftIdentityConsentHandler();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapControllers();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.MapHub<BlazorChatSampleHub>(BlazorChatSampleHub.HubUrl);

app.UseAuthentication();
app.UseAuthorization();

app.Run();

//appsettings.json

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "xxx.onmicrosoft.com",
    "TenantId": "xxx",
    "ClientId": "xxx",
    "CallbackPath": "/signin-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

Working locally/VS

Upvotes: 0

Views: 773

Answers (2)

Michael Washington
Michael Washington

Reputation: 3085

I posted a solution here: Microsoft Learn

Basically:

  1. Manually getting the cookies in the host.cshtml page
  2. Passing the Cookie collection to the app.razor so I can create a cascading parameter
  3. Retrieving the parameter and manually populating the cookie container when instantiating the SignalR client (you may have seen this code on the web, but without steps 1 and 2 it will not work on Azure only in IIS Express)

Program.cs

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);

        builder.Services.AddAutoMapper(typeof(Program).Assembly);

         builder.Services.AddHttpClient();
        builder.Services.AddHttpContextAccessor();
        builder.Services.AddScoped<HttpContextAccessor>();          

        builder.Services.AddResponseCompression(opts =>
        {
            opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "application/octet-stream" });
        });

        var app = builder.Build();

        app.UseResponseCompression();

        app.UseRouting();

        app.UseAuthentication();
        app.UseAuthorization();

        app.MapControllers();
        app.MapBlazorHub();
  
        app.MapHub<ChatHub>("/chathub");
        app.MapFallbackToPage("/_Host");

        app.Run();
    }
}

_Host.cshtml:

<body>
    @{
        var CookieCollection = HttpContext.Request.Cookies;
        Dictionary<string, string> Cookies = new Dictionary<string, string>();
        foreach (var cookie in CookieCollection)
        {
            Cookies.Add(cookie.Key, cookie.Value);
        }        
    }
    <component type="typeof(App)" render-mode="ServerPrerendered" param-Cookies="Cookies" />

app.razor:

<CascadingValue Name="Cookies" Value="Cookies">
<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>
</CascadingValue>
@code {
    [Parameter] public Dictionary<string, string> Cookies { get; set; }
}

Index.razor:

@code {
    #nullable disable
    [CascadingParameter(Name = "Cookies")] public Dictionary<string, string> Cookies { get; set; }    

    System.Security.Claims.ClaimsPrincipal CurrentUser;
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;
    private string strError = "";

    protected override async Task OnInitializedAsync()
    {
        try
        {
            var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();

            CurrentUser = authState.User;

            // ** SignalR Chat

            try
            {
                hubConnection = new HubConnectionBuilder()
                 .WithUrl(Navigation.ToAbsoluteUri("/chathub"), options =>
                 {
                     options.UseDefaultCredentials = true;
                     var cookieCount = Cookies.Count();
                     var cookieContainer = new CookieContainer(cookieCount);
                     foreach (var cookie in Cookies)
                         cookieContainer.Add(new Cookie(
                             cookie.Key,
                             WebUtility.UrlEncode(cookie.Value),
                             path: "/",
                             domain: Navigation.ToAbsoluteUri("/").Host));
                     options.Cookies = cookieContainer;

                     foreach (var header in Cookies)
                         options.Headers.Add(header.Key, header.Value);

                     options.HttpMessageHandlerFactory = (input) =>
                     {
                         var clientHandler = new HttpClientHandler
                             {
                                 PreAuthenticate = true,
                                 CookieContainer = cookieContainer,
                                 UseCookies = true,
                                 UseDefaultCredentials = true,
                             };
                         return clientHandler;
                     };
                 })
                 .WithAutomaticReconnect()
                 .Build();

                hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
                {
                    var encodedMsg = $"{user}: {message}";
                    messages.Add(encodedMsg);
                    InvokeAsync(StateHasChanged);
                });

                await hubConnection.StartAsync();
            }
            catch(Exception ex)
            {
                strError = ex.Message;
            }

        }
        catch
        {
            // do nothing if this fails
        }
    }

    // ** SignalR Chat
    private async Task Send()
    {
        if (hubConnection is not null)
        {
            await hubConnection.SendAsync("SendMessage", messageInput);
        }
    }

    public bool IsConnected =>
        hubConnection?.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

ChatHub.cs:

[Authorize]
public class ChatHub : Hub
{
    public async override Task OnConnectedAsync()
    {
        if (this.Context.User?.Identity?.Name != null)
        {
            await Clients.All.SendAsync(
                "broadcastMessage", 
                "_SYSTEM_", 
                $"{Context.User.Identity.Name} JOINED");
        }
    }
    public async Task SendMessage(string message)
    {
        if (this.Context.User?.Identity?.Name != null)
        {
            await Clients.All.SendAsync(
                "ReceiveMessage", 
                this.Context.User.Identity.Name, 
                message);
        }
    }
}

Upvotes: 0

Brian Parker
Brian Parker

Reputation: 14623

Not sure if this will help. This is how I wire up a WebAssembly Host (server) with a SignalR Hub.

services.TryAddEnumerable(
    ServiceDescriptor.Singleton<IPostConfigureOptions<JwtBearerOptions>,
    ConfigureJwtBearerOptions>());

public class ConfigureJwtBearerOptions : IPostConfigureOptions<JwtBearerOptions>
{
    public void PostConfigure(string name, JwtBearerOptions options)
    {
        var originalOnMessageReceived = options.Events.OnMessageReceived;
        options.Events.OnMessageReceived = async context =>
        {
            await originalOnMessageReceived(context);

            if (string.IsNullOrEmpty(context.Token))
            {
                var accessToken = context.Request.Query["access_token"];
                var requestPath = context.HttpContext.Request.Path;
                var endPoint = $"/chathub";

                if (!string.IsNullOrEmpty(accessToken) &&
                    requestPath.StartsWithSegments(endPoint))
                {
                    context.Token = accessToken;
                }
            }
        };
    }
}

Upvotes: 1

Related Questions