MSAL Auth in Blazor Server: Carl Franklin's Blazor Train Ep 89

Carl shows how to use MSAL and Azure AD B2C to authenticate users and call a secure API.
⏱ Timeline ⏱
00:00 Intro
01:13 Create ASP.NET Core Web API Project
01:50 Secure the WebAPI App
04:35 Create new Azure AD B2C Tenant
06:48 Register a new application
07:47 Copy ClientID and TenantID to API Project's appconfig.json
08:05 Add the Web platform
09:07 Add a new client secret
09:38 Add a new scope (Expose an API)
10:41 Add the scope (API Permissions)
11:37 Add the publisher domain (Branding and Properties) to config
11:54 Set Instance value in config
12:13 Publish the API App to Azure
13:33 Configure the Microsoft Identity Provider
14:15 Create a User Flow for Sign Up and Sign In
15:27 Test User Flow by running it in the portal
16:20 Add a new Blazor Server project to the solution
16:47 Add nuget package Microsoft.Identity.Client
17:02 Add classes: Settings, NestedSettings, and Extensions
17:58 Create MsalClient folder and add IPCAWrapper, PCAWrapper, and PlatformConfig classes
19:39 Register IPCAWrapper as a singleton
19:51 Replace appsettings.json in Blazor app and set values
20:20 Add @using statements to _Imports.razor
20:36 Add Globals.cs static class
20:49 Modify MainLayout.razor.cs to support login/logout
21:55 Modify WeatherForecastService.cs to return data from the secure api
23:30 Modify code in FetchData.razor
22:43 Run the app, try to fetch data without logging in - no result
24:04 Log in
24:26 Try fetching data again, and it works
24:38 Summary
25:04 Outtro
🔗 Download Files 🔗
github.com/carlfranklin/msala...
🚀 Get Started Today - Free 30 Day Trial 🚀
dxpr.es/NUGET
dxpr.es/FREE-TRIAL
✅ Pricing and Online Demos ✅
dxpr.es/BUY
dxpr.es/DEMOS
🆘 We Are Here to Help 🆘
dxpr.es/SUPPORT
👍 Follow DevExpress on Social Media 👍
dxpr.es/FACEBOOK
dxpr.es/TWITTER
dxpr.es/BLOGS
🏁 Review Customer Testimonials 🏁
dxpr.es/TESTIMONIALS
dxpr.es/MARKETPLACE
#DevExpress #devexpress_blazor #devexpress_web #aspnet #aspnetcore #blazor #datavirtualization #blazortraining #carlfranklin #blazortrain

[@milesgibson]

How about OAUTH for regular non-Azure Blazor applications?

[@tanakamawere]

CARL, what about in production... What is the redirect uri? Localhost works, what about in production?

[@cguarany]

Is it any different in Blazor Wasm?

[@MrLeadVideo]

Thank you! 😅
Could you add on how to add and use user roles using azure b2c in blazor?

[@DeveloperExpress]

Hi. Maybe this will help? czcams.com/video/73qnhE9pW0E/video.html

[@monquarter]

Thank you for your tutorial. I was able to follow it successfully, but during the last step, after logging in an clicking 'Fetch Data' button, it does not populate with weather data. It gives me a json error. After debugging, it appears that
var response = await client.SendAsync(message).ConfigureAwait(false);
returns with an 'unauthorized' message. I wonder if you had any suggestions on how to further debug? I tried the entire tutorial a couple of times and it always seems to turn out the same. Anyway, thanks for your tutorials, they are really helpful.

[@DeveloperExpress]

Thanks for the kind words, Levi. Carl is available for consulting if you need any further help. Don’t hesitate to reach out to him at [e-mail]

[@argepapasoulis]

Yea same issue with me. The response is populated with an StatusCode = System.Net.HttpStatusCode.Unauthorized

[@mc20117]

This goes against current convention, you don't include UseAuthentication or UseAuthorization in Program.cs in the client. I can see what you're trying to do but why take this approach? Some discussion on why you've removed UseAuthentication and UseAuthorization in Program.cs in the client would be helpful.