Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wildermedeiros/BlazorAppWasmAuth
Blazor WebAssembly Standalone App with OIDC Authentication
https://github.com/wildermedeiros/BlazorAppWasmAuth
blazor-webassembly keycloak-provider oidc-authentication
Last synced: 3 months ago
JSON representation
Blazor WebAssembly Standalone App with OIDC Authentication
- Host: GitHub
- URL: https://github.com/wildermedeiros/BlazorAppWasmAuth
- Owner: wildermedeiros
- License: mit
- Created: 2024-05-02T19:18:13.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-05-03T20:16:16.000Z (6 months ago)
- Last Synced: 2024-06-19T21:16:37.758Z (5 months ago)
- Topics: blazor-webassembly, keycloak-provider, oidc-authentication
- Language: HTML
- Homepage:
- Size: 130 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-blazor - BlazorWasmOidcKeycloak -  Blazor WebAssembly application using OpenID Connect (OIDC) authentication with Microsoft Identity and Keycloak. (Sample Projects / Authentication)
README
## Blazor WebAssembly Standalone App with OIDC Authentication
This steps provides instructions for setting up a standalone Blazor WebAssembly application using OpenID Connect (OIDC) authentication with Microsoft Identity.
### Prerequisites
- Visual Studio or VSCode;
- Docker;
- Keycloak configuration.
### Setup
**1. Create/Update Project:**
- To create a new Blazor WebAssembly project, use the appropriate template available in Visual Studio or via the CLI.
- To add OIDC authentication to an existing project, include the dependency `Microsoft.AspNetCore.Components.WebAssembly.Authentication`.
> **Note: It is more convenient to create a new project based on Microsoft Identity.**
**2. Setup authentication in the `Program.cs`:**
Add the following code block to your `Program.cs` file to set up OIDC authentication:
```cs
builder.Services.AddOidcAuthentication(options =>
{
builder.Configuration.Bind("Keycloak", options.ProviderOptions);
options.ProviderOptions.ResponseType = OpenIdConnectResponseType.Code;
}).AddAccountClaimsPrincipalFactory();
```
> **Note: `CustomAccountFactory` is a class that inherits from `AccountClaimsPrincipalFactory` and is responsible for creating the user from the authentication process.**
**3. Configure the identity provider in `appsettings.json`:**
In the **wwwroot** directory of your application, update the `appsettings.json` file with the settings of your OIDC authentication server as shown below:
```json
"Keycloak": {
"Authority": "http://localhost:8080/realms/wilder",
"ClientId": "wasm"
}
```
### References
[Secure an ASP.NET Core Blazor WebAssembly standalone app with the Authentication library](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-authentication-library?view=aspnetcore-8.0&tabs=visual-studio)
[ASP.NET Core Blazor WebAssembly additional security scenarios](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/additional-scenarios?view=aspnetcore-8.0)
[Microsoft Entra (ME-ID) groups, Administrator Roles, and App Roles](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/microsoft-entra-id-groups-and-roles?view=aspnetcore-8.0&pivots=graph-sdk-4)
[Use Keycloak as Identity Provider from Blazor WebAssembly (WASM) applications](https://nikiforovall.github.io/blazor/dotnet/2022/12/08/dotnet-keycloak-blazorwasm-auth.html)
[Creating a client application](https://www.keycloak.org/docs/latest/authorization_services/index.html#_resource_server_create_client)
[Using OpenID Connect to secure applications and services](https://www.keycloak.org/docs/latest/securing_apps/index.html#_oidc)
### Examples
