Blazor hosted WASM with IdS updates (#28718)
Luke Latham
GitHub
parent
8c4546dce0
commit
c486fac2c1
|
|
@ -7,5 +7,5 @@
|
|||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||
@using Microsoft.AspNetCore.Components.WebAssembly.Http
|
||||
@using Microsoft.JSInterop
|
||||
@using {APPLICATION ASSEMBLY}.Client
|
||||
@using {APPLICATION ASSEMBLY}.Client.Shared
|
||||
@using {APPLICATION ASSEMBLY}
|
||||
@using {APPLICATION ASSEMBLY}.Shared
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
The `LoginDisplay` component (`Shared/LoginDisplay.razor`) is rendered in the `MainLayout` component (`Shared/MainLayout.razor`) and manages the following behaviors:
|
||||
|
||||
* For authenticated users:
|
||||
* Displays the current username.
|
||||
* Displays the current user name.
|
||||
* Offers a link to the user profile page in ASP.NET Core Identity.
|
||||
* Offers a button to log out of the app.
|
||||
* For anonymous users, offers the option to log in.
|
||||
* For anonymous users:
|
||||
* Offers the option to register.
|
||||
* Offers the option to log in.
|
||||
|
||||
Due to changes in the framework across releases of ASP.NET Core, Razor markup for the `LoginDisplay` component isn't shown in this section. To inspect the markup of the component for a given release, use ***either*** of the following approaches:
|
||||
|
||||
* Create an app provisioned for authentication from the default Blazor WebAssembly project template for the version of ASP.NET Core that you intend to use. Inspect the `LoginDisplay` component in the generated app.
|
||||
* Inspect the `LoginDisplay` component in [reference source](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/Shared/LoginDisplay.IndividualMsalAuth.razor).
|
||||
* Inspect the `LoginDisplay` component in [reference source](https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/Shared/LoginDisplay.IndividualLocalAuth.razor). The templated content for `Hosted` equal to `true` is used.
|
||||
|
||||
[!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)]
|
||||
|
|
|
|||
|
|
@ -102,16 +102,16 @@ Record the sign-up and sign-in user flow name created for the app (for example,
|
|||
Replace the placeholders in the following command with the information recorded earlier and execute the command in a command shell:
|
||||
|
||||
```dotnetcli
|
||||
dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI GUID}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {APP NAME} -ssp "{SIGN UP OR SIGN IN POLICY}"
|
||||
dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI GUID}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {PROJECT NAME} -ssp "{SIGN UP OR SIGN IN POLICY}"
|
||||
```
|
||||
|
||||
> [!WARNING]
|
||||
> **Avoid using dashes (`-`) in the app name `{APP NAME}` that break the formation of the OIDC app identifier.** Logic in the Blazor WebAssembly project template uses the project name for an OIDC app identifier in the solution's configuration. Pascal case (`BlazorSample`) or underscores (`Blazor_Sample`) are acceptable alternatives. For more information, see [Dashes in a hosted Blazor WebAssembly project name break OIDC security (dotnet/aspnetcore #35337)](https://github.com/dotnet/aspnetcore/issues/35337).
|
||||
> **Avoid using dashes (`-`) in the app name `{PROJECT NAME}` that break the formation of the OIDC app identifier.** Logic in the Blazor WebAssembly project template uses the project name for an OIDC app identifier in the solution's configuration. Pascal case (`BlazorSample`) or underscores (`Blazor_Sample`) are acceptable alternatives. For more information, see [Dashes in a hosted Blazor WebAssembly project name break OIDC security (dotnet/aspnetcore #35337)](https://github.com/dotnet/aspnetcore/issues/35337).
|
||||
|
||||
| Placeholder | Azure portal name | Example |
|
||||
| --- | --- | --- |
|
||||
| `{AAD B2C INSTANCE}` | Instance | `https://contoso.b2clogin.com/` (includes the trailing slash) |
|
||||
| `{APP NAME}` | — | `BlazorSample` |
|
||||
| `{PROJECT NAME}` | — | `BlazorSample` |
|
||||
| `{CLIENT APP CLIENT ID}` | Application (client) ID for the **:::no-loc text="Client":::** app | `4369008b-21fa-427c-abaa-9b53bf58e538` |
|
||||
| `{DEFAULT SCOPE}` | Scope name | `API.Access` |
|
||||
| `{SERVER API APP CLIENT ID}` | Application (client) ID for the **:::no-loc text="Server":::** app | `41451fa7-82d9-4673-8fa5-69eff5a761fd` |
|
||||
|
|
@ -321,15 +321,15 @@ Support for <xref:System.Net.Http.HttpClient> instances is added that include ac
|
|||
`Program.cs`:
|
||||
|
||||
```csharp
|
||||
builder.Services.AddHttpClient("{APP NAME}.ServerAPI", client =>
|
||||
builder.Services.AddHttpClient("{PROJECT NAME}.ServerAPI", client =>
|
||||
client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
|
||||
.AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();
|
||||
|
||||
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
|
||||
.CreateClient("{APP NAME}.ServerAPI"));
|
||||
.CreateClient("{PROJECT NAME}.ServerAPI"));
|
||||
```
|
||||
|
||||
The placeholder `{APP NAME}` is the app's name by default.
|
||||
The placeholder `{PROJECT NAME}` is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named <xref:System.Net.Http.HttpClient> of `BlazorSample.ServerAPI`.
|
||||
|
||||
Support for authenticating users is registered in the service container with the <xref:Microsoft.Extensions.DependencyInjection.MsalWebAssemblyServiceCollectionExtensions.AddMsalAuthentication%2A> extension method provided by the [`Microsoft.Authentication.WebAssembly.Msal`](https://www.nuget.org/packages/Microsoft.Authentication.WebAssembly.Msal) package. This method sets up the services required for the app to interact with the Identity Provider (IP).
|
||||
|
||||
|
|
|
|||
|
|
@ -104,15 +104,15 @@ In **API permissions**:
|
|||
In an empty folder, replace the placeholders in the following command with the information recorded earlier and execute the command in a command shell:
|
||||
|
||||
```dotnetcli
|
||||
dotnet new blazorwasm -au SingleOrg --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {APP NAME} --tenant-id "{TENANT ID}"
|
||||
dotnet new blazorwasm -au SingleOrg --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {PROJECT NAME} --tenant-id "{TENANT ID}"
|
||||
```
|
||||
|
||||
> [!WARNING]
|
||||
> **Avoid using dashes (`-`) in the app name `{APP NAME}` that break the formation of the OIDC app identifier.** Logic in the Blazor WebAssembly project template uses the project name for an OIDC app identifier in the solution's configuration. Pascal case (`BlazorSample`) or underscores (`Blazor_Sample`) are acceptable alternatives. For more information, see [Dashes in a hosted Blazor WebAssembly project name break OIDC security (dotnet/aspnetcore #35337)](https://github.com/dotnet/aspnetcore/issues/35337).
|
||||
> **Avoid using dashes (`-`) in the app name `{PROJECT NAME}` that break the formation of the OIDC app identifier.** Logic in the Blazor WebAssembly project template uses the project name for an OIDC app identifier in the solution's configuration. Pascal case (`BlazorSample`) or underscores (`Blazor_Sample`) are acceptable alternatives. For more information, see [Dashes in a hosted Blazor WebAssembly project name break OIDC security (dotnet/aspnetcore #35337)](https://github.com/dotnet/aspnetcore/issues/35337).
|
||||
|
||||
| Placeholder | Azure portal name | Example |
|
||||
| ---------------------------- | ----------------------------------------------------- | ---------------------------------------------- |
|
||||
| `{APP NAME}` | — | `BlazorSample` |
|
||||
| `{PROJECT NAME}` | — | `BlazorSample` |
|
||||
| `{CLIENT APP CLIENT ID}` | Application (client) ID for the **:::no-loc text="Client":::** app | `4369008b-21fa-427c-abaa-9b53bf58e538` |
|
||||
| `{DEFAULT SCOPE}` | Scope name | `API.Access` |
|
||||
| `{SERVER API APP CLIENT ID}` | Application (client) ID for the *Server API app* | `41451fa7-82d9-4673-8fa5-69eff5a761fd` |
|
||||
|
|
@ -207,7 +207,7 @@ To configure the app to receive the value from the `name` claim type:
|
|||
using Microsoft.AspNetCore.Authentication.JwtBearer;
|
||||
```
|
||||
|
||||
* Configure the <xref:Microsoft.IdentityModel.Tokens.TokenValidationParameters.NameClaimType?displayProperty=nameWithType> of the <xref:Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerOptions> in `Program.cs`:
|
||||
* Configure the <xref:Microsoft.IdentityModel.Tokens.TokenValidationParameters.NameClaimType?displayProperty=nameWithType> of the <xref:Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerOptions>.
|
||||
|
||||
```csharp
|
||||
builder.Services.Configure<JwtBearerOptions>(
|
||||
|
|
@ -363,15 +363,15 @@ Support for <xref:System.Net.Http.HttpClient> instances is added that include ac
|
|||
`Program.cs`:
|
||||
|
||||
```csharp
|
||||
builder.Services.AddHttpClient("{ASSEMBLY NAME}.ServerAPI", client =>
|
||||
builder.Services.AddHttpClient("{PROJECT NAME}.ServerAPI", client =>
|
||||
client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
|
||||
.AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();
|
||||
|
||||
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
|
||||
.CreateClient("{ASSEMBLY NAME}.ServerAPI"));
|
||||
.CreateClient("{PROJECT NAME}.ServerAPI"));
|
||||
```
|
||||
|
||||
The placeholder `{ASSEMBLY NAME}` is the app's assembly name (for example, `BlazorSample.Client`).
|
||||
The placeholder `{PROJECT NAME}` is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named <xref:System.Net.Http.HttpClient> of `BlazorSample.ServerAPI`.
|
||||
|
||||
Support for authenticating users is registered in the service container with the <xref:Microsoft.Extensions.DependencyInjection.MsalWebAssemblyServiceCollectionExtensions.AddMsalAuthentication%2A> extension method provided by the [`Microsoft.Authentication.WebAssembly.Msal`](https://www.nuget.org/packages/Microsoft.Authentication.WebAssembly.Msal) package. This method sets up the services required for the app to interact with the Identity Provider (IP).
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue