1.4.0 • Public • Published


    An identification management solution implemented using Angular, Express, Passport, node-authorization, and JSON-On-Relations.

    How to Use

    UI-Logon contains 3 parts:

    1. "ui-logon-angular" is an Angular reusable component. You can use it to compose your logon page.
    2. "Identification Apps" contains various Apps which are used to maintain identification objects, which may include users, permissions, profiles, app, app category, and authorization objects.
    3. "ui-logon" is a NodeJS component which contains backend logic, like routes, authentication, and authorization.

    You can leverage the 3 parts separately or in combinations.


    1. Install it to your angular project:
       $ npm install ui-logon-angular --save
    2. In "app.module.ts", import the "LogonModule" from "ui-logon-angular":
      import {LogonModule} from 'ui-logon-angular';
        declarations: [
        imports: [
        providers: [],
        bootstrap: [AppComponent]
      export class AppModule { } 
    3. In "app.component.html", add the "dk-logon" template:
      <dk-logon [redirectUrl]="'https://github.com/VinceZK/json-on-relations'"></dk-logon>
    4. Run your Angular project. Hopefully, you will see following UI:

    Logon Page

    Change the Labels

    The title and labels in the UI component can be changed. You can either do it in this way:

    <dk-logon [title]="My Logon Dialog" [userLabel]="Email" [pwdLabel]="Password" [btnLabel]="Sign In" 

    Or use the navigation data attribute:

    const appRoutes: Routes = [
      { path: 'landing', component: LandingPageComponent },
        path: 'logon', component: LogonComponent,
        data: {
          title: 'Logon Portal', userLabel: 'User ID', pwdLabel: 'Password', btnLabel: 'Sign In',
          redirectPath: 'landing', redirectUrl: ''
      { path: '**', redirectTo: 'logon', pathMatch: 'full'}

    The second approach allows you to redirect to an Angular component.

    Identification Apps

    After git clone this project, following Angular Apps are in the folder /src/app:

    1. Manage Users --> /user
    2. Define Permission --> /permission
    3. Define Authorization Profile --> /profile
    4. Define App --> /app
    5. Define App Category --> /app_category
    6. Define Authorization Object --> /auth_object

    You run the command ng build in the project root to generate the static runnable in dist/identification. In the NodeJS initiative file server.js, you can find following statements are used to expose the runnable through ExpressJS:

    const express = require('express');
    const app = express();
    // Static stuff before session is initialized
    const path = require('path');
    app.use(express.static(path.join(__dirname, 'dist/identification')));
    app.get('/logon', (req, res) => { // Open the logon page
      res.sendFile(path.join(__dirname, 'dist/identification/index.html'));

    To run the Apps, you need to install MySQLs(5.6) and Redis. You should also refer JSON-On-Relations to populate the data into MySQL instance.

    At last, execute command npm install and then node server.js to start the server.


    Access the URL: http://localhost:3000/logon. You use user name 'DH001' and password 'Dark1234' to logon.

    Logon Page

    After successfully logon, you can check the session data in the landing page:


    Access the URL: http://localhost:3000/users. You can search users using using 'user ID' and 'user name'

    User List

    You can assign roles(permission) to a user:

    User Role


    Access the URL: http://localhost:3000/permissions. Permission is equivalent to role, and can be assigned to a user. Permission is maintained by first assigning App categories. Permission App Categories

    Profiles are then generated per app category. In the profile, you can maintain detail authorizations: Permission Authorization Profiles


    Access the URL: http://localhost:3000/profiles. Profiles are either generated during the permission creation, or manually created. The manual created ones can be directly assigned to technique users who don't require UI access, like background job users or communication users. Profiles


    Access the URL: http://localhost:3000/apps. You can register Apps in the system. An App is registered by giving an URL, either an absolute one or a relative one. Apps

    You can also maintain default authorizations for the App. This is very helpful when the App is assigned to a Permission through an App category. The default authorizations will be brought to the Permission for easy maintenance. Apps

    App Category

    Access the URL: http://localhost:3000/app-categories. You create App categories to group relative Apps together as an assignment unit. When an App category is assigned to a Permission, a corresponding Profile is generated. Apps

    Authorization Object

    Access the URL: http://localhost:3000/auth-objects. You define authorization object to represent a permission unit. An authorization object can map to a business object, or an abstract object only for permission control. It contains authorization fields to compose the authorization schema and value. Apps


    The "ui-logon" is the server-end component. It provides the routes, authentication, authorization logic, as well as the data storage. If you want to leverage the complete identification solution, you should setup "ui-logon". The component depends on following modules:

    Check the package.json for other related modules.

    "ui-logon" uses redis as the session store for PassportJS. So you have to install the redis server. Please refer the quick guide for how to install redis.

    JSON-On-Relations depends on MySql(5.6). Please refer the set-up guide on JSON-On-Relations on how to populate the data in MDB.

    After get the above prerequisites done. You can now follow the steps below to setup the server:

    1. Install it to your node project:

      $ npm install ui-logon --save
    2. Refer ui-logon\server.js to create your own entry file in the root of your Node project:

    3. Now you can start the node server and test the logon page:

      $ node server.js

      Test with the link: http://localhost:3000

    Define Logon Strategy

    PassportJS already provides a flexible way to let use different authentication strategies. Since we mainly use the basic user&password strategy, so just register a LocalStrategy is enough. The default implementation is given in ui-logon/server/Authentication.js:

    It uses JSON-On-Relations(JOR) to retrieve user information from the database. The function "getInstancePieceByID" is called to ask for the information from relation "r_user" with USER_ID equals to the requested username. Please refer https://github.com/VinceZK/json-on-relations/wiki/Internal-Functions for the API details.

    After the user information is retrieved, it compares the password values. If they are identical, then attach the user information to the "identity" object. Besides the basic user information, the "identity" is also attached with authorization derived from the assigned permission. It is then use node-authorization to utilize authorization checks.

    You can write your own logon logic and register it with "passport.use()" function.

    The Default Routes

    The default router(server/router.js) is created as following. Auth.ensureAuthenticated is used to protect endpoints which need to pass the authentication. You can import the default router into your route table const router = require('ui-logon').Router.

    // Basic login with username & password
    router.post('/api/logon', Auth.logon);
    router.delete('/api/logout', Auth.logout);
    // Ensure all the APIs bellow are under authentication.
    router.all('/api/*', Auth.ensureAuthenticated);
    // Identity APIs
    router.get('/api/session', Auth.session);


    The MIT License


    npm i ui-logon

    DownloadsWeekly Downloads






    Unpacked Size

    31 MB

    Total Files


    Last publish


    • avatar