Verifikasi OTP ponsel atau nomor ponsel Laravel 8 menggunakan firebase. Dalam tutorial ini, Anda akan belajar cara menggunakan otentikasi otp firebase untuk ponsel atau ponsel di aplikasi laravel 8.
pertama-tama, Anda perlu mengunjungi Konsol Firebase dan membuat proyek. maka Anda harus membuat aplikasi web pada proyek itu seperti gambar di bawah ini:
Tutorial Otentikasi Nomor Telepon (OTP) Laravel 8 Firebase
Setelah diberi nama dan selanjutnya Anda akan menerima firebase sdk seperti di bawah screen shot:
Selanjutnya Anda perlu mengaktifkan autentikasi nomor telepon dari tautan di bawah:
Anda harus menyimpan semua informasi itu karena kami akan menggunakan di aplikasi kami.
Langkah 1 - Unduh Aplikasi Laravel 8
Pertama-tama unduh atau instal pengaturan baru laravel 8. Jadi, buka terminal dan ketik perintah berikut untuk menginstal aplikasi laravel 8 baru ke mesin Anda:
composer create-project --prefer-dist laravel/laravel blogLangkah 2 - Menghubungkan Aplikasi ke Database
Pada langkah ini, atur database dengan aplikasi laravel 8 yang telah di-downloded / diinstal. Jadi, Anda perlu mencari file .env dan mengatur detail database sebagai berikut:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-passwordLangkah 3 - Buat View
Pada langkah ini, kunjungi direktori resources/views dan buat satu file view blade bernama index.blade.php. Dan kemudian tambahkan kode berikut ke dalamnya:
<html>
<head>
<title>Laravel 8 Phone Number Authentication using Firebase - Medikre.com</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel 8 Phone Number Authentication using Firebase - Tutsmake.com</h1>
<div class="alert alert-danger" id="error" style="display: none;"></div>
<div class="card">
<div class="card-header">
Enter Phone Number
</div>
<div class="card-body">
<div class="alert alert-success" id="sentSuccess" style="display: none;"></div>
<form>
<label>Phone Number:</label>
<input type="text" id="number" class="form-control" placeholder="+91********">
<div id="recaptcha-container"></div>
<button type="button" class="btn btn-success" onclick="phoneSendAuth();">SendCode</button>
</form>
</div>
</div>
<div class="card" style="margin-top: 10px">
<div class="card-header">
Enter Verification code
</div>
<div class="card-body">
<div class="alert alert-success" id="successRegsiter" style="display: none;"></div>
<form>
<input type="text" id="verificationCode" class="form-control" placeholder="Enter verification code">
<button type="button" class="btn btn-success" onclick="codeverify();">Verify code</button>
</form>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyBPdVwUIYOY0qRr9kbIMTnxKpFw_nkneYk",
authDomain: "itdemo-push-notification.firebaseapp.com",
databaseURL: "https://itdemo-push-notification.firebaseio.com",
projectId: "itdemo-push-notification",
storageBucket: "itdemo-push-notification.appspot.com",
messagingSenderId: "257055232313",
appId: "1:257055232313:web:3f09127acdda7298dfd8e8",
measurementId: "G-VMJ68DFLXL"
};
firebase.initializeApp(firebaseConfig);
</script>
<script type="text/javascript">
window.onload=function () {
render();
};
function render() {
window.recaptchaVerifier=new firebase.auth.RecaptchaVerifier('recaptcha-container');
recaptchaVerifier.render();
}
function phoneSendAuth() {
var number = $("#number").val();
firebase.auth().signInWithPhoneNumber(number,window.recaptchaVerifier).then(function (confirmationResult) {
window.confirmationResult=confirmationResult;
coderesult=confirmationResult;
console.log(coderesult);
$("#sentSuccess").text("Message Sent Successfully.");
$("#sentSuccess").show();
}).catch(function (error) {
$("#error").text(error.message);
$("#error").show();
});
}
function codeverify() {
var code = $("#verificationCode").val();
coderesult.confirm(code).then(function (result) {
var user=result.user;
console.log(user);
$("#successRegsiter").text("you are register Successfully.");
$("#successRegsiter").show();
}).catch(function (error) {
$("#error").text(error.message);
$("#error").show();
});
}
</script>
</body>
</html>Langkah 4 - Buat Route
Pada langkah ini, buka file web.php dari routes direcotry. Dan perbarui rute berikut ke file web.php:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FirebaseController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('firebase-phone-authentication', [FirebaseController::class, 'index']);
Langkah 5 - Buat Controller Dengan Artisan Command
Pada langkah ini, jalankan perintah berikut pada prompt perintah untuk membuat file controller:
php artisan make:controller FirebaseControlleSetelah itu, buka app/http/controllers dan buka file FirebaseController.php. Dan perbarui kode berikut ke dalamnya:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FirebaseController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index()
{
return view('index');
}
}Langkah 6 - Jalankan Development Server
Terakhir, buka command prompt dan jalankan perintah berikut untuk memulai server pengembangan:
php artisan serveKemudian buka browser Anda dan tekan url berikut di atasnya:
http://127.0.0.1:8000/firebase-phone-authentication
andriajah