May 13, 2017

Google Two Factor Authentication Sign In and Join Now using jQuery, PHP & MySQL

Hi, friends in this post I show you how to do google two-factor authentication sign in and join now using jQuery, PHP & MySQL. Two-factor authentication using Google Authenticator App for Android or iPhone. You having the problem with hackers for your password.

Then the two-step verification can defend from abuse of your account if someone having your password, since signing into your account regularly you need a verification code this verification code is different created for your account, by scanning QR code from your mobile Google Authenticator App, a different code is sent to your Google Authentication App for every 40-50 seconds.

In the next step, you enter your password with two-step verification, we can keep our account high securely with both password & google authentication code. Add this two-factor authentication to secure your account much stronger.

index.php

<!doctype html>
<html>
<head>
    <title>SoftAOX | Google Two Factor Authentication Sign In and Join Now using jQuery, PHP & MySQL</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/app_style.css" charset="utf-8" />
</head>
<body>
    <div class="container">
        <div class="row">
            <h2>Google Two Factor Authentication Sign In and Join Now using jQuery, PHP & MySQL</h2>
        </div>
    </div>
    <br>
    <br>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="form-body">
                    <ul class="nav nav-tabs final-login">
                        <li class="active"><a data-toggle="tab" href="#sectionA">Sign In</a>
                        </li>
                        <li><a data-toggle="tab" href="#sectionB">Join us!</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="sectionA" class="tab-pane fade in active">
                            <div class="innter-form">
                                <form name="login-form" id="login-form" class="sa-innate-form">
                                    <input type="hidden" id="process_name" name="process_name" value="user_login" />
                                    <div class="errorMsg errorMsgReg"></div>
                                    <label>Email Address</label>
                                    <input type="email" name="login_email" class="form-control" id="login_email" required />
                                    <label>Password</label>
                                    <input type="password" name="login_password" class="form-control" id="login_password" required />
                                    <button type="button" class="btn btn-success btn-login-submit">Sign In</button>
                                </form>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div id="sectionB" class="tab-pane fade">
                            <div class="innter-form">
                                <form name="signup-form" id="signup-form" class="sa-innate-form">
                                    <input type="hidden" id="process_name" name="process_name" value="user_registor" />
                                    <div class="errorMsg errorMsgReg"></div>
                                    <label>Name</label>
                                    <input type="text" name="reg_name" class="form-control" id="reg_name" required />
                                    <label>Email Address</label>
                                    <input type="email" name="reg_email" class="form-control" id="reg_email" required />
                                    <label>Password</label>
                                    <input type="password" name="reg_password" class="form-control" id="reg_password" required />
                                    <button type="button" class="btn btn-primary btn-reg-submit">Join Now</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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>
    <script src="js/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function() {
			$(document).on('click', '.btn-reg-submit', function(ev) {
				if ($("#signup-form").valid() == true) {
					var data = $("#signup-form").serialize();
					$.post('user_validation.php', data, function(data, status) {
						console.log("submitnig result ====> Data: " + data + "\nStatus: " + status);
						if (data == "done") {
							window.location = 'conformation.php';
						} else {
							alert("not done");
						}
		
					});
				}
			});
		
			$(document).on('click', '.btn-login-submit', function(ev) {
				if ($("#login-form").valid() == true) {
					var data = $("#login-form").serialize();
					$.post('user_validation.php', data, function(data, status) {
						console.log("submitnig result ====> Data: " + data + "\nStatus: " + status);
						if (data == "done") {
							window.location = 'conformation.php';
						} else {
							alert("not done");
						}
		
					});
				}
			});
		});
    </script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>SoftAOX | Google Two Factor Authentication Sign In and Join Now using jQuery, PHP & MySQL</title>

</head>

<body>

<h2>Google Two Factor Authentication Sign In and Join Now using jQuery, PHP & MySQL</h2>

</div>

<br>

</li>

</li>

</ul>

<label>Email Address</label>

<label>Password</label>

</form>

</div>

</div>

<label>Email Address</label>

<label>Password</label>

</form>

</div>

$(document).ready(function() {

$(document).on('click', '.btn-reg-submit', function(ev) {

if ($("#signup-form").valid() == true) {

var data = $("#signup-form").serialize();

$.post('user_validation.php', data, function(data, status) {

console.log("submitnig result ====> Data: " + data + "\nStatus: " + status);

if (data == "done") {

window.location = 'conformation.php';

} else {

alert("not done");

}

});

}

});

$(document).on('click', '.btn-login-submit', function(ev) {

if ($("#login-form").valid() == true) {

var data = $("#login-form").serialize();

$.post('user_validation.php', data, function(data, status) {

console.log("submitnig result ====> Data: " + data + "\nStatus: " + status);

if (data == "done") {

window.location = 'conformation.php';

} else {

alert("not done");

}

});

}

});

</script>

</body>

</html>

conn.php

<?php
session_start();
$conn = mysql_connect("localhost", "root", "") or die(mysql_error());
$DB = mysql_select_db("tut", $conn) or die(mysql_error());
date_default_timezone_set('Asia/Kolkata');
?>

<?php

session_start();

$conn = mysql_connect("localhost", "root", "") or die(mysql_error());

$DB = mysql_select_db("tut", $conn) or die(mysql_error());

date_default_timezone_set('Asia/Kolkata');

conformation.php

<?php
include('conn.php');
require_once 'googleLib/GoogleAuthenticator.php';
$gauth = new GoogleAuthenticator();

if (empty($_SESSION['id'])) {
    echo "<script> window.location = 'index.php'; </script>";
}

$id = $_SESSION['id'];
$user_result = mysql_query("select * from users_info where id='$id'") or die(mysql_error());
$user_row = mysql_fetch_array($user_result);

$secret_key = $user_row['google_authentication'];
$email      = $user_row['email'];

$google_QR_Code = $gauth->getQRCodeGoogleUrl($email, $secret_key, 'SoftAOX');
?>
<!doctype html>
<html>
<head>
    <title>SoftAOX | Google Two Factor Authentication Sign In and Join Now using jQuery, PHP &amp; MySQL</title>
    <link rel="stylesheet" type="text/css" href="css/app_style.css" charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="container">
        <h2 align="center">Google Two Factor Authentication Sign In and Join Now using jQuery, PHP &amp; MySQL</h2>
        <div id='device'>
            <p align="center">Scan Your QR Code With Google Authenticator APP On Your Smart Phone.</p>
            <div class="col-md-6 col-md-offset-3" align="center">
                <div id="img"><img src='<?php echo $google_QR_Code; ?>' /></div>
                <form id="LI-form">
                    <input type="hidden" id="process_name" name="process_name" value="verify_code" />
                    <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" />
                </form>
                <div style="text-align:center">
                    <h5>Download Google Authenticator on the App Store</h5>
                    <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en" target="_blank" rel="noopener noreferrer"><img class="app" src="img/g_play_store.png" /></a>

                    <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8" target="_blank" rel="noopener noreferrer"><img class='app' src="img/g_ios.png" /></a>
                </div>
            </div>
        </div>
    </div>
    <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>
    <script src="js/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function() {
			$(document).on('click', '.btn-submit', function(ev) {
				if ($("#LI-form").valid() == true) {
					var data = $("#LI-form").serialize();
					$.post('user_validation.php', data, function(data, status) {
						console.log("submitnig result ====> Data: " + data + "\nStatus: " + status);
						if (data == "done") {
							window.location = 'home.php';
						} else {
							alert("not done");
						}
		
					});
				}
			});
		});
    </script>
</body>
</html>

<?php

include('conn.php');

require_once 'googleLib/GoogleAuthenticator.php';

$gauth = new GoogleAuthenticator();

if (empty($_SESSION['id'])) {

echo "<script> window.location = 'index.php'; </script>";

}

$id = $_SESSION['id'];

$user_result = mysql_query("select * from users_info where id='$id'") or die(mysql_error());

$user_row = mysql_fetch_array($user_result);

$secret_key = $user_row['google_authentication'];

$email = $user_row['email'];

$google_QR_Code = $gauth->getQRCodeGoogleUrl($email, $secret_key, 'SoftAOX');

<!doctype html>

<html>

<head>

<title>SoftAOX | Google Two Factor Authentication Sign In and Join Now using jQuery, PHP & MySQL</title>

</head>

<body>

<h2 align="center">Google Two Factor Authentication Sign In and Join Now using jQuery, PHP & MySQL</h2>

<p align="center">Scan Your QR Code With Google Authenticator APP On Your Smart Phone.</p>

<label for="email">Place your code here:</label>

</div>

</form>

<h5>Download Google Authenticator on the App Store</h5>

</div>

$(document).ready(function() {

$(document).on('click', '.btn-submit', function(ev) {

if ($("#LI-form").valid() == true) {

var data = $("#LI-form").serialize();

$.post('user_validation.php', data, function(data, status) {

console.log("submitnig result ====> Data: " + data + "\nStatus: " + status);

if (data == "done") {

window.location = 'home.php';

} else {

alert("not done");

}

});

}

});

</script>

</body>

</html>

user_validation.php

<?php
include("conn.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 users_info where email='$reg_email'") or die(mysql_error());
    if (mysql_num_rows($chk_user) == 0) {
        $query = "insert into users_info(user_name, email, password, google_authentication) values('$reg_name', '$reg_email', '$reg_password', '$secret_key' )";
        $result = mysql_query($query) or die(mysql_error());
        $_SESSION['id'] = mysql_insert_id();
        echo "done";
    } else {
        echo "The email address you have entered is already registered..";
    }
}

if ($process_name == "user_login") {
    $login_email    = $_POST['login_email'];
    $login_password = md5($_POST['login_password']);
    
    $user_result = mysql_query("select * from users_info 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['id'] = $user_row['id'];
        echo "done";
    } else {
        echo "Incorrect signin information. Please check your credentials and try again.";
    }
}

if ($process_name == "verify_code") {
    $scan_code = $_POST['scan_code'];
    $id   = $_SESSION['id'];
    
    $user_result = mysql_query("select * from users_info where id='$id'") or die(mysql_error());
    $user_row   = mysql_fetch_array($user_result);
    $secret_key = $user_row['google_authentication'];
    
    $checkResult = $gauth->verifyCode($secret_key, $scan_code, 2); // 2 = 2*30sec clock tolerance
    
    if ($checkResult) {
        $_SESSION['googleVerifyCode'] = $scan_code;
        echo "done";
    } else {
        echo 'Note : Code not matched.';
    }
}
?>

<?php

include("conn.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 users_info where email='$reg_email'") or die(mysql_error());

if (mysql_num_rows($chk_user) == 0) {

$query = "insert into users_info(user_name, email, password, google_authentication) values('$reg_name', '$reg_email', '$reg_password', '$secret_key' )";

$result = mysql_query($query) or die(mysql_error());

$_SESSION['id'] = mysql_insert_id();

echo "done";

} else {

echo "The email address you have entered is already registered..";

}

if ($process_name == "user_login") {

$login_email = $_POST['login_email'];

$login_password = md5($_POST['login_password']);

$user_result = mysql_query("select * from users_info 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['id'] = $user_row['id'];

echo "done";

} else {

echo "Incorrect signin information. Please check your credentials and try again.";

}

if ($process_name == "verify_code") {

$scan_code = $_POST['scan_code'];

$id = $_SESSION['id'];

$user_result = mysql_query("select * from users_info where id='$id'") or die(mysql_error());

$user_row = mysql_fetch_array($user_result);

$secret_key = $user_row['google_authentication'];

$checkResult = $gauth->verifyCode($secret_key, $scan_code, 2); // 2 = 2*30sec clock tolerance

if ($checkResult) {

$_SESSION['googleVerifyCode'] = $scan_code;

echo "done";

} else {

echo 'Note : Code not matched.';

}

home.php

<?php
include("conn.php");
if (empty($_SESSION['id'])) {
    echo "<script> window.location = 'index.php'; </script>";
}

$id = $_SESSION['id'];
$user_result = mysql_query("select * from users_info where id='$id'") or die(mysql_error());
$user_row = mysql_fetch_array($user_result);
?>
<!doctype html>
<html>
<head>
    <title>SoftAOX | Google Two Factor Authentication Sign In and Join Now using jQuery, PHP &amp; MySQL</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/app_style.css" charset="utf-8" />
</head>
<body>
    <div class="container" style="margin-top:20px;">
        <div class="row-fluid">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">Hi, <?php echo $user_row['user_name']; ?></h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3 col-lg-3 " align="center">
                                <img alt="User Pic" src="img/user_icon.png" class="img-circle img-responsive">
                            </div>
                            <div class=" col-md-9 col-lg-9 ">
                                <table class="table table-user-information">
                                    <tbody>
                                        <tr>
                                            <td>User Name:</td>
                                            <td>
                                                <?php echo $user_row[ 'user_name']; ?>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Email:</td>
                                            <td>
                                                <?php echo $user_row[ 'email']; ?>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Google Authenticator Code:</td>
                                            <td>
                                                <?php echo $user_row[ 'google_authentication']; ?>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <a href="logout.php">
                                    <button type="button" class="btn btn-primary">Logout</button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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>
</body>
</html>

<?php

include("conn.php");

if (empty($_SESSION['id'])) {

echo "<script> window.location = 'index.php'; </script>";

}

$id = $_SESSION['id'];

$user_result = mysql_query("select * from users_info where id='$id'") or die(mysql_error());

$user_row = mysql_fetch_array($user_result);

<!doctype html>

<html>

<head>

<title>SoftAOX | Google Two Factor Authentication Sign In and Join Now using jQuery, PHP & MySQL</title>

</head>

<body>

</div>

</div>

<tbody>

<tr>

<td>

<?php echo $user_row[ 'user_name']; ?>

</td>

</tr>

<tr>

<td>Email:</td>

<td>

<?php echo $user_row[ 'email']; ?>

</td>

</tr>

<tr>

<td>Google Authenticator Code:</td>

<td>

<?php echo $user_row[ 'google_authentication']; ?>

</td>

</tr>

</tbody>

</table>

<button type="button" class="btn btn-primary">Logout</button>

</a>

</div>

</body>

</html>

logout.php

<?php
session_start();
session_unset();
session_destroy();
echo "<script> window.location = './index.php'; </script>";
?>

<?php

session_start();

session_unset();

session_destroy();

echo "<script> window.location = './index.php'; </script>";

Preview & Download

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

Google Two Factor Authentication Sign In and Join Now using jQuery, PHP & MySQL

Share:

index.php

conn.php

conformation.php

user_validation.php

home.php

logout.php

Preview & Download

Mraj

Don't miss on latest updates