diff --git a/aspnetcore/blazor/components/class-libraries.md b/aspnetcore/blazor/components/class-libraries.md index 9e975a3e1515..59d47d7cacaa 100644 --- a/aspnetcore/blazor/components/class-libraries.md +++ b/aspnetcore/blazor/components/class-libraries.md @@ -173,10 +173,30 @@ Add a page to the app that uses the `ExtraStyles` component from the RCL. ``` -Link to the library's stylesheet in the app's `` markup ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). +Link to the library's stylesheet in the app's `` markup ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)): + +:::moniker-end + +:::moniker range=">= aspnetcore-9.0" + +Blazor Web Apps: + +```html + +``` + +Standalone Blazor WebAssembly apps: + +```html + +``` + +:::moniker-end + +:::moniker range=">= aspnetcore-6.0 < aspnetcore-9.0" ```html - + ``` :::moniker-end diff --git a/aspnetcore/blazor/components/css-isolation.md b/aspnetcore/blazor/components/css-isolation.md index 6577b2b1f32d..1a7f2cf45e32 100644 --- a/aspnetcore/blazor/components/css-isolation.md +++ b/aspnetcore/blazor/components/css-isolation.md @@ -51,12 +51,34 @@ h1 { ## CSS isolation bundling -CSS isolation occurs at build time. Blazor rewrites CSS selectors to match markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset. The stylesheet is referenced inside the `` tag ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). The following `` element is added by default to an app created from the Blazor project templates, where the placeholder `{ASSEMBLY NAME}` is the project's assembly name: +CSS isolation occurs at build time. Blazor rewrites CSS selectors to match markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset. The stylesheet is referenced inside the `` tag ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). The following `` element is added by default to an app created from the Blazor project templates: + +:::moniker range=">= aspnetcore-9.0" + +Blazor Web Apps: + +```html + +``` + +Standalone Blazor WebAssembly apps: + +```html + +``` + +:::moniker-end + +:::moniker range="< aspnetcore-9.0" ```html ``` +:::moniker-end + +The `{ASSEMBLY NAME}` placeholder is the project's assembly name. + :::moniker range="< aspnetcore-8.0" The following example is from a hosted Blazor WebAssembly **:::no-loc text="Client":::** app. The app's assembly name is `BlazorSample.Client`, and the `` is added by the Blazor WebAssembly project template when the project is created with the Hosted option (`-ho|--hosted` option using the .NET CLI or **ASP.NET Core Hosted** checkbox using Visual Studio): @@ -90,7 +112,7 @@ At build time, a project bundle is created with the convention `obj/{CONFIGURATI ## Child component support -By default, CSS isolation only applies to the component you associate with the format `{COMPONENT NAME}.razor.css`, where the placeholder `{COMPONENT NAME}` is usually the component name. To apply changes to a child component, use the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) to any descendant elements in the parent component's `.razor.css` file. The `::deep` pseudo-element selects elements that are *descendants* of an element's generated scope identifier. +By default, CSS isolation only applies to the component you associate with the format `{COMPONENT NAME}.razor.css`, where the `{COMPONENT NAME}` placeholder is usually the component name. To apply changes to a child component, use the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) to any descendant elements in the parent component's `.razor.css` file. The `::deep` pseudo-element selects elements that are *descendants* of an element's generated scope identifier. The following example shows a parent component called `Parent` with a child component called `Child`. diff --git a/aspnetcore/blazor/components/integration.md b/aspnetcore/blazor/components/integration.md index 91bec4f9fd17..adfebffb2ce2 100644 --- a/aspnetcore/blazor/components/integration.md +++ b/aspnetcore/blazor/components/integration.md @@ -92,6 +92,8 @@ Add an `App` component to the app, which serves as the root component, which is `Components/App.razor`: +:::moniker range=">= aspnetcore-9.0" + ```razor @@ -100,7 +102,7 @@ Add an `App` component to the app, which serves as the root component, which is - + @@ -112,12 +114,34 @@ Add an `App` component to the app, which serves as the root component, which is ``` -For the `` element in the preceding example, change `BlazorSample` in the stylesheet's file name to match the app's project name. For example, a project named `ContosoApp` uses the `ContosoApp.styles.css` stylesheet file name: +:::moniker-end -```html - +:::moniker range="< aspnetcore-9.0" + +```razor + + + + + + + + + + + + + + + + + ``` +:::moniker-end + +The `{ASSEMBLY NAME}` placeholder is the app's assembly name. For example, a project with an assembly name of `ContosoApp` uses the `ContosoApp.styles.css` stylesheet file name. + Add a `Pages` folder to the `Components` folder to hold routable Razor components. Add the following `Welcome` component to demonstrate static SSR. @@ -739,6 +763,8 @@ Add an `App` component to the `Components` folder with the following content. `Components/App.razor`: +:::moniker range=">= aspnetcore-9.0" + ```razor @@ -746,9 +772,9 @@ Add an `App` component to the `Components` folder with the following content. {APP TITLE} - - - + + + @@ -761,19 +787,41 @@ Add an `App` component to the `Components` folder with the following content. ``` -In the preceding code update the app title and stylesheet file name: +:::moniker-end -* For the `{APP TITLE}` placeholder in the `` element, set the app's title. For example: +:::moniker range="< aspnetcore-9.0" - ```html - <title>Blazor Sample - ``` +```razor + + + + + + {APP TITLE} + + + + + + + + + + + + + +``` -* For the `{APP NAMESPACE}` placeholder in the stylesheet `` element, set the app's namespace. For example: +:::moniker-end - ```html - - ``` +The `{APP NAMESPACE}` placeholder is the app's namespace. + +The `{APP TITLE}` placeholder in the `` element is the app's title. For example: + +```html +<title>Blazor Sample +``` Where services are registered, add services for Razor components and services to support rendering Interactive Server components. diff --git a/aspnetcore/blazor/fundamentals/environments.md b/aspnetcore/blazor/fundamentals/environments.md index 245963313cdb..b9cd07814c95 100644 --- a/aspnetcore/blazor/fundamentals/environments.md +++ b/aspnetcore/blazor/fundamentals/environments.md @@ -128,7 +128,7 @@ For more information on Blazor startup, see . Blazor WebAssembly apps can set the environment with the `blazor-environment` header. -In the following example for IIS, the custom header (`blazor-environment`) is added to the published `web.config` file. The `web.config` file is located in the `bin/Release/{TARGET FRAMEWORK}/publish` folder, where the placeholder `{TARGET FRAMEWORK}` is the target framework: +In the following example for IIS, the custom header (`blazor-environment`) is added to the published `web.config` file. The `web.config` file is located in the `bin/Release/{TARGET FRAMEWORK}/publish` folder, where the `{TARGET FRAMEWORK}` placeholder is the target framework: ```xml diff --git a/aspnetcore/blazor/fundamentals/static-files.md b/aspnetcore/blazor/fundamentals/static-files.md index c7642abe017f..7e01d2730d7c 100644 --- a/aspnetcore/blazor/fundamentals/static-files.md +++ b/aspnetcore/blazor/fundamentals/static-files.md @@ -5,7 +5,7 @@ description: Learn how to configure and manage static files for Blazor apps. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 06/11/2024 +ms.date: 07/08/2024 uid: blazor/fundamentals/static-files --- # ASP.NET Core Blazor static files @@ -35,27 +35,180 @@ Configure Map Static Assets Middleware by calling `MapStaticAssets` in the app's * When possible, serves [compressed](xref:performance/response-compression) static assets. * Works with a [Content Delivery Network (CDN)](https://developer.mozilla.org/docs/Glossary/CDN) (for example, [Azure CDN](https://azure.microsoft.com/services/cdn/)) to serve the app's static assets closer to the user. * [Minifies](https://developer.mozilla.org/docs/Glossary/Minification) the app's static assets. +* [Fingerprinting assets](https://developer.mozilla.org/docs/Glossary/Fingerprinting) to prevent reusing old versions of files. `MapStaticAssets` operates by combining build and publish processes to collect information about the static assets in the app. This information is utilized by the runtime library to efficiently serve the static assets to browsers. `MapStaticAssets` can replace in most situations. However, `MapStaticAssets` is optimized for serving the assets from known locations in the app at build and publish time. If the app serves assets from other locations, such as disk or embedded resources, should be used. -`MapStaticAssets` provides the following benefits not found with : +`MapStaticAssets` provides the following benefits that aren't available when calling : -* Build-time compression for all the assets in the app: [Gzip](https://tools.ietf.org/html/rfc1952) (`Content-Encoding: gz`) during development and Gzip with [Brotli](https://tools.ietf.org/html/rfc7932) (`Content-Encoding: br`) during publish. -* Content based `ETags` are generated for each static asset, which are [Base64](https://developer.mozilla.org/docs/Glossary/Base64)-encoded strings of the [SHA-256](xref:System.Security.Cryptography.SHA256) hashes of the static assets. This ensures that the browser only redownloads a file if its contents have changed. +* Build-time compression for all the assets in the app, including JavaScript (JS) and stylesheets but excluding image and font assets that are already compressed. [Gzip](https://tools.ietf.org/html/rfc1952) (`Content-Encoding: gz`) compression is used during development. Gzip with [Brotli](https://tools.ietf.org/html/rfc7932) (`Content-Encoding: br`) compression is used during publish. +* [Fingerprinting](https://developer.mozilla.org/docs/Glossary/Fingerprinting) for all assets at build time with a [Base64](https://developer.mozilla.org/docs/Glossary/Base64)-encoded string of the [SHA-256](xref:System.Security.Cryptography.SHA256) hash of each file's content. This prevents reusing an old version of a file, even if the old file is cached. Fingerprinted assets are cached using the [`immutable` directive](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#directives), which results in the browser never requesting the asset again until it changes. For browsers that don't support the `immutable` directive, a [`max-age` directive](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control#directives) is added. + * Even if an asset isn't fingerprinted, content based `ETags` are generated for each static asset using the fingerprint hash of the file as the `ETag` value. This ensures that the browser only downloads a file if its content changes (or the file is being downloaded for the first time). + * Internally, Blazor maps physical assets to their fingerprints, which allows the app to: + * Find automatically-generated Blazor assets, such as Razor component scoped CSS for Blazor's [CSS isolation feature](xref:blazor/components/css-isolation), and JS assets described by [JS import maps](https://developer.mozilla.org/docs/Web/HTML/Element/script/type/importmap). + * Generate link tags in the `` content of the page to preload assets. +* During [Visual Studio Hot Reload](/visualstudio/debugger/hot-reload) development testing: + * Integrity information is removed from the assets to avoid issues when a file is changed while the app is running. + * Static assets aren't cached to ensure that the browser always retrieves current content. + +When [Interactive WebAssembly or Interactive Auto render modes](xref:blazor/fundamentals/index#render-modes) are enabled: + +* Blazor creates an endpoint to expose the resource collection as a JS module. +* The URL is emitted to the body of the request as persisted component state when a WebAssembly component is rendered into the page. +* During WebAssembly boot, Blazor retrieves the URL, imports the module, and calls a function to retrieve the asset collection and reconstruct it in memory. The URL is specific to the content and cached forever, so this overhead cost is only paid once per user until the app is updated. +* The resource collection is also exposed at a human-readable URL (`_framework/resource-collection.js`), so JS has access to the resource collection for [enhanced navigation](xref:blazor/fundamentals/routing#enhanced-navigation-and-form-handling) or to implement features of other frameworks and third-party components. + +Map Static Assets Middleware doesn't provide features for minification or other file transformations. Minification is usually handled by custom code or [third-party tooling](xref:blazor/fundamentals/index#community-links-to-blazor-resources). Static File Middleware () is useful in the following situations that `MapStaticAssets` can't handle: * Applying a path prefix to Blazor WebAssembly static asset files, which is covered in the [Prefix for Blazor WebAssembly assets](#prefix-for-blazor-webassembly-assets) section. * Configuring file mappings of extensions to specific content types and setting static file options, which is covered in the [File mappings and static file options](#file-mappings-and-static-file-options) section. - +## Consume assets with Map Static File Middleware + +*This section applies to server-side Blazor apps.* + + + +Assets are consumed via the `ComponentBase.Assets` property, which resolves the fingerprinted URL for a given asset. In the following example, Bootstrap, the Blazor project template app stylesheet (`app.css`), and the [CSS isolation stylesheet](xref:blazor/components/css-isolation) are linked in a root component, typically the `App` component (`Components/App.razor`): + +```razor + + + +``` + +## Import maps + +*This section applies to server-side Blazor apps.* + +The `ImportMap` component represents an import map element (``) that defines the import map for module scripts. The `ImportMap` component is placed in `` content of the root component, typically the `App` component (`Components/App.razor`). + +```razor + +``` + +If a custom `ImportMapDefinition` isn't assigned to an `ImportMap` component, the import map is generated based on the app's assets. + +The following examples demonstrate custom import map definitions and the import maps that they create. + +Basic import map: + +```csharp +new ImportMapDefinition( + new Dictionary + { + { "jquery", "https://cdn.example.com/jquery.js" }, + }, + null, + null); +``` + +The preceding code results in the following import map: + +```json +{ + "imports": { + "jquery": "https://cdn.example.com/jquery.js" + } +} +``` + +Scoped import map: + +```csharp +new ImportMapDefinition( + null, + new Dictionary> + { + ["/scoped/"] = new Dictionary + { + { "jquery", "https://cdn.example.com/jquery.js" }, + } + }, + null); +``` + +The preceding code results in the following import map: + +```json +{ + "scopes": { + "/scoped/": { + "jquery": "https://cdn.example.com/jquery.js" + } + } +} +``` + +Import map with integrity: + +```csharp +new ImportMapDefinition( + new Dictionary + { + { "jquery", "https://cdn.example.com/jquery.js" }, + }, + null, + new Dictionary + { + { "https://cdn.example.com/jquery.js", "sha384-abc123" }, + }); +``` + +The preceding code results in the following import map: + +```json +{ + "imports": { + "jquery": "https://cdn.example.com/jquery.js" + }, + "integrity": { + "https://cdn.example.com/jquery.js": "sha384-abc123" + } +} +``` + +Combine import map definitions (`ImportMapDefinition`) with `ImportMapDefinition.Combine`. + +Import map created from a `ResourceAssetCollection` that maps static assets to their corresponding unique URLs: + +```csharp +ImportMapDefinition.FromResourceCollection( + new ResourceAssetCollection( + [ + new ResourceAsset( + "jquery.fingerprint.js", + [ + new ResourceAssetProperty("integrity", "sha384-abc123"), + new ResourceAssetProperty("label", "jquery.js"), + ]) + ])); +``` + +The preceding code results in the following import map: + +```json +{ + "imports": { + "./jquery.js": "./jquery.fingerprint.js" + }, + "integrity": { + "jquery.fingerprint.js": "sha384-abc123" + } +} +``` + :::moniker-end :::moniker range="< aspnetcore-9.0" @@ -66,6 +219,51 @@ Configure Static File Middleware to serve static assets to clients by calling ` `href` formats + +*This section applies to all .NET releases and Blazor apps.* + +The following tables summarize static file `` `href` formats by .NET release. + +:::moniker range=">= aspnetcore-6.0" + +For the location of `` content where static file links are placed, see . Static asset links can also be supplied using [`` components](xref:blazor/components/control-head-content) in individual Razor components. + +:::moniker-end + +:::moniker range="< aspnetcore-6.0" + +For the location of `` content where static file links are placed, see . + +:::moniker-end + +.NET 9 or later + +App type | `href` value | Examples +--- | --- | --- +Blazor Web App | `@Assets["{PATH}"]` | ``
`` +Blazor Server† | `@Assets["{PATH}"]` | ``
`` +Standalone Blazor WebAssembly | `{PATH}` | ``
`` + +.NET 8.x + +App type | `href` value | Examples +--- | --- | --- +Blazor Web App | `{PATH}` | ``
`` +Blazor Server† | `{PATH}` | ``
`` +Standalone Blazor WebAssembly | `{PATH}` | ``
`` + +.NET 7.x or earlier + +App type | `href` value | Examples +--- | --- | --- +Blazor Server† | `{PATH}` | ``
`` +Hosted Blazor WebAssembly‡ | `{PATH}` | ``
`` +Blazor WebAssembly | `{PATH}` | ``
`` + +†Blazor Server is supported in .NET 8 or later but is no longer a project template after .NET 7. +‡We recommend updating Hosted Blazor WebAssembly apps to Blazor Web Apps when adopting .NET 8 or later. + :::moniker range=">= aspnetcore-8.0" ## Static Web Asset Project Mode diff --git a/aspnetcore/blazor/host-and-deploy/webassembly-caching/index.md b/aspnetcore/blazor/host-and-deploy/webassembly-caching/index.md index 4077efbdcc32..ba97dc8f540a 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly-caching/index.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly-caching/index.md @@ -92,7 +92,7 @@ Placeholders: * `{PUBLISH OUTPUT FOLDER}`: The path to the app's `publish` folder or location where the app is published for deployment. > [!NOTE] -> When cloning the `dotnet/AspNetCore.Docs` GitHub repository, the `integrity.ps1` script might be quarantined by [Bitdefender](https://www.bitdefender.com) or another virus scanner present on the system. Usually, the file is trapped by a virus scanner's *heuristic scanning* technology, which merely looks for patterns in files that might indicate the presence of malware. To prevent the virus scanner from quarantining the file, add an exception to the virus scanner prior to cloning the repo. The following example is a typical path to the script on a Windows system. Adjust the path as needed for other systems. The placeholder `{USER}` is the user's path segment. +> When cloning the `dotnet/AspNetCore.Docs` GitHub repository, the `integrity.ps1` script might be quarantined by [Bitdefender](https://www.bitdefender.com) or another virus scanner present on the system. Usually, the file is trapped by a virus scanner's *heuristic scanning* technology, which merely looks for patterns in files that might indicate the presence of malware. To prevent the virus scanner from quarantining the file, add an exception to the virus scanner prior to cloning the repo. The following example is a typical path to the script on a Windows system. Adjust the path as needed for other systems. The `{USER}` placeholder is the user's path segment. > > ``` > C:\Users\{USER}\Documents\GitHub\AspNetCore.Docs\aspnetcore\blazor\host-and-deploy\webassembly\_samples\integrity.ps1 diff --git a/aspnetcore/blazor/host-and-deploy/webassembly.md b/aspnetcore/blazor/host-and-deploy/webassembly.md index 2447c1b04e71..e49f096f05d0 100644 --- a/aspnetcore/blazor/host-and-deploy/webassembly.md +++ b/aspnetcore/blazor/host-and-deploy/webassembly.md @@ -1148,7 +1148,7 @@ Placeholders: * `{PUBLISH OUTPUT FOLDER}`: The path to the app's `publish` folder or location where the app is published for deployment. > [!NOTE] -> When cloning the `dotnet/AspNetCore.Docs` GitHub repository, the `integrity.ps1` script might be quarantined by [Bitdefender](https://www.bitdefender.com) or another virus scanner present on the system. Usually, the file is trapped by a virus scanner's *heuristic scanning* technology, which merely looks for patterns in files that might indicate the presence of malware. To prevent the virus scanner from quarantining the file, add an exception to the virus scanner prior to cloning the repo. The following example is a typical path to the script on a Windows system. Adjust the path as needed for other systems. The placeholder `{USER}` is the user's path segment. +> When cloning the `dotnet/AspNetCore.Docs` GitHub repository, the `integrity.ps1` script might be quarantined by [Bitdefender](https://www.bitdefender.com) or another virus scanner present on the system. Usually, the file is trapped by a virus scanner's *heuristic scanning* technology, which merely looks for patterns in files that might indicate the presence of malware. To prevent the virus scanner from quarantining the file, add an exception to the virus scanner prior to cloning the repo. The following example is a typical path to the script on a Windows system. Adjust the path as needed for other systems. The `{USER}` placeholder is the user's path segment. > > ``` > C:\Users\{USER}\Documents\GitHub\AspNetCore.Docs\aspnetcore\blazor\host-and-deploy\webassembly\_samples\integrity.ps1 diff --git a/aspnetcore/blazor/security/includes/troubleshoot-server.md b/aspnetcore/blazor/security/includes/troubleshoot-server.md index 0ec5c40d2a9a..fdb2019bf716 100644 --- a/aspnetcore/blazor/security/includes/troubleshoot-server.md +++ b/aspnetcore/blazor/security/includes/troubleshoot-server.md @@ -74,8 +74,8 @@ One approach to prevent lingering cookies and site data from interfering with te * Mozilla Firefox: `C:\Program Files\Mozilla Firefox\firefox.exe` * In the **Arguments** field, provide the command-line option that the browser uses to open in InPrivate or Incognito mode. Some browsers require the URL of the app. * Microsoft Edge: Use `-inprivate`. - * Google Chrome: Use `--incognito --new-window {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). - * Mozilla Firefox: Use `-private -url {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). + * Google Chrome: Use `--incognito --new-window {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). + * Mozilla Firefox: Use `-private -url {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). * Provide a name in the **Friendly name** field. For example, `Firefox Auth Testing`. * Select the **OK** button. * To avoid having to select the browser profile for each iteration of testing with an app, set the profile as the default with the **Set as Default** button. diff --git a/aspnetcore/blazor/security/includes/troubleshoot-wasm.md b/aspnetcore/blazor/security/includes/troubleshoot-wasm.md index 84e31fdcfc00..c8096498314c 100644 --- a/aspnetcore/blazor/security/includes/troubleshoot-wasm.md +++ b/aspnetcore/blazor/security/includes/troubleshoot-wasm.md @@ -74,8 +74,8 @@ One approach to prevent lingering cookies and site data from interfering with te * Mozilla Firefox: `C:\Program Files\Mozilla Firefox\firefox.exe` * In the **Arguments** field, provide the command-line option that the browser uses to open in InPrivate or Incognito mode. Some browsers require the URL of the app. * Microsoft Edge: Use `-inprivate`. - * Google Chrome: Use `--incognito --new-window {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). - * Mozilla Firefox: Use `-private -url {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). + * Google Chrome: Use `--incognito --new-window {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). + * Mozilla Firefox: Use `-private -url {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). * Provide a name in the **Friendly name** field. For example, `Firefox Auth Testing`. * Select the **OK** button. * To avoid having to select the browser profile for each iteration of testing with an app, set the profile as the default with the **Set as Default** button. diff --git a/aspnetcore/blazor/security/server/additional-scenarios.md b/aspnetcore/blazor/security/server/additional-scenarios.md index defe3d07d94b..913155d0d654 100644 --- a/aspnetcore/blazor/security/server/additional-scenarios.md +++ b/aspnetcore/blazor/security/server/additional-scenarios.md @@ -58,7 +58,7 @@ builder.Services.Configure( [!INCLUDE[](~/includes/package-reference.md)] -Optionally, additional scopes are added with `options.Scope.Add("{SCOPE}");`, where the placeholder `{SCOPE}` is the additional scope to add. +Optionally, additional scopes are added with `options.Scope.Add("{SCOPE}");`, where the `{SCOPE}` placeholder is the additional scope to add. Define a token provider service that can be used within the Blazor app to resolve the tokens from [dependency injection (DI)](xref:blazor/fundamentals/dependency-injection). @@ -218,7 +218,7 @@ services.Configure(AzureADDefaults.OpenIdScheme, options = :::moniker range="< aspnetcore-8.0" -Optionally, additional scopes are added with `options.Scope.Add("{SCOPE}");`, where the placeholder `{SCOPE}` is the additional scope to add. +Optionally, additional scopes are added with `options.Scope.Add("{SCOPE}");`, where the `{SCOPE}` placeholder is the additional scope to add. Define a **scoped** token provider service that can be used within the Blazor app to resolve the tokens from [dependency injection (DI)](xref:blazor/fundamentals/dependency-injection). diff --git a/aspnetcore/blazor/security/webassembly/additional-scenarios.md b/aspnetcore/blazor/security/webassembly/additional-scenarios.md index 209d44ed9804..02261b56bea6 100644 --- a/aspnetcore/blazor/security/webassembly/additional-scenarios.md +++ b/aspnetcore/blazor/security/webassembly/additional-scenarios.md @@ -438,7 +438,7 @@ public class WeatherForecastClient :::moniker-end -In the preceding example, the `WeatherForecast` type is a static class that holds weather forecast data. The placeholder `{ASSEMBLY NAME}` is the app's assembly name (for example, `using static BlazorSample.Data;`). +In the preceding example, the `WeatherForecast` type is a static class that holds weather forecast data. The `{ASSEMBLY NAME}` placeholder is the app's assembly name (for example, `using static BlazorSample.Data;`). In the following example, is an extension in . Add the package to an app that doesn't already reference it. @@ -1370,7 +1370,7 @@ In the **:::no-loc text="Server":::** project's `Pages/_Host.cshtml` file, repla In the preceding example: -* The placeholder `{CLIENT APP ASSEMBLY NAME}` is the client app's assembly name (for example `BlazorSample.Client`). +* The `{CLIENT APP ASSEMBLY NAME}` placeholder is the client app's assembly name (for example `BlazorSample.Client`). * The conditional check for the `/authentication` path segment: * Avoids prerendering (`render-mode="WebAssembly"`) for authentication paths. * Prerenders (`render-mode="WebAssemblyPrerendered"`) for non-authentication paths. diff --git a/aspnetcore/blazor/security/webassembly/hosted-with-azure-active-directory-b2c.md b/aspnetcore/blazor/security/webassembly/hosted-with-azure-active-directory-b2c.md index d56aab42522a..755e88966053 100644 --- a/aspnetcore/blazor/security/webassembly/hosted-with-azure-active-directory-b2c.md +++ b/aspnetcore/blazor/security/webassembly/hosted-with-azure-active-directory-b2c.md @@ -308,7 +308,7 @@ builder.Services.AddScoped(sp => sp.GetRequiredService() .CreateClient("{PROJECT NAME}.ServerAPI")); ``` -The placeholder `{PROJECT NAME}` is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. +The `{PROJECT NAME}` placeholder is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. Support for authenticating users is registered in the service container with the 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). diff --git a/aspnetcore/blazor/security/webassembly/hosted-with-identity-server.md b/aspnetcore/blazor/security/webassembly/hosted-with-identity-server.md index e776bc5b65aa..de8f0d0c4497 100644 --- a/aspnetcore/blazor/security/webassembly/hosted-with-identity-server.md +++ b/aspnetcore/blazor/security/webassembly/hosted-with-identity-server.md @@ -240,7 +240,7 @@ In the app settings file (`appsettings.json`) at the project root, the `Identity } ``` -The placeholder `{ASSEMBLY NAME}` is the **:::no-loc text="Client":::** app's assembly name (for example, `BlazorSample.Client`). +The `{ASSEMBLY NAME}` placeholder is the **:::no-loc text="Client":::** app's assembly name (for example, `BlazorSample.Client`). ### Authentication package @@ -267,7 +267,7 @@ builder.Services.AddScoped(sp => sp.GetRequiredService() .CreateClient("{PROJECT NAME}.ServerAPI")); ``` -The placeholder `{PROJECT NAME}` is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. +The `{PROJECT NAME}` placeholder is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. > [!NOTE] > If you're configuring a Blazor WebAssembly app to use an existing Identity Server instance that isn't part of a hosted Blazor solution, change the base address registration from (`builder.HostEnvironment.BaseAddress`) to the server app's API authorization endpoint URL. diff --git a/aspnetcore/blazor/security/webassembly/hosted-with-microsoft-entra-id.md b/aspnetcore/blazor/security/webassembly/hosted-with-microsoft-entra-id.md index a2adc3d19254..b3ab4174d131 100644 --- a/aspnetcore/blazor/security/webassembly/hosted-with-microsoft-entra-id.md +++ b/aspnetcore/blazor/security/webassembly/hosted-with-microsoft-entra-id.md @@ -322,7 +322,7 @@ builder.Services.AddScoped(sp => sp.GetRequiredService() .CreateClient("{PROJECT NAME}.ServerAPI")); ``` -The placeholder `{PROJECT NAME}` is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. +The `{PROJECT NAME}` placeholder is the project name at solution creation. For example, providing a project name of `BlazorSample` produces a named of `BlazorSample.ServerAPI`. Support for authenticating users is registered in the service container with the 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). diff --git a/aspnetcore/blazor/security/webassembly/standalone-with-identity.md b/aspnetcore/blazor/security/webassembly/standalone-with-identity.md index 6f8bba72128a..1e1c761ab445 100644 --- a/aspnetcore/blazor/security/webassembly/standalone-with-identity.md +++ b/aspnetcore/blazor/security/webassembly/standalone-with-identity.md @@ -335,8 +335,8 @@ One approach to prevent lingering cookies and site data from interfering with te * Mozilla Firefox: `C:\Program Files\Mozilla Firefox\firefox.exe` * In the **Arguments** field, provide the command-line option that the browser uses to open in InPrivate or Incognito mode. Some browsers require the URL of the app. * Microsoft Edge: Use `-inprivate`. - * Google Chrome: Use `--incognito --new-window {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). - * Mozilla Firefox: Use `-private -url {URL}`, where the placeholder `{URL}` is the URL to open (for example, `https://localhost:5001`). + * Google Chrome: Use `--incognito --new-window {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). + * Mozilla Firefox: Use `-private -url {URL}`, where the `{URL}` placeholder is the URL to open (for example, `https://localhost:5001`). * Provide a name in the **Friendly name** field. For example, `Firefox Auth Testing`. * Select the **OK** button. * To avoid having to select the browser profile for each iteration of testing with an app, set the profile as the default with the **Set as Default** button.