How to Integrate Visual Guard in Angular Client Application |
npm install "VisualGuardInstallationFolder\VG Angular\vgangular-20XX.X.XX.tgz (ex. vgangular-2019.0.10.tgz)
Note |
---|
Replace 'VisualGuardInstallationFolder' with your Installation path |
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:
VG_MustChangePasswordAtNextLogon_URL: ChangePassword route where it will redirect for Changing Password
Add lines shown below to import VGAngular module, service and interceptor, route guard etc.
import { VGAngularModule } from 'vgangular'; import { environment } from '../environments/environment';
@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 { }
Import VGRuntimeService and VGAuthenticationMode from vgangular as follows.
Inject VGRuntimeService to constructor
import { VGRuntimeService, VGAuthenticationMode } from 'vgangular';
constructor(private vgSecurityRuntime: VGRuntimeService) { }
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
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 |
---|
If the credentials are good, VGAngular will redirect the user on the page requested before. |
Note |
---|
If the password need to be changed, the user will be redirected to 'change password' page, specified at environment.VG_MustChangePasswordAtNextLogon_URL. |
To ChangePassword use below method.
To get more information on the result, see Novalys.VisualGuard.SecurityVGPasswordModificationState
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"); } } } );
To SignOut use below method.
this.vgRuntimeService.SignOut();
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
let hasPermission = this.vgRuntimeService.HasPermission("CanEditContract");
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
let hasPermissions = this.vgRuntimeService.HasPermissions("CanDeleteContract,CanEditContract,CanAddContract,CanViewContract");
IsInRole method checks if current user is in a role passed as parameter.
Parameter: role to be checked (a string)
Return Type: bool
let isinRole = this.vgRuntimeService.IsInRole("ServiceManager");
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
let isInRoles = this.vgRuntimeService.IsInRoles("Admin,ServiceManager");
Access “Firstname”, "Lastname", etc profile value using “GetProfileValue” method as follows
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
// 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 |
---|
This image string can directly bound to image.src to display image |
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
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:
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 |
---|
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. |
vgPermission (required)
Example:
vgIsInRoles:
A string with comma separated roles can be set to check if current user has these role(s)
Example:
<button type="button" [vgPermission=""]="'inline, disabled'" vgHasPermissions="CanEditContract, AccessComponent" vgIsInRoles="Default, ServiceManager">Button</button>
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. |
<a [vgPermission]="'disabled'" vgIsInRoles="Default,ServiceManager">Link</a>
Note |
---|
Here vgHasPermissions is missing so only vgIsInRoles will be considered and if its false then the element will be disabled. |
<p [vgPermission]="'disabled,none'" vgHasPermissions="CanEditContract,AccessComponent">Paragraph</p>
Note |
---|
If current user does not have any of the permissions specified in vgHasPermissions then element will be hidden and disabled. |
<label [vgPermission]="'disabled,block'" vgHasPermissions="AccessComponent" vgIsInRoles="Default">label</label>
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. |