Jwt Authenticator Integration:
1. Create two columns in users table
auth enum(yes,no), deviceuniqID varchar(100)
2. Ui design to activate authenticator text field to enter mobile credential device id and send the input to
JWT Authenticator is a software-based authenticator by JWTechologies, that implements two-step verification services. You will be asked for a
verification code when you log in to the application that has been activated by Authenticator.You will be logged in successfully if you use your mobile
device JWT Authenticator application and enter the 6/8/10 digit code that you see.
Update ’deviceuniqid’ in users table in deviceuniqID and auth as yes.
Angular Project Profile Page Code Sample
Profile page update sql for service
$sql="UPDATE `users` SET `auth`='yes' ,`deviceuniqID`='$authnumber' where `unique_id`='$uid'";
Profilepage .ts code to update deviceuniq id
updateauth(){
debugger;
if(this.authnumber != null ){
var q=2;
this.service.authdata(this.uid,this.authnumbers,q).subscribe(
success=>{
this.profRes =success
swal(success);
this.refreshList();
});
}else{
swal('Please Enter Authenticator Number');
}
}
Profile page .ts code
getuniq(){
var applicationname='JWTAuthenticator';
this.loginService.getdeviceuniqid(this.email,applicationname).subscribe(
success=>{
this.profRes =success
console.log(this.profRes);
for (let key of this.profRes) {
console.log("object:", key);
this.successMessage=key.msg;
this.authnumbers=key.appUniqeID;
}
this.updateauth();
sessionStorage.setItem('auth','yes')
});
}
|
Profile page .html code
<div *ngIf="auth ==='no'">
<div class="row">
<div class="col-sm-3"></div>
<label class="control-label">
<input type="checkbox" (change)="activateauth()"> Activate Authenticator
</label>
<div class="col-sm-3" *ngIf="showauth">
<button type="button" (click)="getuniq()" class="btn btn-info">Send Barcode</button>
</div>
</div>
<br>
</div>
|
|
3. Login Screeen add option to enter the JWT Token.
Ui to enter code textfield and users deviceuniqID
JWT Authenticator is a software-based authenticator by JWTechologies, that implements two-step verification services. You will be asked for a
verification code when you log in to the application that has been activated by Authenticator.The next time you log in and use the credentials device id in
the application, you will need to use that authenticator code when you login
To check the code while login
Angular Project Login Page Code Sample
After login credetails checked for authcode .ts page
if(this.auth_code === "yes"){
//this.userservice.alertMsg("Auth is Yes")
this.myform = false;
this.mybutton=true;
}
Login page .html
<div *ngIf="mybutton">
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">2- step Verification</p>
<form login='loginForm'>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="code" [(ngModel)]='authcode'
[ngModelOptions]="{standalone:true}">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<a href="#" routerLink="/updatecred" class="text-center" id="fgt">Change Device ID</a>
</div>
</div>
<div class="col-xs-4">
<button type="button" data-toggle="modal" data-target="#feedback" id="addMemberModalBtn"
class="btn btn-primary btn-block btn-flat" (click)='confirm()'>Submit</button>
</div>
</form>
</div>
</div>
</div>
Login page checkfor user entered code
confirm(){
var q = 2;
this.service.verifyCode(this.authcode,this.deviceuniqid,q).subscribe(
res=>{
this.getCode = res
for (let key of this.getCode) {
console.log("object:", key);
this.auth = key.msg;
}
if(this.auth =='failed'){
swal({
title: "Sorry?",
text: "Please check entered code",
icon: "warning",
dangerMode: true,
});
}else {
if(res){
this.router.navigate(['/navigatetoafterloginpage']);
}
}
}
)
}
|
