Membuat OTP SMS Di Laravel : Firebase

Nabil Mufti

December 24, 2023

Apa Itu OTP?

OTP adalah singkatan dari “One-Time Password”. Ini adalah sistem otentikasi yang memungkinkan pengguna untuk masuk ke jaringan atau layanan menggunakan kata sandi unik yang hanya dapat digunakan sekali. Sistem ini mencegah beberapa bentuk pencurian identitas dengan memastikan bahwa pasangan nama pengguna / kata sandi yang tertangkap tidak dapat digunakan kembali. Biasanya, nama pengguna pengguna tetap sama, dan kata sandi satu kali diganti setiap kali masuk 1. Kode sandi satu kali (OTP) adalah bentuk otentikasi yang kuat, memberikan perlindungan yang jauh lebih baik untuk eBanking, jaringan perusahaan, dan sistem lain yang mengandung data sensitive.

Apa itu Laravel?

Laravel adalah sebuah framework PHP yang menyediakan antarmuka yang mudah dan elegan untuk membuat dan menjalankan query database. Laravel dapat digunakan untuk melakukan sebagian besar operasi database di aplikasi Anda dan berfungsi dengan sempurna dengan semua sistem database yang didukung oleh Laravel. Laravel menggunakan binding parameter PDO untuk melindungi aplikasi Anda dari serangan injeksi SQL. Anda tidak perlu membersihkan atau menyaring string yang dikirimkan ke query builder sebagai binding query.

Langkah-Langkah :

Buat terlebih dahulu projek pada firebase nya
Setelah di buat langsung pilih authentication pada halaman firebase anda
Setelah itu langsung kita memilih phone karena kita mau ngirim otp melalui sms
Setup Controller nya untuk return view nya

<?php


namespace App\Http\Controllers;



use Illuminate\Http\Request;


class FirebaseController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        return view('firebase');
    }
}

Setelah Itu buat codingan return view nya dan setup js nya sesuai berikut

<html>
  <head>
    <title>Phone Number Authentication using Firebase In Laravel </title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <!-- Js only -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <div class="container text-center">
          <p>Phone Number Authentication using Firebase In Laravel</p>
        </div>
      </div>

      <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: "API KEY NYA DISINI ",
        authDomain: "AUTH DOMAIN DISINI",
        projectId: "PROJECT ID",
        storageBucket: "storage bucket disini",
        messagingSenderId: "740488583372",
        appId: "1:740488583372:web:0ba73a70f7b8b2d4b80a69",
        measurementId: "G-0RHPYTR95S",
      };

      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;

            $("#successRegsiter").text("you are register Successfully.");
            $("#successRegsiter").show();
          })
          .catch(function (error) {
            $("#error").text(error.message);
            $("#error").show();
          });
      }
    </script>
  </body>
</html>