OpenIddict with Angular

An authentication and authorization example with two identity servers, an Angular client and a resource api. The two servers are based in OpenIddict.

Why use OpenIddict for the identity servers?

There are a lot of identity servers, ones of them are made specifically for the .NET ecosystem and others are based in other languages, but can be used too because the identity server should be an independent server specially if we want a SSO (single sign on) approach.

If you think that you will need to personalize the Identity, is better to use a Identity solution based in your principal stack. For .NET, the principals Identity solutions are AAD(Azure Active Directory), Identity Server and OpenIddict.

• AAD: Is SaaS hosted and free for the first 50000 active user. The const is that you will be tied to Azure.
• Identity Server: Is the most popular, but actually you will have to pay is you need more than 4 client in an enterprise environment. If you think in microservices and a free framework, this isn´t a good solution.
• OpenIddict: Is a library used to create identity servers. In these days has become more popular because is free. Popular frameworks like OrchardCore used it.

So, for this sample I choose OpenIddict library for the below reasons:

• Not tied to a cloud provider.
• It's free.
• It's highly customizable.
• It's .NET ecosytem friendly.

Structure

The solution has 4 projects:

OrchardOpenId

It's an identity server. It's an Orchard Core project with the OpenId module configured. It's based on OpenIddict-core and as the author recommends is a good way to configure a simple and easy identity server.

When you run the project, you can load the identity.recipe.json choosing it in configuration-Recipes. In this way all the configuration related with OpenId will be configured automatically.

OpenIdServer

It's an other identity server. I've used OpenIddict-core and the Velusia sample

Used .Net self-contained UI for Identity. In this way the default views are generated automatically.

For personalization of login and registry I have used the identity scaffold that generates the views in Areas folder.

AngularOpenId

It's a simple Angular app to test how to login and logout with a code flow + PKCE and silent refresh approach. For the authentication and authorization process I use angular-oauth2-oidc library by Manfred Steyer.

The project has two guards that only let the principal-feature and optional-feature modules be lazy loaded if the user is authenticated.

principal-feature module

The principal-feature module will redirect to the login page in the identity server if the user is not authenticated.

A button will be shown if the user has an administrator role. For this, a hasRole structural directive is used.

optional-feature module

The optional-feature module will redirect to a noauth page if the user is not authenticated.

When the user is authenticated, a request to the example api will be made in order to retrieve the weather forecast. Only if the user id contains the forecast role, the request will be returned with the response.

ssl

Follow the below steps to setup the HTTPS in development:

1. Execute the CreateAngularDevelopmentCertificate to generate the certificate files (dev_localhost.key, dev_localhost.pem, dev_localhost.pfx).
2. Copy the generated files to ssl folder at root level in angular-openid project
3. Add ssl configuration to angular.json file

    "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "configurations": {
        "production": {
            "browserTarget": "angular-openid:build:production"
        },
        "development": {
            "browserTarget": "angular-openid:build:development",
   +        "ssl": true,
   +        "sslKey": "ssl/dev_localhost.key",
   +        "sslCert": "ssl/dev_localhost.pem"
        }
    },
    "defaultConfiguration": "development"
    },

4. Add a script to package.json to have the posibility of execute the app without ssl

    "start": "ng serve --ssl=false --open",
    "start-with-ssl": "ng serve --open",

5. Modify the cors configuration in startup.cs file in OrchardOpenId project

    services.AddCors(options =>
    {
        options.AddPolicy(name: CORS_POLICY,
                            builder =>
                            {
                                builder.WithOrigins("https://localhost:4200");
                                builder.AllowAnyMethod();
                                builder.AllowAnyHeader();
                            });
    });

6. In Orchard dashboard, inside OpenID Connect option, choose applications and edit angularClient app. Update the Redirect and Post Logout Redirect uris.

Example API

The example API is prepaired to work with the two identity server projects.

For OrchardOpenId the JWT bearer schema is used and for OpendIdServer, the OpenIddict schema is used.

In my opinion the OpenIddict schema is a better solution because use introspection to secure the connection and is the recommeded approach with the OpenIddict library.

A forecastPolicy is used to authorize the user if forecast is a contained scope.

CreateAngularDevelopmentCertificate

It's an small console program to generate the certificate files to secure the Angular SPA application. I've followed the DamienBod approach

Run the example

1. Open a terminal with OpenIdServer or OrchardServer root folder.
2. Run dotnet watch run
3. Open a terminal with ExampleApi root folder.
4. Run dotnet watch run
5. Follow the steps to generate the certificates
6. Open a terminal with angular-openId root folder.
7. Run npm install
8. Run npm run start-with-ssl

Links

• OpenID Connect Flows
• OAuth is Not User Authorization
• Identity vs Permissions: Identity is universal, whereas permissions are application specific
• SPAs are dead
• SPA necromancy
• Security in Angular series
• Implementing openId code flow with PKCE using OpenIdDict and angular
• angular-oauth2-oidc
• Example angular-oauth2-oidc with AuthGuard