Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update README.md #575

Merged
merged 1 commit into from
Jan 8, 2024
Merged

Update README.md #575

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 76 additions & 65 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,80 +8,89 @@ The right way to use OpenIdConnect on Blazor.

2) Include `Blorc.Core/injector.js` the index.html file:

<head>
...
<script src="_content/Blorc.Core/injector.js"></script>
...
</head>
```html
<head>
<!-- ... -->
<script src="_content/Blorc.Core/injector.js"></script>
<!-- ... -->
</head>
```

3) Update App.razor content like this:

@using Microsoft.AspNetCore.Components.Authorization

<CascadingAuthenticationState>
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>
```razor
@using Microsoft.AspNetCore.Components.Authorization

<CascadingAuthenticationState>
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>
```

4) Add the required service and update Program.cs file as follow:

// Add access token delegating handler to registered http clients
var baseUrl = builder.HostEnvironment.BaseAddress;
builder.Services
.AddHttpClient<WeatherForecastHttpClient>(client => client.BaseAddress = new Uri(baseUrl))
.AddAccessToken();

// Registering required services
builder.Services.AddBlorcCore();
builder.Services.AddAuthorizationCore();
builder.Services.AddBlocOpenIdConnect(
options =>
{
builder.Configuration.Bind("IdentityServer", options);
});

var webAssemblyHost = builder.Build();

await webAssemblyHost
.ConfigureDocumentAsync(
async documentService =>
{
await documentService.InjectBlorcCoreJsAsync();
await documentService.InjectOpenIdConnectAsync();
});

await webAssemblyHost.RunAsync();
```csharp
// Add access token delegating handler to registered http clients
var baseUrl = builder.HostEnvironment.BaseAddress;
builder.Services
.AddHttpClient<WeatherForecastHttpClient>(client => client.BaseAddress = new Uri(baseUrl))
.AddAccessToken();

// Registering required services
builder.Services.AddBlorcCore();
builder.Services.AddAuthorizationCore();
builder.Services.AddBlorcOpenIdConnect(
options =>
{
builder.Configuration.Bind("IdentityServer", options);
});

var webAssemblyHost = builder.Build();

await webAssemblyHost
.ConfigureDocumentAsync(
async documentService =>
{
await documentService.InjectBlorcCoreJsAsync();
await documentService.InjectOpenIdConnectAsync();
});

await webAssemblyHost.RunAsync();
```

5) Add a configuration file `wwwroot\appsettings.json`

> NOTE: The Authorization Code Flow with Proof Key for Code Exchange (PKCE) is an authorization code flow to prevent CSRF and authorization code injection attacks and it is the only supported method. Use the configuration values as shown below.

{
"IdentityServer": {
"ResponseType": "code",
"Scope": "openid profile %API-NAME%",
"RedirectUri": "%APPLICATION_URL%",
"PostLogoutRedirectUri": "%APPLICATION_URL%",
"Authority": "%IDENTITY_SERVER_URL%",
"ClientId": "%CLIENT_ID%",
"AutomaticSilentRenew": true | false,
"FilterProtocolClaims": true,
"LoadUserInfo": true
}
}
> [!NOTE]
> The Authorization Code Flow with Proof Key for Code Exchange (PKCE) is an authorization code flow to prevent CSRF and authorization code injection attacks and it is the only supported method. Use the configuration values as shown below.

```jsonc
{
"IdentityServer": {
"ResponseType": "code",
"Scope": "openid profile %API-NAME%",
"RedirectUri": "%APPLICATION_URL%",
"PostLogoutRedirectUri": "%APPLICATION_URL%",
"Authority": "%IDENTITY_SERVER_URL%",
"ClientId": "%CLIENT_ID%",
"AutomaticSilentRenew": true, // or `false`
"FilterProtocolClaims": true,
"LoadUserInfo": true
}
}
```

6) Use the following guides as reference for identity server configuration.

- Authorization Code flow with PKCE (Keycloak) - https://www.appsdeveloperblog.com/pkce-verification-in-authorization-code-grant/
- PKCE Verification in Authorization Code Grant (Auth0) - https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-proof-key-for-code-exchange-pkce
- [Authorization Code flow with PKCE (Keycloak)](https://www.appsdeveloperblog.com/pkce-verification-in-authorization-code-grant/)
- [PKCE Verification in Authorization Code Grant (Auth0)](https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-proof-key-for-code-exchange-pkce)


## Run demo app
Expand All @@ -93,8 +102,10 @@ The right way to use OpenIdConnect on Blazor.

2) Open a command line console a run the following commands

> cd %CLONE_DIR%\deployment\tye
> tye run .\backend-tye.yaml
```bash
> cd %CLONE_DIR%\deployment\tye
> tye run .\backend-tye.yaml
```

3) Run the InitializeKeycloakAsync test of the Environment class in the test project. This will setup the required clients, and client scope for the demo.

Expand All @@ -104,4 +115,4 @@ The right way to use OpenIdConnect on Blazor.

| UserName | Password |
|----------|--------------|
| admin | Password123! |
| admin | Password123! |