Blazor standalone WASM auth updates (#28684)
Luke Latham
GitHub
parent
e376d96ef5
commit
211b9a23e6
|
|
@ -180,7 +180,7 @@ To configure the app to receive the value from the `name` claim type:
|
|||
|
||||
## Parts of the solution
|
||||
|
||||
The following subsections in *Parts of the solution* explain the parts of a solution generated from the Blazor WebAssembly project template and describe how the solution's **:::no-loc text="Client":::** and **:::no-loc text="Server":::** projects are configured for reference. There's no specific guidance to follow in these sections for a basic working application if you created the app using the guidance earlier in this article. The guidance in this section is helpful if you're attempting to convert an app that doesn't authenticate and authorize users into one that does. However, an alternative approach to updating an app is to create a new app from the earlier guidance in this article and move your app's components, classes, and resources to the newly-created app. Either approach is viable.
|
||||
This section describes the parts of a solution generated from the Blazor WebAssembly project template and describes how the solution's **:::no-loc text="Client":::** and **:::no-loc text="Server":::** projects are configured for reference. There's no specific guidance to follow in this section for a basic working application if you created the app using the guidance in the [Walkthrough](#walkthrough) section. The guidance in this section is helpful for updating an app to authenticate and authorize users. However, an alternative approach to updating an app is to create a new app from the guidance in the [Walkthrough](#walkthrough) section and moving the app's components, classes, and resources to the new app.
|
||||
|
||||
### `appsettings.json` configuration
|
||||
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@ To configure the app to receive the value from the `name` claim type:
|
|||
|
||||
## Parts of the solution
|
||||
|
||||
The following subsections in *Parts of the solution* explain the parts of a solution generated from the Blazor WebAssembly project template and describe how the solution's **:::no-loc text="Client":::** and **:::no-loc text="Server":::** projects are configured for reference. There's no specific guidance to follow in these sections for a basic working application if you created the app using the guidance earlier in this article. The guidance in this section is helpful if you're attempting to convert an app that doesn't authenticate and authorize users into one that does. However, an alternative approach to updating an app is to create a new app from the earlier guidance in this article and move your app's components, classes, and resources to the newly-created app. Either approach is viable.
|
||||
This section describes the parts of a solution generated from the Blazor WebAssembly project template and describes how the solution's **:::no-loc text="Client":::** and **:::no-loc text="Server":::** projects are configured for reference. There's no specific guidance to follow in this section for a basic working application if you created the app using the guidance in the [Walkthrough](#walkthrough) section. The guidance in this section is helpful for updating an app to authenticate and authorize users. However, an alternative approach to updating an app is to create a new app from the guidance in the [Walkthrough](#walkthrough) section and moving the app's components, classes, and resources to the new app.
|
||||
|
||||
### `appsettings.json` configuration
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: Learn how to secure an ASP.NET Core Blazor WebAssembly standalone a
|
|||
monikerRange: '>= aspnetcore-3.1'
|
||||
ms.author: riande
|
||||
ms.custom: mvc
|
||||
ms.date: 03/08/2023
|
||||
ms.date: 03/15/2023
|
||||
uid: blazor/security/webassembly/standalone-with-authentication-library
|
||||
---
|
||||
# Secure an ASP.NET Core Blazor WebAssembly standalone app with the Authentication library
|
||||
|
|
@ -14,10 +14,30 @@ This article explains how to secure an ASP.NET Core Blazor WebAssembly standalon
|
|||
|
||||
*For Azure Active Directory (AAD) and Azure Active Directory B2C (AAD B2C) guidance, don't follow the guidance in this topic. See <xref:blazor/security/webassembly/standalone-with-azure-active-directory> or <xref:blazor/security/webassembly/standalone-with-azure-active-directory-b2c>.*
|
||||
|
||||
To create a [standalone Blazor WebAssembly app](xref:blazor/hosting-models#blazor-webassembly) that uses [`Microsoft.AspNetCore.Components.WebAssembly.Authentication`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebAssembly.Authentication) library, follow the guidance for your choice of tooling. If adding support for authentication, see the following sections of this article for guidance on setting up and configuring the app.
|
||||
## Walkthrough
|
||||
|
||||
The subsections of the walkthrough explain how to:
|
||||
|
||||
* Register an app
|
||||
* Create the Blazor app
|
||||
* Run the app
|
||||
|
||||
### Register an app
|
||||
|
||||
Register an app with an [OpenID Connect (OIDC)](https://openid.net/connect/) Identity Provider (IP) following the guidance provided by the maintainer of the IP.
|
||||
|
||||
Record the following information:
|
||||
|
||||
* Authority (for example, `https://accounts.google.com/`).
|
||||
* Application (client) ID (for example, `2...7-e...q.apps.googleusercontent.com`).
|
||||
* Additional IP configuration (see the IP's documentation).
|
||||
|
||||
> [!NOTE]
|
||||
> The Identity Provider (IP) must use [OpenID Connect (OIDC)](https://openid.net/connect/). For example, Facebook's IP isn't an OIDC-compliant provider, so the guidance in this topic doesn't work with the Facebook IP. For more information, see <xref:blazor/security/webassembly/index#authentication-library>.
|
||||
> The IP must use OIDC. For example, Facebook's IP isn't an OIDC-compliant provider, so the guidance in this topic doesn't work with the Facebook IP. For more information, see <xref:blazor/security/webassembly/index#authentication-library>.
|
||||
|
||||
### Create the Blazor app
|
||||
|
||||
To create a [standalone Blazor WebAssembly app](xref:blazor/hosting-models#blazor-webassembly) that uses the [`Microsoft.AspNetCore.Components.WebAssembly.Authentication`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebAssembly.Authentication) library, follow the guidance for your choice of tooling. If adding support for authentication, see the [Parts of the app](#parts-of-the-app) section of this article for guidance on setting up and configuring the app.
|
||||
|
||||
# [Visual Studio](#tab/visual-studio)
|
||||
|
||||
|
|
@ -53,7 +73,53 @@ The app is created to use ASP.NET Core [Identity](xref:security/authentication/i
|
|||
|
||||
---
|
||||
|
||||
## Authentication package
|
||||
### Configure the app
|
||||
|
||||
Configure the app following the IP's guidance. At a minimum, the app requires the `Local:Authority` and `Local:ClientId` configuration settings in the app's `wwwroot/appsettings.json` file:
|
||||
|
||||
```json
|
||||
{
|
||||
"Local": {
|
||||
"Authority": "{AUTHORITY}",
|
||||
"ClientId": "{CLIENT ID}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Google OAuth 2.0 OIDC example for an app that runs on the `localhost` address at port 5001:
|
||||
|
||||
```json
|
||||
{
|
||||
"Local": {
|
||||
"Authority": "https://accounts.google.com/",
|
||||
"ClientId": "2...7-e...q.apps.googleusercontent.com",
|
||||
"PostLogoutRedirectUri": "https://localhost:5001/authentication/logout-callback",
|
||||
"RedirectUri": "https://localhost:5001/authentication/login-callback",
|
||||
"ResponseType": "id_token"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The redirect URI (`https://localhost:5001/authentication/login-callback`) is registered in the [Google APIs console](https://console.developers.google.com/apis/dashboard) in **Credentials** > **`{NAME}`** > **Authorized redirect URIs**, where `{NAME}` is the app's client name in the **OAuth 2.0 Client IDs** app list of the Google APIs console.
|
||||
|
||||
> [!NOTE]
|
||||
> Supplying the port number for a `localhost` redirect URI isn't required for some OIDC IPs per the [OAuth 2.0 specification](https://datatracker.ietf.org/doc/html/rfc8252#section-7.3). Some IPs permit the redirect URI for loopback addresses to omit the port. Others allow the use of a wildcard for the port number (for example, `*`). For additional information, see the IP's documentation.
|
||||
|
||||
### Run the app
|
||||
|
||||
Use one of the following approaches to run the app:
|
||||
|
||||
* Visual Studio
|
||||
* Select the **Run** button.
|
||||
* Use **Debug** > **Start Debugging** from the menu.
|
||||
* Press <kbd>F5</kbd>.
|
||||
* .NET CLI command shell: Execute the `dotnet run` command from the app's folder.
|
||||
|
||||
## Parts of the app
|
||||
|
||||
This section describes the parts of an app generated from the Blazor WebAssembly project template and how the app is configured. There's no specific guidance to follow in this section for a basic working application if you created the app using the guidance in the [Walkthrough](#walkthrough) section. The guidance in this section is helpful for updating an app to authenticate and authorize users. However, an alternative approach to updating an app is to create a new app from the guidance in the [Walkthrough](#walkthrough) section and moving the app's components, classes, and resources to the new app.
|
||||
|
||||
### Authentication package
|
||||
|
||||
When an app is created to use Individual User Accounts, the app automatically receives a package reference for the [`Microsoft.AspNetCore.Components.WebAssembly.Authentication`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebAssembly.Authentication) package. The package provides a set of primitives that help the app authenticate users and obtain tokens to call protected APIs.
|
||||
|
||||
|
|
@ -61,7 +127,7 @@ If adding authentication to an app, manually add the [`Microsoft.AspNetCore.Comp
|
|||
|
||||
[!INCLUDE[](~/includes/package-reference.md)]
|
||||
|
||||
## Authentication service support
|
||||
### Authentication service support
|
||||
|
||||
Support for authenticating users using OpenID Connect (OIDC) is registered in the service container with the <xref:Microsoft.Extensions.DependencyInjection.WebAssemblyAuthenticationServiceCollectionExtensions.AddOidcAuthentication%2A> extension method provided by the [`Microsoft.AspNetCore.Components.WebAssembly.Authentication`](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebAssembly.Authentication) package.
|
||||
|
||||
|
|
@ -78,6 +144,8 @@ builder.Services.AddOidcAuthentication(options =>
|
|||
});
|
||||
```
|
||||
|
||||
### `wwwroot/appsettings.json` configuration
|
||||
|
||||
Configuration is supplied by the `wwwroot/appsettings.json` file:
|
||||
|
||||
```json
|
||||
|
|
@ -89,23 +157,7 @@ Configuration is supplied by the `wwwroot/appsettings.json` file:
|
|||
}
|
||||
```
|
||||
|
||||
Google OAuth 2.0 OIDC example for an app that runs on the localhost address at port 5001:
|
||||
|
||||
```json
|
||||
{
|
||||
"Local": {
|
||||
"Authority": "https://accounts.google.com/",
|
||||
"ClientId": "2.......7-e.....................q.apps.googleusercontent.com",
|
||||
"PostLogoutRedirectUri": "https://localhost:5001/authentication/logout-callback",
|
||||
"RedirectUri": "https://localhost:5001/authentication/login-callback",
|
||||
"ResponseType": "id_token"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The redirect URI (`https://localhost:5001/authentication/login-callback`) is registered in the [Google APIs console](https://console.developers.google.com/apis/dashboard) in **Credentials** > **`{NAME}`** > **Authorized redirect URIs**, where `{NAME}` is the app's client name in the **OAuth 2.0 Client IDs** app list of the Google APIs console.
|
||||
|
||||
## Access token scopes
|
||||
### Access token scopes
|
||||
|
||||
The Blazor WebAssembly template automatically configures default scopes for `openid` and `profile`.
|
||||
|
||||
|
|
@ -126,27 +178,27 @@ For more information, see the following sections of the *Additional scenarios* a
|
|||
* [Request additional access tokens](xref:blazor/security/webassembly/additional-scenarios#request-additional-access-tokens)
|
||||
* [Attach tokens to outgoing requests](xref:blazor/security/webassembly/additional-scenarios#attach-tokens-to-outgoing-requests)
|
||||
|
||||
## Imports file
|
||||
### Imports file
|
||||
|
||||
[!INCLUDE[](~/blazor/security/includes/imports-file-standalone.md)]
|
||||
|
||||
## Index page
|
||||
### Index page
|
||||
|
||||
[!INCLUDE[](~/blazor/security/includes/index-page-authentication.md)]
|
||||
|
||||
## App component
|
||||
### App component
|
||||
|
||||
[!INCLUDE[](~/blazor/security/includes/app-component.md)]
|
||||
|
||||
## RedirectToLogin component
|
||||
### RedirectToLogin component
|
||||
|
||||
[!INCLUDE[](~/blazor/security/includes/redirecttologin-component.md)]
|
||||
|
||||
## LoginDisplay component
|
||||
### LoginDisplay component
|
||||
|
||||
[!INCLUDE[](~/blazor/security/includes/logindisplay-component.md)]
|
||||
|
||||
## Authentication component
|
||||
### Authentication component
|
||||
|
||||
[!INCLUDE[](~/blazor/security/includes/authentication-component.md)]
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ Use one of the following approaches to run the app:
|
|||
|
||||
## Parts of the app
|
||||
|
||||
The following subsections in *Parts of the app* explain the parts of an app generated from the Blazor WebAssembly project template and how the app is configured. There's no specific guidance to follow in these sections for a basic working application if you created the app using the guidance earlier in this article. The guidance in this section is helpful if you're attempting to convert an app that doesn't authenticate and authorize users into one that does. However, an alternative approach to updating an app is to create a new app from the earlier guidance in this article and move your app's components, classes, and resources to the newly-created app. Either approach is viable.
|
||||
This section describes the parts of an app generated from the Blazor WebAssembly project template and how the app is configured. There's no specific guidance to follow in this section for a basic working application if you created the app using the guidance in the [Walkthrough](#walkthrough) section. The guidance in this section is helpful for updating an app to authenticate and authorize users. However, an alternative approach to updating an app is to create a new app from the guidance in the [Walkthrough](#walkthrough) section and moving the app's components, classes, and resources to the new app.
|
||||
|
||||
### Authentication package
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ Use one of the following approaches to run the app:
|
|||
|
||||
## Parts of the app
|
||||
|
||||
The following subsections in *Parts of the app* explain the parts of an app generated from the Blazor WebAssembly project template and how the app is configured. There's no specific guidance to follow in these sections for a basic working application if you created the app using the guidance earlier in this article. The guidance in this section is helpful if you're attempting to convert an app that doesn't authenticate and authorize users into one that does. However, an alternative approach to updating an app is to create a new app from the earlier guidance in this article and move your app's components, classes, and resources to the newly-created app. Either approach is viable.
|
||||
This section describes the parts of an app generated from the Blazor WebAssembly project template and how the app is configured. There's no specific guidance to follow in this section for a basic working application if you created the app using the guidance in the [Walkthrough](#walkthrough) section. The guidance in this section is helpful for updating an app to authenticate and authorize users. However, an alternative approach to updating an app is to create a new app from the guidance in the [Walkthrough](#walkthrough) section and moving the app's components, classes, and resources to the new app.
|
||||
|
||||
### Authentication package
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ Use one of the following approaches to run the app:
|
|||
|
||||
## Parts of the app
|
||||
|
||||
The following subsections in *Parts of the app* explain the parts of an app generated from the Blazor WebAssembly project template and how the app is configured. There's no specific guidance to follow in these sections for a basic working application if you created the app using the guidance earlier in this article. The guidance in this section is helpful if you're attempting to convert an app that doesn't authenticate and authorize users into one that does. However, an alternative approach to updating an app is to create a new app from the earlier guidance in this article and move your app's components, classes, and resources to the newly-created app. Either approach is viable.
|
||||
This section describes the parts of an app generated from the Blazor WebAssembly project template and how the app is configured. There's no specific guidance to follow in this section for a basic working application if you created the app using the guidance in the [Walkthrough](#walkthrough) section. The guidance in this section is helpful for updating an app to authenticate and authorize users. However, an alternative approach to updating an app is to create a new app from the guidance in the [Walkthrough](#walkthrough) section and moving the app's components, classes, and resources to the new app.
|
||||
|
||||
### Authentication package
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue