Learn Infinity

Learn Some Thing New

Two-Factor Verification utilizing Google Authenticator Library

Two-Factor Verification utilizing Google Authenticator Library

In our post, clarify you the login method utilizing PHP with MySQL association. Here is an additional element that can be added to login method for an additional layer of security. It is two-factor verification utilizing Google Authenticator App for Smartphones like Android/iPhone. Your details could be in danger of having your secret word stolen. two-factor confirmation can shield from abuse of your record in the event that somebody has your secret key, since signing into your account dependably require a security code (this security code is particularly intended for your record, it automatically sending different codes with the sum of time interval).

Connection Details:

In this section, we need to configure DB connection details with your relevant data and save as connection.php.

1
2
3
4
5
6
<?php
session_start();
$conn = mysql_connect("localhost","root","") or die(mysql_error());
$DB = mysql_select_db("google_auth",$conn) or die(mysql_error());
date_default_timezone_set('Asia/Kolkata');
?>

Users Table Details:

User table having all the registered users information, in this, you have to save user information with unique Google authentication secret code. Use the below code to create user table in MySQL.

1
2
3
4
5
6
7
8
CREATE TABLE IF NOT EXISTS `tbl_users` (
  `user_id` int(11) NOT NULL primary key AUTO_INCREMENT,
  `email` varchar(120) DEFAULT NULL,
  `password` varchar(200) DEFAULT NULL,
  `profile_name` varchar(100) DEFAULT NULL,
  `secret_key` varchar(16) DEFAULT NULL,
  `created_at` varchar(15) DEFAULT NULL
)

Page Styles:

In this section, we need to write styles for all view pages and save as app_style.css.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
body{font-family: monospace;}
.app-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    color: #e66b2f;
}
.col-title {
    background: #e66b2f;
    /*box-shadow: inset 0px -5px 10px #732803;*/
    border-radius: 3px;
    text-align: center;
    color: #ffffff;
    padding: 5px 5px;
    font-size: 20px;
}
.form-set {
    border: solid 1px #c8cac8;
    background: #ececec;
}
.center-content{ text-align: center; }
.error-message {
    color: #f00;
    font-weight: bold;
    text-align: center;
}
label.error { color: #F00; }
.form-group input { margin: 5px; }
.user-table { margin: 5% auto; width:50%}
.user-table tr th, .user-table tr td {
    padding: 10px 10px;
    border: solid 1px #000;
}
.user-table tr th{ background:#f3f3f3; }
.title {
    background: #1e6496;
    color: #FFF;
    font-size: 15px;
    font-weight: bold;
    font-family: cursive;
}

Main Page:

In this section, we need to design home page with registration and login form structure with Jquery and Ajax functions and save as index.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
    <title>Learn Infinity | Two Factor Verification with Google Authenticator Library</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
    <link rel="stylesheet" type="text/css" href="css/app_style.css" charset="utf-8" />
</head>
<body>
<div class="container">
    <h1 class="app-title">Learn Infinity - <br/> Two Factor Verification with Google Authenticator Library</h1>
<br/>
<div class="row">
<div class="col-md-offset-1 col-md-4 form-set">
<h2 class="col-title">Registration</h2>
<form name="signup-form" id="signup-form">
<input type="hidden" id="process_name" name="process_name" value="user_registor" />
  <div class="error-message error-register"></div>
  <div class="form-group">
<label for="email">Full Name:</label>
<input type="text" name="reg_name" class="form-control" id="reg_name" required />
  </div>
  <div class="form-group">
<label for="email">Email:</label>
<input type="email" name="reg_email" class="form-control" id="reg_email" required />
  </div>
  <div class="form-group">
<label for="password">Password:</label>
<input type="password" name="reg_password" class="form-control" id="reg_password" required />
  </div>
  <div class="form-group center-content">
   <button type="button" class="btn btn-primary btn-reg-submit">Submit</button>
  </div>
</form>
 
</div>
 
<div class="col-md-offset-1 col-md-4 form-set">
<h2 class="col-title">Login</h2>
<br/>
<form name="login-form" id="login-form">
<input type="hidden" id="process_name" name="process_name" value="user_login" />
  <div class="error-message error-login"></div>
  <div class="form-group">
<label for="login_email">Email:</label>
<input type="email" name="login_email" class="form-control" id="login_email" required />
  </div>
  <div class="form-group">
<label for="login_password">Password:</label>
<input type="password" name="login_password" class="form-control" id="login_password" required />
  </div>
  
  <div class="form-group center-content">
   <button type="button" class="btn btn-success btn-login-submit">Login</button>
  </div>
 
  
</form>
</div>
</div>
</div>
 
<script src="js/jquery.validate.min.js"></script>
 
<script>
$(document).ready(function(){
/* submit form register details */
$(document).on('click', '.btn-reg-submit', function(ev){
if($("#signup-form").valid() == true){
var data = $("#signup-form").serialize();
$.post('check_user.php', data, function(data,status){
console.log("submitnig result ====> Data: " + data + "\nStatus: " + status);
if( data == "done"){
window.location = 'user_confirm.php';
}
else{
$(".error-register").html(data);
}
});
}
});
/* end submit register form details */
/* submit form login details */
$(document).on('click', '.btn-login-submit', function(ev){
if($("#login-form").valid() == true){
var data = $("#login-form").serialize();
$.post('check_user.php', data, function(data,status){
console.log("submitnig result ====> Data: " + data + "\nStatus: " + status);
if( data == "done"){
window.location = 'user_confirm.php';
}
else{
$(".error-login").html(data);
}
});
}
});
/* end submit login form details */
});
</script>
 
</body>
</html>

Register, Login and Verifying background code:

In this section, we need to write codes like Register, Login sessions or Verification scan code procedures with proper user data using Google Authenticator Library and save as check_user.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?php
include("connection.php");
 
require_once 'googleLib/GoogleAuthenticator.php';
$gauth = new GoogleAuthenticator();
$secret_key = $gauth->createSecret();
 
$process_name = $_POST['process_name'];
 
 
 
if($process_name == "user_registor"){
$reg_name = $_POST['reg_name'];
$reg_email = $_POST['reg_email'];
$reg_password = md5($_POST['reg_password']);
    
$chk_user = mysql_query("select * from tbl_users where email='$reg_email'") or die(mysql_error());
if(mysql_num_rows($chk_user) == 0){
     $query = "insert into tbl_users(profile_name, email, password, secret_key) values('$reg_name', '$reg_email', '$reg_password', '$secret_key' )";
$result = mysql_query($query) or die(mysql_error());
$_SESSION['user_id'] = mysql_insert_id();
echo "done";
    }
    else{
echo "This Email already exits in system.";
    }
}
 
if($process_name == "user_login"){
$login_email = $_POST['login_email'];
$login_password = md5($_POST['login_password']);
    
$user_result = mysql_query("select * from tbl_users where email='$login_email' and password='$login_password'") or die(mysql_error());
if(mysql_num_rows($user_result) == 1){
     $user_row = mysql_fetch_array($user_result);
$_SESSION['user_id'] = $user_row['user_id'];
echo "done";
    }
    else{
echo "Check your user login details.";
    }
}
 
if($process_name == "verify_code"){
$scan_code = $_POST['scan_code'];
$user_id = $_SESSION['user_id'];
$user_result = mysql_query("select * from tbl_users where user_id='$user_id'") or die(mysql_error());
$user_row = mysql_fetch_array($user_result);
$secret_key = $user_row['secret_key'];
$checkResult = $gauth->verifyCode($secret_key, $scan_code, 2);    // 2 = 2*30sec
 
if ($checkResult){
$_SESSION['googleVerifyCode'] = $scan_code;
echo "done";
}
else{
echo 'Note : Code not matched.';
}
}
?>

User Confirmation Page:

In this section, we need to verification process code for registered user or login user data with help of Google Authenticator Library and save as user_confirm.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<?php
include('connection.php');
require_once 'googleLib/GoogleAuthenticator.php';
$gauth = new GoogleAuthenticator();
 
if(empty($_SESSION['user_id']))
{
echo "<script> window.location = 'index.php'; </script>";
}
 
$user_id = $_SESSION['user_id'];
$user_result = mysql_query("select * from tbl_users where user_id='$user_id'") or die(mysql_error());
$user_row = mysql_fetch_array($user_result);
 
$secret_key = $user_row['secret_key'];
$email = $user_row['email'];
 
$google_QR_Code = $gauth->getQRCodeGoogleUrl($email, $secret_key,'Learn Infinity');
?>
<!DOCTYPE html>
<html>
<head>
<title>Learn Infinity | Two Factor Verification with Google Authenticator Library</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
    <link rel="stylesheet" type="text/css" href="css/app_style.css" charset="utf-8" />
</head>
<body>
<div class="container">
<h1 class="app-title">Learn Infinity - <br/> Two Factor Verification with Google Authenticator Library</h1>
<br/> <br/>
<div class="row">
<div class="col-md-offset-2 col-md-4 center-content">
<p>Scan with Google Authenticator application on your smart phone.</p>
<img src='<?php echo $google_QR_Code; ?>' />
 
<form id="LI-form">
<input type="hidden" id="process_name" name="process_name" value="verify_code" />
<div class="error-message error-verify"></div>
<div class="form-group">
<label for="email">Place your code here:</label>
<input type="text" name="scan_code" class="form-control" id="scan_code" required />
</div>
<input type="button" class="btn btn-success btn-submit" value="Verify Code" autofocus="" />
</form>
</div>
<div class="col-md-4 center-content">
<h6>Application Download Link(s),</h6>
<a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en" target="_blank"><img class="app" src="img/playstore.png" /></a>
<br/>
<a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8" target="_blank"><img class='app' src="img/istore.png" /></a>
<br/>
</div>
</div>
</div>
<script src="js/jquery.validate.min.js"></script>
 
<script>
$(document).ready(function(){
/* submit form details */
$(document).on('click', '.btn-submit', function(ev){
if($("#LI-form").valid() == true){
var data = $("#LI-form").serialize();
$.post('check_user.php', data, function(data,status){
console.log("submitnig result ====> Data: " + data + "\nStatus: " + status);
if( data == "done"){
window.location = 'my_page.php';
}
else{
$(".error-verify").html(data);
}
});
}
});
/* end submit form details */
});
</script>
</body>
</html>

Profile page code:

In this section, we need to write code for login user profile information details and save as my_page.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
include("connection.php");
if(empty($_SESSION['user_id']))
{
echo "<script> window.location = 'index.php'; </script>";
}
 
$user_id = $_SESSION['user_id'];
$user_result = mysql_query("select * from tbl_users where user_id='$user_id'") or die(mysql_error());
$user_row = mysql_fetch_array($user_result);
?>
<!DOCTYPE html>
<html>
<head>
<title>Learn Infinity | Two Factor Verification with Google Authenticator Library</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
    <link rel="stylesheet" type="text/css" href="css/app_style.css" charset="utf-8" />
</head>
<body>
<div id="container">
<h1 class="app-title">Learn Infinity - <br/> Two Factor Verification with Google Authenticator Library</h1>
<table class="user-table">
<tr><td colspan="3" align="center">Hi <b><?php echo ucfirst($user_row['profile_name']); ?></b>,</td></tr>
<tr><td colspan="3" align="center" class="title">Your Profile Details:</td></tr>
<tr><th>Profile Name</th><td><?php echo $user_row['profile_name']; ?></td></tr>
<tr><th>Email</th><td><?php echo $user_row['email']; ?></td></tr>
<tr><th>Secret Key</th><td><?php echo str_repeat("x", (strlen($user_row['secret_key']) - 4)).substr($user_row['secret_key'],-4,4); ?></td></tr>
<tr><td colspan="3" align="center"><a href="logout.php" class="btn btn-xs btn-danger" >Logout</a></td></tr>
</table>
<h4></h4>
</div>
</body>
</html>

Sign-out code:

In this section, we need to write codes for unset the stored $_SESSION details and save as logout.php.

1
2
3
4
5
6
<?php
session_start();
session_unset();
session_destroy();
echo "<script> window.location = './index.php'; </script>";
?>

 

Prev post Making Professional Looking Letterhead in MS-Word 2010
Next post Digital E-Signature pad with saving it as image using html2canvas and Ajax, PHP

Learn Infinity

Learn Infinity is the most famous Programming & Web Development blog. Our principal is to provide the best online tutorial on web development. We execute the best tutorials for web experts this will help developers, programmers, freelancers and proving free resource you can download or preview the tutorials.

Related Posts

Leave a Reply

Your email address will not be published.

Back to top