gbernalmulti/openiddict-ui

A headless UI for the openIddict-core stack.

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.

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 Server

1. Open the integrated terminal in VS Code and type

dotnet build

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

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

3. 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.

4. 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:

• E-Mail: [email protected]
• Password: Pass123$

Using it

Follow the original setup of the OpenIddict in the Startup.ConfigureServices(...) - method and add the two additional extension hooks AddUIStore(...) and AddUIApis<TIdentityUser>(...) and you should be good to go.

...
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
  .AddUIStore(options =>
  {
    options.OpenIddictUIContext = builder =>
      builder.UseSqlite(Configuration.GetConnectionString("DefaultConnection"),
        sql => sql.MigrationsAssembly(typeof(Startup)
                  .GetTypeInfo()
                  .Assembly
                  .GetName()
                  .Name));
  })
  // Register the API for the EF and ASP.NET Identity based UI Store
  .AddUIApis<ApplicationUser>(new OpenIddictUIApiOptions
  {
    // Tell the system about the allowed Permissions it is built/configured for.
    Permissions =
    {
      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"
    }
  });
  
...

Thoughts and ideas

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

• Separating the ASP.NET Core Identity API's from the OpenIddict API's.
• 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.