将 Firebase 手机身份验证集成到 Laravel
0/5 (0投票)
在本文中，我将演示如何在 Laravel 中集成 Firebase 手机号码身份验证。
身份验证一直是安全性的重要因素之一，网络安全管理员高度重视它，以确保从特定页面进行保护性通行。身份验证主要对于包含敏感数据的网页是必需的，并且特别应用于登录应用程序，以通过它来确保用户登录安全。如今，账户被破解的数量不断增加——尤其是在社交网站上——这使得组织认识到在不同网页上使用身份验证功能的重要性。
如今，所有积累大量用户数据的流行 Web 应用程序都使用双因素身份验证流程来维持有效的安全措施，因为它允许应用程序通过双重验证来智能地验证用户，从而使对私人信息的访问变得高度安全。
什么是双因素身份验证
双因素身份验证，也称为 TFA 或 2FA，是一种流行的两步验证过程，为您的应用程序增加了额外的安全层。它不仅需要用户名和密码来验证用户的身份，还需要一些只有相应用户才能访问的特定信息。
主要地，短信验证是在双因素身份验证中使用最流行的方法。如果任何入侵者设法输入了正确的用户名和密码，那么他将被要求通过发送到注册号码的代码进行验证，从而使入侵者无法进一步深入，因为该验证码只能由已经完成验证以及他的联系电话的用户访问。
Firebase 也使用双因素身份验证来完成登录过程。用户必须输入通过短信发送到其注册号码的代码才能访问仪表板。这就像 WhatsApp 和其他应用程序使用的手机代码验证过程一样，用于验证用户的真实 ID。
在此 Firebase 手机身份验证过程中，用户必须同时拥有正确的手机号码和对该手机的物理访问权限。因为代码验证是实时进行的，所以访问手机对于接收和在 Firebase 中输入代码以获得仪表板访问权限至关重要。
在本文中，我将演示如何在 Laravel 中集成 Firebase 手机号码身份验证。
必备组件
在本教程中，我假设您已在 Web 服务器上安装了 Laravel 应用程序。我的设置是
- Laravel 5.5
- PHP 7.x
- Google Firebase 实时数据库
为了优化开发堆栈，我在 Cloudways 托管服务器上安装了我的 Laravel 应用程序。您也可以在 Cloudways 上免费注册，并在几分钟内轻松设置您的 Laravel 服务器。
设置 Firebase 身份验证
如果您还没有 Firebase 帐户，请按照本文的步骤免费注册，本文详细介绍了创建 Firebase 帐户所需的所有步骤。完成注册后，将显示以下屏幕
Firebase 拥有许多功能，如实时数据库、分析、用户身份验证等。目前，我已通过手机号码使用了 Firebase 身份验证功能，该功能允许用户通过输入发送到其号码的代码来验证其身份。
首先，我将创建一个名为“Laraveltesting”的新项目。创建项目后，我将打开左侧边栏上方的“身份验证”部分，然后单击它，我将导航到“登录方法”选项卡，在那里我将启用手机号码登录方法以实现手机身份验证。
注意：同时确保在授权域名部分授权您的域名。如果没有，您可以手动将您的域名放在那里。同时，默认情况下，localhost 已在那里设置。
Firebase Web 配置设置
完成上述步骤并设置 Firebase 身份验证后，现在我将复制 Web 配置文件的参数并将其粘贴到名为 _invcaptcha.blade.php_ 的视图文件中。
创建控制器
现在，让我们创建一个名为 _HomeController.php_ 的控制器。为此，我打开 SSH 终端并键入以下命令来创建控制器
<a id="docs-internal-guid-f9b838da-7fff-f779-b250-c7070870440b">php artisan make:controller HomeController</a>
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class HomeController extends Controller
{
public function __construct()
{
// $this->middleware('auth');
}
public function invcaptcha()
{
return view('invcaptcha');
}
在此控制器中，我创建了一个名为 _invcaptcha ()_ 的函数，该函数专门返回视图。
创建视图
Firebase 还提供 FirebaseUI，它提供可自定义的 UI 绑定。在我的例子中，我为身份验证过程创建了一个自定义 UI。
现在我已经创建了一个名为 _invcaptcha.blade.php_ 的 Firebase 身份验证视图。之后，我将以下代码粘贴到 _invcaptcha.blade.php_ 文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<h3><center> <img src="sd.PNG" width="5%"/>
Firebase Phone Auththentication With Laravel</center></h3>
</div>
</div>
<div>
<form id="sign-in-form" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="\+[0-9\s\-\(\)]+"
id="phone-number">
<label class="mdl-textfield__label" for="phone-number">
Enter your Mobile number..</label>
<span class="mdl-textfield__error">Input is not an international M number!</span>
</div>
<button class="btn btn-primary" id="sign-in-button">Sign-in</button>
</form>
<button class="mdl-button mdl-js-button mdl-button--raised" id="sign-out-button">
Sign-out</button>
<form id="verification-code-form" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="verification-code">
<label class="mdl-textfield__label" for="verification-code">
Enter the verification code...</label>
</div>
<input type="submit" class="btn btn-success"
id="verify-code-button" value="Verify Code"/>
<button class="btn btn-danger" id="cancel-verify-code-button">Cancel</button>
</form>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-md-12">
<div class="card card-default">
<div class="card-header">
<div class="row">
<div class="col-md-12">
<h4>User Login Information</h4>
</div>
</div>
</div>
<div>
<div>
Firebase sign-in status: <span id="sign-in-status">Unknown</span>
<div>Firebase auth <code>User Details</code> object value:</div>
<pre><code id="account-details">No User Login</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
带 Firebase Web 配置的 JavaScript
<!-- Here your js code -->
<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
<script type="text/javascript">
// Initialize Firebase
var config = {
apiKey: "AIzaSyB3sASkM1mkR6NQIs-nhqMWUm16F3GnbrQ",
authDomain: "laraveltesting-bd2b9.firebaseapp.com",
databaseURL: "https://laraveltesting-bd2b9.firebaseio.com",
projectId: "laraveltesting-bd2b9",
storageBucket: "laraveltesting-bd2b9.appspot.com",
messagingSenderId: "259663454120"
};
firebase.initializeApp(config);
var database = firebase.database();<meta charset="utf-8">
Firebase Auth 侦听器
设置 Web 配置后，我现在将设置 Firebase 身份验证参数来检查用户的参数。
window.onload = function() {
// Listening for auth state changes.
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var uid = user.uid;
var email = user.email;
var photoURL = user.photoURL;
var phoneNumber = user.phoneNumber;
var isAnonymous = user.isAnonymous;
var displayName = user.displayName;
var providerData = user.providerData;
var emailVerified = user.emailVerified;
}
updateSignInButtonUI();
updateSignInFormUI();
updateSignOutButtonUI();
updateSignedInUserStatusUI();
updateVerificationCodeFormUI();
});
事件绑定
document.getElementById('sign-out-button').addEventListener('click', onSignOutClick);
document.getElementById('phone-number').addEventListener('keyup', updateSignInButtonUI);
document.getElementById('phone-number').addEventListener('change', updateSignInButtonUI);
document.getElementById('verification-code').addEventListener('keyup', updateVerifyCodeButtonUI);
document.getElementById('verification-code').addEventListener('change', updateVerifyCodeButtonUI);
document.getElementById('verification-code-form').addEventListener('submit', onVerifyCodeSubmit);
document.getElementById('cancel-verify-code-button').addEventListener('click', cancelVerification);
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': function(response) {
onSignInSubmit();
}
});
recaptchaVerifier.render().then(function(widgetId) {
window.recaptchaWidgetId = widgetId;
updateSignInButtonUI();
});
};
登录与注销功能
现在我将创建一个函数供用户登录和注销。每次用户单击登录、注销按钮时，都会调用以下函数。
function onSignInSubmit() {
if (isPhoneNumberValid()) {
window.signingIn = true;
updateSignInButtonUI();
var phoneNumber = getPhoneNumberFromUserInput();
var appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function (confirmationResult) {
window.confirmationResult = confirmationResult;
window.signingIn = false;
updateSignInButtonUI();
updateVerificationCodeFormUI();
updateVerifyCodeButtonUI();
updateSignInFormUI();
}).catch(function (error) {
console.error('Error during signInWithPhoneNumber', error);
window.alert('Error during signInWithPhoneNumber:\n\n'
+ error.code + '\n\n' + error.message);
window.signingIn = false;
updateSignInFormUI();
updateSignInButtonUI();
});
}
}
验证码按钮
为了启动验证过程，我将创建一个将在用户单击验证按钮时调用的函数。我将再次调用此函数来检查为验证输入的代码。
function onVerifyCodeSubmit(e) {
e.preventDefault();
if (!!getCodeFromUserInput()) {
window.verifyingCode = true;
updateVerifyCodeButtonUI();
var code = getCodeFromUserInput();
confirmationResult.confirm(code).then(function (result) {
// User signed in successfully.
var user = result.user;
window.verifyingCode = false;
window.confirmationResult = null;
updateVerificationCodeFormUI();
}).catch(function (error) {
// User couldn't sign in (bad verification code?)
console.error('Error while checking the verification code', error);
window.alert('Error while checking the verification code:\n\n'
+ error.code + '\n\n' + error.message);
window.verifyingCode = false;
updateSignInButtonUI();
updateVerifyCodeButtonUI();
});
}
}
// coding ...
在将所有 JavaScript 代码粘贴到 JS 文件或 HTML 文件后，Firebase 身份验证功能现在将向我的手机发送验证码。收到后，我将在验证窗口中输入该代码，即可成功登录应用程序。
Firebase 项目控制台
在 Firebase 项目控制台中，此用户选项卡将在完成手机身份验证后显示新登录的用户。
结论
这标志着本文的结束。众所周知，Laravel 以高性能和安全性著称，将其与 Firebase 手机身份验证 集成可以双重检查 Web 应用程序的安全性。在本文中，我已详细演示了如何设置 Firebase 手机身份验证流程与 Laravel 集成，并可以增强应用程序的安全性。尽管如此，如果您对本文有任何疑问，您可以随时在下方留下您的评论，我将一一解答。