Click or drag to resize

How to Integrate Visual Guard in Angular Client Application

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-20XX.X.XX.tgz (ex. vgangular-2019.0.10.tgz)
    Note Note

    Replace 'VisualGuardInstallationFolder' with your Installation path

  3. Open environment.ts File (FilePath: : ~\ClientApp\environments\environment.ts)

    JavaScript
    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_MustChangePasswordAtNextLogon_URL: '/newpassword'
    };
    • 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
    • VG_MustChangePasswordAtNextLogon_URL: ChangePassword route where it will redirect for Changing Password

    angular Client environment
  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
      JavaScript
      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
      JavaScript
      @NgModule({
      declarations: [AppComponent,LoginComponent,HomeComponent,VGPermissionComponent,CookiesComponent,NavMenuComponent,
          DataProcessor,CalculateComponent],
      imports: [BrowserModule,VGAngularModule.forRoot(),FormsModule,HttpClientModule,AppRoutingModule],
      providers: [{ provide: 'env', useValue: environment }],
      bootstrap: [AppComponent]
      })
      export class AppModule { }

      VGAngular 2
Examples of APIs

Import VGRuntimeService and VGAuthenticationMode from vgangular as follows.
Inject VGRuntimeService to constructor

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

Login() to VisualGuard

Call AuthenticateLogin() as follows.
You can use the authenticationState to check the status of authentication as shown in example. (isFailed, isCredentialInvalid, isPasswordExpired etc.)
To get more information on the result, see Novalys.VisualGuard.SecurityVGAuthenticationState

JavaScript
let promiseData = this.vgSecurityRuntime.AuthenticateLogin(this.username, this.password, VGAuthenticationMode.VisualGuard);
promiseData.then(X => {
  if (X.authenticationState.isFailed)
  {
      if (X.authenticationState.isCredentialInvalid)
      {
          alert("The password is not good");
      }
      else if (X.authenticationState.isPasswordExpired)
      {
          alert("The password is expired");
      }
  }
}
Note Note

If the credentials are good, VGAngular will redirect the user on the page requested before.

Note Note

If the password need to be changed, the user will be redirected to 'change password' page, specified at environment.VG_MustChangePasswordAtNextLogon_URL.

ChangePassword from VisualGuard

To ChangePassword use below method.
To get more information on the result, see Novalys.VisualGuard.SecurityVGPasswordModificationState

JavaScript
   let result = this.vgSecurityRuntime.ChangePassword(VGAuthenticationMode.VisualGuard, this.username, this.oldpassword, this.newpassword);
result.then(X => {
    if (!X.isFailed)
    {
        alert("The password is changed.");
    }
    else
    {
        alert("The password is not changed");
        if (X.newPasswordDoesNotPassValidation)
        {
            alert("The new password don't support the password policy");
        }
        else if (X.isUserAccountLockedOut)
        {
            alert("The account is lock");
        }
        else if (X.userAccountDoesNotExist)
        {
            alert("The account isn't exists");
        }

    }
}
);

SignOut() from VisualGuard

To SignOut use below method.

JavaScript
this.vgRuntimeService.SignOut();

Method: HasPermission(permission)

HasPermission method checks if current user has a specific permission (passed as parameter) and returns true or false.
Parameter: permission to be checked (a string)
Return Type: bool

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

Method: HasPermissions(permissionsString)

HasPermissions method checks if current user has all given permissions (passed as parameter, a string containing comma separated permissions) and returns true or false.
Parameter: permissions (a string containing comma separated permissions)
Return Type: bool

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

Method: IsInRole(role)

IsInRole method checks if current user is in a role passed as parameter.
Parameter: role to be checked (a string)
Return Type: bool

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

Method: IsInRoles(rolesString)

IsInRoles method checks if current user has all given roles (passed as parameter, a string containing comma separated roles) and returns true or false
Parameter: roles (a string containing comma separated roles)
Return Type: bool

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

Access user's ProfileValues

Access “Firstname”, "Lastname", etc profile value using “GetProfileValue” method as follows

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

Access image profile value using “GetProfile” method as follows

JavaScript
// 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)

Using vgPermission Directive, we can show/Hide, or Enable/Disable HTML elements based on current user having certain permissions or roles.

vgPermission directive has 3 parameters that we can write on any html element to control its visibility and disability

  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)

    Example:

    • [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)
    Example:

    • 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.

See Also