JWT-AUTHENTICATOR

  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(){
 if(this.authnumber != null ){
this.service.getdeviceuniqid(this.authnumber).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.deviceuniqid
 }
 if(this.successMessage ==='match'){
 this.updateauth();
 }
 else{
 swal('Authenticator Number doesnot match');
 }
});
 }else{
 swal('Please Enter Authenticator Number ');
 }
 }
Profile page .html code
<div *ngIf="list.auth ==='no'">
 <label class="control-label">
 <input type="checkbox" (change)="selectterms()"> Activate Authenticator
</label>
 <br>
 <div class="form-group" *ngIf="showauth">
 <div class="col-sm-3">
 <label for="inputSkills" class="control-label">Authenticator Number</label>
 </div>
 <div class="col-sm-6">
 <input type="text" class="form-control" name="state" required="" [(ngModel)]="authnumber"
 [ngModelOptions]="{standalone:true}">
 </div>
 <div class="col-sm-3">
 <button type="button" style="float: right;" (click)="getuniq()" class="btn btn-info">Sync</button>
</div>
 </div>
 </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']);
 
 }
}
 
 }
 )
 
 }