Add authentication to your website

using the Identity Microservice

This walkthrough will demonstrate how to use the Membership microservices to add authentication to your website

  1. Create a Docker network
  2. Start a Mongo DB Service
  3. Start a Rabbit MQ Service
  4. Start a Membership Microservice
  5. Start an Identity Microservice
  6. Clone SPA website template
  7. Configure website for authentication
  8. Add login view

1. Create a Docker network

From a docker enabled command prompt

docker network create mem_demo-net

2. Start a Mongo DB Service

From a docker enabled command prompt start up a Mongo DB instance

docker run -p 27017:27017 -v mdb_data:/data/db --name mem_demo_db --network=mem_demo-net -d mongo:4.1.5-xenial

You should now be able to browse the database at localhost:27017 via a MongoDB shell or a client driver

3. Start a Rabbit MQ Service

From a docker enabled command prompt start up a Rabbit MQ instance

docker run -p 5672:5672 -p 15672:15672 -v rmq_data:/var/lib/rabbitmq -h rmq --name mem_demo_rmq --network=mem_demo-net -d rabbitmq:3-management

You should now be able to browse the management website at http://localhost:15672

4. Start an Intalex Membership Microservice

From a docker enabled command prompt start up an Intalex Membership instance

docker run -p 54291:80 -e Services:MongoDb:DatabaseServer=mongodb://mem_demo_db/Membership -e Services:RabbitMq:Broker=amqp://mem_demo_rmq/ --network=mem_demo-net --name mem_demo_mem -d docker.reg.srfsys.com/intalex/mem-mem:0.1.0.a86b191

You should now be able to browse the API index discovery at http://localhost:54291

When the service starts it pre-populates the database with a default admin login. The password is shown in the docker startup log, use the following to get the password:

docker logs mem_demo_mem

There will be a line logged which looks like Creating default password: 'abcdef'

If the default password is lost or forgotten, another can be created by removing the data in the MongoDB database and redoing this step

5. Start an Intalex Identity Microservice

From a docker enabled command prompt start up an Intalex Identity instance

docker run -p 53290:80 -e Services:MongoDb:DatabaseServer=mongodb://mem_demo_db/Membership --network=mem_demo-net --name mem_demo_id -d docker.reg.srfsys.com/intalex/mem-id:0.1.0.a86b191

You should now be able to browse the API index discovery at http://localhost:53290

6. Clone SPA website template

From a git enable command prompt clone the repository

git clone https://github.com/i5x/core_angular_spa.git ID_Demo

At the command prompt, cd to the directory just cloned then cd into the src\Intalex.Public.Web directory. Install modules with

npm install

Open Visual Studio (2017 or above) and open the .sln file in the folder just cloned (ID_Demo/Intalex.Public.Web.sln). Go to task runner explorer and ensure that copy:js has run, watch:css has run and webpack:dev has run. Then the project can be run using ctrl+F5. If everything is successful the template website should be shown in a browser window.

7. Configure website for authentication

From a command prompt add auth module using npm in the 'src\Intalex.Public.Web' directory

npm install @intalex/auth --save

In Visual Studio open 'src\Intalex.Public.Web\Scripts\main.ts'

At the top add the following imports

import { AuthenticationProvider, IAuthenticationProvider, AuthorizationFactory, IAuthorizationFactory, IntalexUser, JWT, Claims, ClaimTypes } from '@intalex/auth';

In the dependencies part of the module declaration add in '@intalex/auth'

var mod = angular.module("ix.spa.portal", ['ui.router', 'ix.spa.framework', '@intalex/auth']);

Add the following configuration section in main.ts, around line 30


  mod.config([AuthenticationProvider.NAME + "Provider",
  (authConfig: IAuthenticationProvider) => {
      authConfig.setApiUrl('/api/id');
      authConfig.setApiRequestFieldUsername('LoginName');//This is the field used in the auth request for the username
      authConfig.setApiRequestFieldPassword('Password');//This is the field used in the auth request for the password
      authConfig.setLoginRedirectState(Constants.ViewStates.Home);
      authConfig.addTokenMapper(fromApi => {
          let user = JWT.DecodePrincipal<IntalexUser>(fromApi.accessToken);
          let id = Claims.FindValueByType(user.Claims, ClaimTypes.NameIdentifier, user.LoginName);
          let name = Claims.FindValueByType(user.Claims, ClaimTypes.Name, user.LoginName);
          let roles = Claims.FindValuesByType(user.Claims, ClaimTypes.Role);
          return {
              id: id,
              name: name,
              token: fromApi.accessToken,
              expires: fromApi.expires,
              roles: roles
          };
      });
  }]);

8. Add login view

Open 'src\Intalex.Public.Web\views\home\index.cshtml' and add the following before the closing div

    <ix-login-view></ix-login-view>    

Now we can test the login function. Run the website and on the home page you should now see the login panel.

Enter 'admin' as the user and the password found above when starting the membership api. Press the login button and if everything is successful you should see 'You are signed in'

9. Wrapup

Thats the end of this walk-through. The next walkthrough will be to add user management to the portal.

10. Cleanup

To stop and remove all the docker containers run the following:


docker stop mem_demo_id
docker stop mem_demo_mem
docker stop mem_demo_rmq
docker stop mem_demo_db
docker rm mem_demo_id
docker rm mem_demo_mem
docker rm mem_demo_rmq
docker rm mem_demo_db
docker network rm mem_demo-net