Update blazor templates with Microsoft.Identity.Web APIs

[JunTaoLuo]

Description

Merging template changes from https://github.com/AzureAD/microsoft-identity-web/tree/master/ProjectTemplates/templates.
We are updating our Blazor Server and Blazor WASM templates to use Microsoft.Identity.Web APIs. The work presented here is similar to #24167 which updated our Mvc, RazorPages and Web API templates.

Customer Impact

Current Blazor Server and Blazor WASM templates use obsoleted v1 AAD APIs. This change replaces their use in blazor templates with APIs from Microsoft.Identity.Web.

Regression?

No

Risk (see taxonomy)

Low. These are changes to templates only. The generated templates are verified manually (for functionality) and via unit tests (to ensure generated templates restores and builds).

Link the PR to the original issue and/or the PR to master.

Tracking issue: #22726

[JunTaoLuo]

I feel a little uneasy with these templates changes since it looks like they were based off of 3.1 blazor templates. There were some minor changes between 3.1 and 5.0 it seems so we'll need to test the functionality a little more thoroughly.

[jmprieur]

@JunTaoLuo : in src\ProjectTemplates\Web.ProjectTemplates\content\WebApi-CSharp\Startup.cs, we need to replace

• AddMicrosoftWebAppCallsWebApi AddMicrosoftWebApiCallsWebApi

[JunTaoLuo]

Also before we can merge this fix, we'll also need to update to 0.2.1-preview.

[jmprieur]

@JunTaoLuo;

• in src\ProjectTemplates\Web.ProjectTemplates\content\StarterWeb-CSharp\Views\Home\Index.cshtml, there is a @* #if, but I don't see the #endif*@
• The bootstrap bundle have offending terms in polycheck (See AzureAD/microsoft-identity-web@b502543)

[jmprieur]

I feel a little uneasy with these templates changes since it looks like they were based off of 3.1 blazor templates. There were some minor changes between 3.1 and 5.0 it seems so we'll need to test the functionality a little more thoroughly.

When were the 5.0 one added? I took these last week?
I'm fine with reconciliating.

[JunTaoLuo]

@jmprieur @jennyf19 the 5.0 templates are what's in this repo: https://github.com/dotnet/aspnetcore/tree/master/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp. But I've already highlighted the differences I saw between 3.1 and 5.0 templates via comments and resovled the known differences I found. As long as we test the functionality of the template changes, I think we're okay.

in src\ProjectTemplates\Web.ProjectTemplates\content\StarterWeb-CSharp\Views\Home\Index.cshtml, there is a @* #if, but I don't see the #endif*@

Yea I couldn't figure out what the correct syntax was. If I had #endif*@ in the file at the end it gets written out to the final file and isn't excluded as "templating code". I'm still unsure what the correct format should be but for now, it seems missing that endif generates the correct output so I'm rolling with it. I'll try to track down someone from the templating engine team to figure out how to resolve it later.

Also can you respond to #24268 (comment) and #24268 (comment) when you have the chance?

[jmprieur]

@JunTaoLuo did you update your IdentityWebTemplates repository? (and which branch) so that I can test more?

[JunTaoLuo]

A few updates:

I was able to run the BlazorServer-SingleOrg-Api template and was able to sign in:

However I didn't see instructions for BlazorServer-SingleOrg-Graph or BlazorServer-IndividualB2C-Api at https://microsofteur-my.sharepoint.com/:w:/r/personal/jmprieur_microsoft_com/_layouts/15/guestaccess.aspx?e=4%3AeYZCMo&at=9&share=ETED-1idfGBOjNo_L8aatSwBNE1mZE9ju9sap6K5r_wzcQ so I didn't verify those scenarios.

As for the BlazorWasm templates. apart from one bug I found, I figured out that the templates generated are conditional on whether it's called on the command line or VS. I fiddled with the logic and generated what I assume are the templates we would want to test but I'm still running into the browser-wasm TFM in the client project. @pranavkm @javiercn how are these templates supposed to work? How do we verify our changes made to the Server project of the blazorwasm template?

[JunTaoLuo]

FYI I updated the templates at https://github.com/JunTaoLuo/IdentityWebTemplates.

[javiercn]

You need to put services.AddMicrosoftWebApiAuthentication(Configuration, "AzureAd") inside the if and use services.AddMicrosoftWebApiAuthentication(Configuration, "AzureAd"); on the else.

Otherwise you generate

services.AddMicrosoftWebApiAuthentication(Configuration, "AzureAd")
;

[JunTaoLuo]

I don't understand what you are saying. There are two #if, which one are you referring to. Also, I think the idea is to have just

services.AddMicrosoftWebApiAuthentication(Configuration, "AzureAd")
;

if OrganizationAuth is configured but no API or Graph is configured? This is what's being done in the other templates. Is that wrong? cc @jmprieur

[javiercn]

It's impossible for me to determine the correctness of all these templates/combinations.

I'm signing-off based on the idea that the changes look reasonable (without taking into account the feedback provided offline) and that you have done due diligence verifying the scenarios manually.

Feel free to merge once all tests are passing and you are confident that the different combinations work, and we'll address any bug if needed post preview8.

Thanks for all your hard work to get this into preview8! It's much appreciated!

[jmprieur]

@JunTaoLuo : I've updated https://microsofteur-my.sharepoint.com/:w:/r/personal/jmprieur_microsoft_com/_layouts/15/guestaccess.aspx?e=4%3AeYZCMo&at=9&share=ETED-1idfGBOjNo_L8aatSwBNE1mZE9ju9sap6K5r_wzcQ for BlazorServer-SingleOrg-Graph

The ComponentsWebAssembly-CSharp template is missing changes in 3 files:

In CallWebApi.razor,

• you need to add the 3 lines:

@using Microsoft.Identity.Web
@Inject IDownstreamWebApi downstreamAPI
@Inject MicrosoftIdentityConsentAndConditionalAccessHandler ConsentHandler

https://github.com/AzureAD/microsoft-identity-web/blob/2a2a110ebf68d52afdc4ee53cb2a8de14b87d674/ProjectTemplates/templates/BlazorServerWeb-CSharp/Pages/CallWebApi.razor#L4-L7

• In OnInitializedAsync()

        try
        {
            apiResult = await DownstreamAPI.CallWebApiAsync("me");
        }
        catch (Exception ex)
        {
            ConsentHandler.HandleException(ex);
        }

In Startup.cs:

Please add .AddMicrosoftIdentityConsentHandler(); after services.AddServerSideBlazor()

• in public void ConfigureServices(IServiceCollection services)

            services.AddRazorPages();
            services.AddServerSideBlazor()
                .AddMicrosoftIdentityConsentHandler();
            services.AddSingleton<WeatherForecastService>();

https://github.com/AzureAD/microsoft-identity-web/blob/2a2a110ebf68d52afdc4ee53cb2a8de14b87d674/ProjectTemplates/templates/BlazorServerWeb-CSharp/Pages/CallWebApi.razor#L28-L35

In ShowProfile.razor

        try
        {
            user = await _graphServiceClient.Me.Request().GetAsync();
            photo = await GetPhoto();
        }
        catch (Exception ex)
        {
            ConsentHandler.HandleException(ex);
        }

https://github.com/AzureAD/microsoft-identity-web/blob/f6c31104c5e5432228ff1a987206766c713ad6a8/ProjectTemplates/templates/BlazorServerWeb-CSharp/Pages/ShowProfile.razor#L57-L60

https://github.com/AzureAD/microsoft-identity-web/blob/f6c31104c5e5432228ff1a987206766c713ad6a8/ProjectTemplates/templates/BlazorServerWeb-CSharp/Pages/ShowProfile.razor#L77-L80

[JunTaoLuo]

@jmprieur it turns out that to test the BlazorWasm templates, you'll need to install the preview 7 SDK: https://dotnet.microsoft.com/download/dotnet/5.0. I was able to run the server project with it installed. Also the 5.0.0-dev package versions should be changed to 5.0.0-preview.7.20365.19.

[ghost]

Hello human! Please make sure you've included the Shiproom Template in a comment or (preferably) the PR description. Also, make sure this PR is not marked as a draft and is ready-to-merge.