OTPLess integration with laravel

OTPLess integration with laravel

In place of more conventional ways like usernames and passwords or one-time passwords (OTPs), users may now login to third-party apps and websites using their WhatsApp accounts. Thanks to a new authentication mechanism called Login with WhatsApp. This approach is based on the secure authentication standards.

https://otpless.com/login
https://otpless.com/dashboard/customer/dev-settings

APP ID: 9MR6Y9LD1D56GGC2YLTQ
Client ID: UIAZVI30X5QM43DM16NS1IT91D8V5Z6R
Client Secret: 1xhz2zmx1vuo9q9ovfixj37zdhoa66lb
inside Login.php or Loging.blade.php

https://otpless.com/platforms/javascript

<script id="otpless-sdk" type="text/javascript" data-appid="EP616J0T6JJ69SCHE769" 
src="https://otpless.com/v3/auth.js"></script>
<div id="otpless-login-page"></div>

<script type="text/javascript"> 

function otpless(otplessUser) 
  {  
    console.log(JSON.stringify(otplessUser.token)); 
  } 

</script>
Customize this login page

https://otpless.com/dashboard/customer/customization/widget
https://otpless.com/platforms/verify-sdk-token

curl --location 'https://auth.otpless.app/auth/userInfo' 
--header 'Content-Type: application/x-www-form-urlencoded' 
--data-urlencode 'token=RECEIVED_TOKEN_FROM_OTPLESS' 
--data-urlencode 'client_id=UIAZVI30X5QM43DM16NS1IT91D8V5Z6R' 
--data-urlencode 'client_secret=1xhz2zmx1vuo9q9ovfixj37zdhoa66lb'

Goto postmen and past this curl code by clicking ctrl+v

You will get this kind of code from postmen

<?php

$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL => 'https://auth.otpless.app/auth/userInfo',
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => '',
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => 'POST',
CURLOPT_POSTFIELDS => 'token=RECEIVED_TOKEN_FROM_OTPLESS&client_id=UIAZVI30X5QM43DM16NS1IT91D8V5Z6R&client_secret=1xhz2zmx1vuo9q9ovfixj37zdhoa66lb',
CURLOPT_HTTPHEADER => array(
'Content-Type: application/x-www-form-urlencoded'
),
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;
login.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div class="container">
<div class="card">

<script id="otpless-sdk" type="text/javascript" src="https://otpless.com/v2/auth.js" 
data-appid="9MR6Y9LD1D56GGC2YLTQ"></script>

<div id="otpless-login-page"></div>

<form method="post" action="login-handle.php" id="submitOtpLessForm">
<input type="hidden" name="otplessToken" id="otplessToken" />

</form> 

</div>
</div>

<script type="text/javascript">

function otpless(otplessUser) 
{ 

let token = JSON.stringify(otplessUser.token); 
$('#otplessToken').val(token);
$('#submitOtpLessForm').submit();

}

</script>
login.blade.php

<form method="post" action="{{route('otplesslogin')}}" id="submitOtpLessForm">
    @csrf
    <inputtype="hidden" name="otplessToken" id="otplessToken"/>
</form>

<script type="text/javascript"> 
    function otpless(otplessUser) {
      let token = JSON.stringify(otplessUser.token); $('#otplessToken').val(token);
      $('#submitOtpLessForm').submit(); }
</script>
web.php

use App\Http\Controllers\Otplesslogin;

Route::post('otplesslogin', [Otplesslogin::class, 'otplesslogin'])->name('otplesslogin');
login-handler.php

<?php 

if(isset($_POST['otplessToken'])){

$token = $_POST['otplessToken'];
$token = substr($token,1, -1);
$curl = curl_init(); 
curl_setopt_array($curl, array( 
CURLOPT_URL => 'https://auth.otpless.app/auth/userInfo', 
CURLOPT_RETURNTRANSFER => true, 
CURLOPT_ENCODING => '', 
CURLOPT_MAXREDIRS => 10, 
CURLOPT_TIMEOUT => 0, 
CURLOPT_FOLLOWLOCATION => true, 
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1, 
CURLOPT_CUSTOMREQUEST => 'POST', 
CURLOPT_POSTFIELDS => 'token='.$token.'&client_id=UIAZVI30X5QM43DM16NS1IT91D8V5Z6R&client_secret=1xhz2zmx1vuo9q9ovfixj37zdhoa66lb', 
CURLOPT_HTTPHEADER => array( 'Content-Type: application/x-www-form-urlencoded' ), )); 

$response = curl_exec($curl); 
curl_close($curl); 

// echo "<pre>";
// print_r($response); die();

$res = json_decode($response, true);
// get data in the form of array if set true

if(array_key_exists('message', $res)){
    Header( 'Location: login.php?success=0' );
}
else{
   
$name = $res['name'];
$email = $res['email'];

include('db.php');

$sql = "INSERT INTO users (name, email, password)
VALUES ('$name', '$email', '$token')";

if (mysqli_query($conn, $sql)) {
Header( 'Location: contact.php?success=1' );
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
session_start();

$_SESSION["name"] = $name;
$_SESSION["email"] = $email;

Header( 'Location: index.php' );

}

}

?>
Otplesslogin (Controller):

   function loginHandler($token){
        $curl = curl_init();
        curl_setopt_array($curl, array(
        CURLOPT_URL => 'https://auth.otpless.app/auth/userInfo',
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_ENCODING => '',
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 0,
        CURLOPT_FOLLOWLOCATION => true,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => 'POST',
        CURLOPT_POSTFIELDS => 'token='.$token.'&client_id=qi27i2nx&client_secret=lg9986vevkn60ebf',
        CURLOPT_HTTPHEADER => array(
        'Content-Type: application/x-www-form-urlencoded'
        ),

        ));

        $response = curl_exec($curl);
        curl_close($curl);
        return json_decode($response, true);
    }

    function otplesslogin(Request $req){
         $token = substr($req->otplessToken, 1, -1);
         $verfiedData = $this->loginHandler($token);
         // dd($verfiedData);
         $res = $verfiedData;
 
         if(array_key_exists('message', $res)){
            return back()->with('msg', 'Token Has Been Expired !');
         }
         else{
            $phone = '';
            $email = '';
    
            if(array_key_exists('phone_number', $res)){
               $phone = $res['phone_number'];
            }
   
           if(array_key_exists('email', $res)){
               $email = $res['email'];
            }
    
           $name = $res['name'];
           $check = DB::table('users')->where('email', $email)->Orwhere('phone', $phone)->count();

             if($check){
                 // add here insert or update code for login signup
              }    
           }
         }
index.php

<?php
session_start();

if(!$_SESSION["email"]){

?>

<li><a href="register.php">Register</a></li>
<li><a href="login.php">Login</a></li>

<?php } else { ?>
<li><a style="color:white"><?php echo $_SESSION["email"]; ?></a></li>
<?php } ?>

 

OTPLess Html Code For Vue Js Type Project

<head>

<!-- OTPLESS SDK -->

<script
  id="otpless-sdk"
  type="text/javascript"
  data-appid="EP616J0T6JJ69SCHE769"
  src="https://otpless.com/v2/auth.js">
</script>

</head>
loginpage

<div id="otpless-login-page"></div>
 mounted() {

            window.otpless = (otplessUser) => {
            let tokens = otplessUser.token;

            // this.submitForm();
            let siteurl = 'http://localhost:8000/api';
            let path = siteurl+"/loginuser";

            // alert(typeof(tokens));
            axios.post(path, {token:tokens})
            .then((datas) => {
                console.log(datas);
                this.form.email = datas.data.email;
                this.form.password = datas.data.password;
                console.log(this.form);

                this.$store.dispatch('login', this.form).then((datas) => {
                alertService.success(datas.data.message);
                    if (this.carts.length > 0) {
                        router.push({ name: "frontend.checkout" });
                    } else {
                        router.push({ name: "frontend.home" });
                    }  
                });
                   
            });

           };

       },

 data() {
        return {
            form: {
                email: "",
                password: ""
            },
        }
    },

 

 

 

Tags: , , , , , , ,

Leave a Reply