Skip to content

thomasduft/openiddict-ui

Repository files navigation

Type Description Badge
Build Build status build
OpenIddict-UI API API's for managing OpentIddict Scopes and Applications. NuGet Release
OpentIddict-UI Identity API API's for managing ASP.NET Core Identity types (Accounts, Roles, etc.). NuGet Release

OpenIddict UI

A first step to provide some headless UI features to the OpenIddict stack.

Please note that this project does not provide you a ready to use UI instead provides you the required services that allow you to build one. You can use the samples as a starting point though.

Currently it provides API's for managing Scopes and Applications.

On top of that it ships API's for the Usermanagement when using ASP.NET Core Identity.

As a goodie the samples demonstrates this features by an Angular SPA client that uses the Authorization Code flow.

SPA Client

Running the sample

Assuming you downloaded the sources and opened VS Code in the root repo directory you should be good to go! Ahh and of course you need .NET Core and node.js installed on your development environment.

Running the sample Server

  1. Open the integrated terminal in VS Code and type
dotnet build

That ensures you are able to build the dotnet related stuff!

  1. Go to the VS Code Debug tab (Ctrl+Shift+D) and run the Server project.

Develop the sample Client (Angular based frontend)

  1. Make sure you installed Node.js.

If you develop in a devcontainer then you are already good to go!

  1. First run the backend (see previous chapter)

  2. After the Server is running navigate within your favorite command line to the Client directory and type:

npm i

This will install all the Client's required dependencies.

npm run start

This will start Angular's development server.

  1. Now open your browser of choice and point to the well known Angular dev url.
http://localhost:4200

You should see now the login screen. You can now login with the pre-configured administrator users account which is:

Using it

Follow the original setup of the OpenIddict in the Startup.ConfigureServices(...) - method and add your required additional extension hooks AddUIStore(...), AddUIApis(...), AddUIIdentityStore<TIdentityUser>(...) and AddUIIdentityApis<TIdentityUser>().

...
services.AddOpenIddict()
  // Register the OpenIddict core components.
  .AddCore(options =>
  {
    ...
  })
  // Register the OpenIddict server components.
  .AddServer(options =>
  {
    ...
  })
  // Register the OpenIddict validation components.
  .AddValidation(options =>
  {
    ...
  })
  // Register the EF based UI Store for OpenIddict related entities.
  .AddUIStore(options =>
  {
    options.OpenIddictUIContext = builder =>
      builder.UseSqlite(Configuration.GetConnectionString("DefaultConnection"),
        sql => sql.MigrationsAssembly(typeof(Startup)
                  .GetTypeInfo()
                  .Assembly
                  .GetName()
                  .Name));
  })
  // Register the APIs for the EF based UI Store based on OpenIddict.
  .AddUIApis(options =>
  {
    // Tell the system about the allowed Permissions it is built/configured for.
    options.Permissions = new List<string>
    {
      Permissions.Endpoints.Authorization,
      Permissions.Endpoints.Logout,
      Permissions.Endpoints.Token,
      Permissions.GrantTypes.AuthorizationCode,
      Permissions.GrantTypes.Password,
      Permissions.GrantTypes.RefreshToken,
      Permissions.ResponseTypes.Code,
      Permissions.Scopes.Email,
      Permissions.Scopes.Profile,
      Permissions.Scopes.Roles,
      Permissions.Prefixes.Scope + "demo_api"
    }
  })
  // Register the EF based UI Store for the ASP.NET Identity related entities.
  .AddUIIdentityStore<ApplicationUser>(options =>
  {
    options.OpenIddictUIIdentityContext = builder =>
     builder.UseSqlite(Configuration.GetConnectionString("DefaultConnection"),
       sql => sql.MigrationsAssembly(typeof(Startup)
                 .GetTypeInfo()
                 .Assembly
                 .GetName()
                 .Name));
  })
  // Register the APIs for the EF based UI Store based on ASP.NET Identity.
  .AddUIIdentityApis<ApplicationUser>();
...

Change the type of primary key used for IdentityUser

If your ApplicationUser class derives from an IdentityUser class where the key type is specified (e.g. IdentityUser<Guid>) this key must also be supplied to AddUIIdentityStore and AddUIIdentityApis. e.g.

An example project using INT as the primary key is included in the samples/ServerWithCustomKey project.

...
  .AddUIIdentityStore<ApplicationUser, int>(options =>
  {
    ...
  })
  // Register the APIs for the EF based UI Store based on ASP.NET Identity.
  .AddUIIdentityApis<ApplicationUser, int>();
...

Thoughts and ideas

The project is still very young and there are a lot of ideas like:

  • Provide API's for the Authorization and Token entities (if then really required).
  • Provide a ASP.NET Razor Page based UI.
  • Possibility to manage translated display names based on supported languages etc.