This walkthrough will demonstrate how to use the Membership microservices to add authentication to your website
From a docker enabled command prompt
docker network create mem_demo-net
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
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
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
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
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.
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
};
});
}]);
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'
Thats the end of this walk-through. The next walkthrough will be to add user management to the portal.
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