How to integrate in Angular ?

Author: admin 157 views

How to Install VGAngular npm package and Configure VGAngularSecurity in Angular Project

  1. Open Command Prompt and set angular project path.
  2. Run below command for installing NPM package
    npm install "VisualGuardInstallationFolder\VG Angular\vgangular-2019.0.9.tgz

    Note Note
    Replace ‘VisualGuardInstallationFolder’ with your Installation path
  3. Open environment.ts File (FilePath: : ~\ClientApp\environments\environment.ts)
    export const environment = 
        VG_Authentication_URL: 'http://localhost:8199',
        VG_Login_URL: '/login',
        VGExcludeExtensions: '.css,.png,.jpg,.js',
        AllowWindowsAuthentication: true,
        AllowRouteGuard: true,
        VGExcludePages: '/,login,home'    

    • VG_Authentication_URL: Url of the server where VGAngularSecurity apis are available for authentication
      (Url of the WebApi where Security.Angular.dll is referenced and configured in startup.cs)
    • VG_LOGIN_URL: Login route where it will redirect for login (note: it should start with ?/?, e.g., /login)
    • VGExcludeExtensions: All requests with any of these extensions will be excluded from authentication
    • AllowWindowsAuthentication: If true then it allows windows authentication, If false then it will redirect to url mentioned in VG_LOGIN_URL
      for authentication
    • AllowRouteGuard : If false then angular module will not set route interceptor automatically for all routes,
      it has to be setup in the route configuration for all required routes manually, If true then route interceptor will automatically set route guard for all routes
      and all routes will be protected for authentication
    • VGExcludePages : All comma separated pages will be matched for exclusion from authentication as follows:
      • ‘/’ : will match route
      • ‘login’: will match login route
      • ‘purchase/pd/:id/pdpc’: will match URL like: purchase/pd/100/pdpc
      • ‘purchase/pd/:id/po/:name’: will match URL like: purchase/pd/200/po/cycle
    VGAngular 1
  4. Import VGAngular module in app.module.ts file (File: ~\ClientApp\app\app.module.ts)Add lines shown below to import VGAngular module, service and interceptor, route guard etc.
    1. Add line to import VGAngularModule and environment
      import { VGAngularModule } from 'vgangular';
      import { environment } from '../environments/environment';

    2. a. Add VGAngularModule.forRoot() in imports under @NgModule
      b. Add providers { provide: ‘env’, useValue: environment} in providers under @NgModule

      declarations: [AppComponent,LoginComponent,HomeComponent,VGPermissionComponent,CookiesComponent,NavMenuComponent,
      imports: [BrowserModule,VGAngularModule.forRoot(),FormsModule,HttpClientModule,AppRoutingModule],
      providers: [{ provide: 'env', useValue: environment }],
      bootstrap: [AppComponent]
      export class AppModule { }

      VGAngular 2

Examples of APIs

import { VGRuntimeService, VGAuthenticationMode } from 'vgangular';
constructor(private vgSecurityRuntime: VGRuntimeService) { }

Login() to VisualGuard

this.vgSecurityRuntime.AuthenticateLogin(username, password,  VGAuthenticationMode.VisualGuard);

SignOut() from VisualGuard


Method: HasPermission(permission)

let hasPermission = this.vgRuntimeService.HasPermission("CanEditContract");

Method: HasPermissions(permissionsString)

let hasPermissions = this.vgRuntimeService.HasPermissions("CanDeleteContract,CanEditContract,CanAddContract,CanViewContract");

Method: IsInRole(role)

let isinRole = this.vgRuntimeService.IsInRole("ServiceManager");

Method: IsInRoles(rolesString)

let isInRoles = this.vgRuntimeService.IsInRoles("Admin,ServiceManager");

Access user’s ProfileValues

let profileFirstname = this.vgRuntimeService.GetProfileValue("Firstname")
let profileLastname = this.vgRuntimeService.GetProfileValue("Lastname");
let employeeAvtarImageBase64String = this.vgRuntimeService.GetProfileValue("Avtar");

// get profile image example
let profileImageData = this.vgRuntimeService.GetProfile("PhotoImage");
if (profileImageData && profileImageData.isImage) {
    // set image.src = stringurl example
    let imageContent:string = profileImageData.GetDataAsImageDataString();

Note Note
This image string can directly bound to image.src to display image

Permission Directive (vgPermission)

  1. vgPermission (required)
  2. vgHasPermissions (optional)
  3. vgIsInRoles (optional)

  1. vgPermission: (same name as that of the directive)In given parameter you can set attributes to control html element display (‘none’, ‘inline’, ‘block’) and disabled (‘disabled’, ‘enabled’)
    when vgHasPermissions() or vgIsInRoles() are existing and returns false:

    1. ‘none’ : will hide html element
    2. ‘inline’: will show html element inline
    3. ‘block’: will show html element as block (its default)
    4. ‘disabled’: will disable the html element (user cannot click it)
    5. ‘enabled’: will enable the html element (its default)


    • [vgPermission]=”‘none,disabled'”This means when either vgHasPermission or vgIsInRoles returns false, it will hide and disable element
    • [vgPermission]=”inline,disabled'”This means when either vgHasPermission or vgIsInRoles returns false, it will show as inline but will disable element
    • [vgPermission]=”block,disabled'”This means when either vgHasPermission or vgIsInRoles returns false, it will show as block but will disable element
    Note Note
    when vgHasPermissions (optional) or vgIsInRoles(optional) are provided and are true (all combined) then it will always show the element
    and it will be enabled. However, when it is false (any of vgHasPermissions or vgIsInRoles returns false) then it will use vgPermission
    attribute and will show/hide/enable/disable html element as the parameter values set from any of the 5 above.

    When vgHasPermssions is not present that means it is by default true, so if for example, vgHasPermissions is not present and only
    vgIsInRoles present then it will consider return value of vgIsInRoles only.

    If none of the vgHasPermissions or vgIsInRoles are present, then it will consider both as true and so will show as block
    with element enabled.

  2. vgPermission (required)Example:
    • vgHasPermissions=”CanDeleteContract, CanEditContract, CanAddContract”
    • vgHasPermissions=”CanDeleteContract”
  3. vgIsInRoles:A string with comma separated roles can be set to check if current user has these role(s)


    • vgIsInRoles=”Default,ServiceManager,Admin”
    • vgIsInRoles=”ServiceManager”
  4. vgIsInRoles (optional)

Examples of using vgPermission attribute with html elements

  1. <button type=”button” [vgPermission=””]=”‘inline, disabled'” vgHasPermissions=”CanEditContract, AccessComponent”
    vgIsInRoles=”Default, ServiceManager”>Button</button>

    Note Note
    Here if current user does not have all permissions specified in vgHasPermissions and all roles specified in vgIsInRoles
    then it will be shown inline but will be disabled.
  2. <a [vgPermission]=”‘disabled'” vgIsInRoles=”Default,ServiceManager”>Link</a>
    Note Note
    Here vgHasPermissions is missing so only vgIsInRoles will be considered and if its false then the element will be disabled.
  3. <p [vgPermission]=”‘disabled,none'” vgHasPermissions=”CanEditContract,AccessComponent”>Paragraph</p>
    Note Note
    If current user does not have any of the permissions specified in vgHasPermissions then element will be hidden and disabled.
  4. <label [vgPermission]=”‘disabled,block'” vgHasPermissions=”AccessComponent” vgIsInRoles=”Default”>label</label>
    Note Note
    Here if current user does not have all permissions specified in vgHasPermissions and all roles specified in vgIsInRoles
    then it will be shown as block but will be disabled.