.NET Core: Integrate Logto with MVC app

Prerequisites​

• A Logto Cloud account or a self-hosted Logto (Check out the ⚡ Get started guide to create one if you don't have).
• A Logto traditional web application created.

Installation​

Add the NuGet package to your project:

dotnet add package Logto.AspNetCore.Authentication

Integration​

Add Logto authentication​

Open Startup.cs (or Program.cs) and add the following code to register Logto authentication services:

using Logto.AspNetCore.Authentication;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddLogtoAuthentication(options =>
{
  options.Endpoint = builder.Configuration["Logto:Endpoint"]!;
  options.AppId = builder.Configuration["Logto:AppId"]!;
  options.AppSecret = builder.Configuration["Logto:AppSecret"];
});

The AddLogtoAuthentication method will do the following things:

• Set the default authentication scheme to LogtoDefaults.CookieScheme.
• Set the default challenge scheme to LogtoDefaults.AuthenticationScheme.
• Set the default sign-out scheme to LogtoDefaults.AuthenticationScheme.
• Add cookie and OpenID Connect authentication handlers to the authentication scheme.

Sign-in and sign-out flows​

Before we proceed, there are two confusing terms in the .NET Core authentication middleware that we need to clarify:

1. CallbackPath: The URI that Logto will redirect the user back to after the user has signed in (the "redirect URI" in Logto)
2. RedirectUri: The URI that will be redirected to after necessary actions have been taken in the Logto authentication middleware.

The sign-in process can be illustrated as follows:

Similarly, .NET Core also has SignedOutCallbackPath and RedirectUri for the sign-out flow.

For the sack of clarity, we'll refer them as follows:

Configure redirect URIs​

First, let's configure the Logto redirect URI. Add the following URI to the "Redirect URIs" list in the Logto application details page:

http://http://localhost:3000//Callback

To configure the Logto post sign-out redirect URI, add the following URI to the "Post sign-out redirect URIs" list in the Logto application details page:

http://http://localhost:3000//SignedOutCallback

Change the default paths​

The Logto redirect URI has a default path of /Callback, and the Logto post sign-out redirect URI has a default path of /SignedOutCallback.

You can leave them as are if there's no special requirement. If you want to change it, you can set the CallbackPath and SignedOutCallbackPath property for LogtoOptions:

builder.Services.AddLogtoAuthentication(options =>
{
  // Other configurations...
  options.CallbackPath = "/Foo";
  options.SignedOutCallbackPath = "/Bar";
});

Remember to update the value in the Logto application details page accordingly.

Implement sign-in and sign-out buttons​

First, add actions methods to your Controller, for example:

public class HomeController : Controller
{
  public IActionResult SignIn()
  {
    // This will redirect the user to the Logto sign-in page.
    return Challenge(new AuthenticationProperties { RedirectUri = "/" });
  }

  // Use the `new` keyword to avoid conflict with the `ControllerBase.SignOut` method
  new public IActionResult SignOut()
  {
    // This will clear the authentication cookie and redirect the user to the Logto sign-out page
    // to clear the Logto session as well.
    return SignOut(new AuthenticationProperties { RedirectUri = "/" });
  }
}

Then, add the links to your View:

<p>Is authenticated: @User.Identity?.IsAuthenticated</p>
@if (User.Identity?.IsAuthenticated == true) {
  <a asp-controller="Home" asp-action="SignOut">Sign out</a>
} else {
  <a asp-controller="Home" asp-action="SignIn">Sign in</a>
}

It will show the "Sign in" link if the user is not authenticated, and show the "Sign out" link if the user is authenticated.

Checkpoint: Test your application​

Now, you can test your application:

1. Run your application, you will see the sign-in button.
2. Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
3. After you signed in, you will be redirected back to your application and see the sign-out button.
4. Click the sign-out button to clear local storage and sign out.

Get user information​

Display user information​

To know if the user is authenticated, you can check the User.Identity?.IsAuthenticated property.

To get the user profile claims, you can use the User.Claims property:

var claims = User.Claims;

// Get the user ID
var userId = claims.FirstOrDefault(c => c.Type == LogtoParameters.Claims.Subject)?.Value;

See LogtoParameters.Claims for the list of claim names and their meanings.

Request additional claims​

You may find some user information are missing in the returned object from User.Claims. This is because OAuth 2.0 and OpenID Connect (OIDC) are designed to follow the principle of least privilege (PoLP), and Logto is built on top of these standards.

By default, limited claims are returned. If you need more information, you can request additional scopes to access more claims.

Here's a non-normative example the scope - claim relationship:

Logto SDK will always request three scopes: openid, profile, and offline_access.

To request additional scopes, you can configure the Scopes property in the options object:

builder.Services.AddLogtoAuthentication(options =>
{
  // ...
  options.Scopes = new string[] {
    LogtoParameters.Scopes.Email,
    LogtoParameters.Scopes.Phone
  }
});

Then you can access the additional claims via User.Claims:

var claims = User.Claims;

// Get the user email
var email = claims.FirstOrDefault(c => c.Type == LogtoParameters.Claims.Email)?.Value;

Claims that need network request​

To prevent bloating the user object, some claims require network requests to fetch. For example, the custom_data claim is not included in the user object even if it's requested in the scopes. To fetch these claims, you can set GetClaimsFromUserInfoEndpoint to true in the options object:

builder.Services.AddLogtoAuthentication(options =>
{
  // ...
  options.GetClaimsFromUserInfoEndpoint = true;
});

Scopes and claims​

Logto uses OIDC scopes and claims conventions to define the scopes and claims for retrieving user information from the ID token and OIDC userinfo endpoint. Both of the "scope" and the "claim" are terms from the OAuth 2.0 and OpenID Connect (OIDC) specifications.

Here's the list of supported scopes and the corresponding claims:

openid

profile

Other standard claims include family_name, given_name, middle_name, nickname, preferred_username, profile, website, gender, birthdate, zoneinfo, and locale will be also included in the profile scope without the need for requesting the userinfo endpoint. A difference compared to the claims above is that these claims will only be returned when their values are not empty, while the claims above will return null if the values are empty.

email

phone

address

Please refer to the OpenID Connect Core 1.0 for the details of the address claim.

custom_data

identities

urn:logto:scope:organizations

urn:logto:scope:organization_roles

Considering performance and the data size, if "Needs userinfo?" is "Yes", it means the claim will not show up in the ID token, but will be returned in the userinfo endpoint response.

API resources​

We recommend to read 🔐 Role-Based Access Control (RBAC) first to understand the basic concepts of Logto RBAC and how to set up API resources properly.

Configure API resource in your app​

Once you have set up the API resources, you can add them when configuring Logto in your app:

builder.Services.AddLogtoAuthentication(options =>
{
  // ...
  options.Resource = "https://<your-api-resource-indicator>";
});

Each API resource has its own permissions (scopes).

For example, the https://shopping.your-app.com/api resource has the shopping:read and shopping:write permissions, and the https://store.your-app.com/api resource has the store:read and store:write permissions.

To request these permissions, you can add them when configuring Logto in your app:

builder.Services.AddLogtoAuthentication(options =>
{
  // ...
  options.Resource = "https://shopping.your-app.com/api";
  options.Scopes = new string[] {
    "openid",
    "profile",
    "offline_access",
    "read",
    "write"
  };
});

You may notice that scopes are defined separately from API resources. This is because Resource Indicators for OAuth 2.0 specifies the final scopes for the request will be the cartesian product of all the scopes at all the target services.

After the successful sign-in, Logto will issue proper scopes to API resources according to the user's roles.

Fetch tokens​

Sometimes you may need to fetch the access token or ID token for API calls. You can use the GetTokenAsync method to fetch the tokens:

var accessToken = await HttpContext.GetTokenAsync(LogtoParameters.Tokens.AccessToken);
var idToken = await HttpContext.GetTokenAsync(LogtoParameters.Tokens.IdToken);

No need to worry about the token expiration, the authentication middleware will automatically refresh the tokens when necessary.

Note the access token above is an opaque token for the userinfo endpoint in OpenID Connect, which is not a JWT token. If you have specified the API resource, you need to use LogtoParameters.Tokens.AccessTokenForResource to fetch the access token for the API resource:

var accessToken = await HttpContext.GetTokenAsync(LogtoParameters.Tokens.AccessTokenForResource);

This token will be a JWT token with the API resource as the audience.

Further readings​

• Customize sign-in experience
• Configure connectors
• Protect your API