<?php
Route::resource('/','NewregController');
Route::post('/success','NewregController@otpfbase');
Now open our NewregController.php from app/Http/Controller folder and insert the following lines of code into it.
public function index()
{
return view('new_registration');
}
Now let's create user interface. Move on to folder view which is under resources folder. In this folder we will create three files. app.blade.php, new_registration.blade.php and otp_success.blade.php. Point the cursor in views folder, right click the mouse button, select New File, type app.blade.php and press enter. Your app.blade.php file created. Create another two files, add the following lines of codes in these files and save all three files.
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name') }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- firebase otp1 -->
<script src="https://www.gstatic.com/firebasejs/7.21.1/firebase.js"></script>
<script>
var config = {
apiKey: "{{ config('app.firebase_api_key') }}",
authDomain: "{{ config('app.firebase_auth_domain') }}",
databaseURL: "{{ config('app.firebase_database_url') }}",
projectId: "{{ config('app.firebase_project_id') }}",
storageBucket: "{{ config('app.firebase_storage_bucket') }}",
messagingSenderId: "{{ config('app.firebase_messaging_sender_id') }}",
appId: "{{ config('app.firebase_app_id') }}",
measurementId: "{{ config('app.firebase_measurement_id') }}"
};
firebase.initializeApp(config);
</script>
<script src="https://cdn.firebase.com/libs/firebaseui/2.3.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.3.0/firebaseui.css" />
<!--<script src="https://cdn.firebase.com/libs/firebaseui/4.6.1/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.6.1/firebaseui.css" />-->
<!-- end firebase otp1 -->
</head>
<body class="bg-light">
<div id="app">
<main class="py-4">
@yield('content')
</main>
</div>
<!-- firebase otp2 -->
<script>
function getUiConfig() {
return {
'callbacks': {
'signInSuccess': function(user, credential, redirectUrl) {
handleSignedInUser(user);
return false;
}
},
'signInFlow': 'popup',
'signInOptions': [
//firebase.auth.GoogleAuthProvider.PROVIDER_ID,
//firebase.auth.FacebookAuthProvider.PROVIDER_ID,
//firebase.auth.TwitterAuthProvider.PROVIDER_ID,
//firebase.auth.GithubAuthProvider.PROVIDER_ID,
//firebase.auth.EmailAuthProvider.PROVIDER_ID,
{
provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
recaptchaParameters: {
type: 'image',
size: 'invisible',
badge: 'bottomleft'
},
defaultCountry: 'IN',
defaultNationalNumber: '1234567890',
loginHint: '+11234567890'
}
],
'tosUrl': 'https://www.google.com'
};
}
var ui = new firebaseui.auth.AuthUI(firebase.auth());
var handleSignedInUser = function(user) {
document.getElementById('user-signed-in').style.display = 'block';
document.getElementById('user-signed-out').style.display = 'none';
document.getElementById('phone').textContent = user.phoneNumber;
document.getElementById('mobile_no').value = user.phoneNumber;
document.getElementById('sign-out').click();
};
var handleSignedOutUser = function() {
document.getElementById('user-signed-in').style.display = 'none';
document.getElementById('user-signed-out').style.display = 'block';
ui.start('#firebaseui-container', getUiConfig());
};
firebase.auth().onAuthStateChanged(function(user) {
document.getElementById('loading').style.display = 'none';
document.getElementById('loaded').style.display = 'block';
user ? handleSignedInUser(user) : handleSignedOutUser();
});
var initApp = function() {
document.getElementById('sign-out').addEventListener('click', function() {
firebase.auth().signOut();
});
};
window.addEventListener('load', initApp);
</script>
<!-- end firebase otp2 -->
</body>
</html>
new_registration.blade.php
@extends('app')
<style>
body {
margin: 0;
}
#container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.clearfix {
clear: both;
}
.hidden {
display: none;
}
#user-info {
border: none;
clear: both;
margin: 0 auto 20px;
max-width: 400px;
padding: 10px;
text-align: left;
}
</style>
@section('content')
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<a class="navbar-brand mr-auto mr-lg-0" href="#">{{ config('app.name') }}</a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="nav-scroller bg-white shadow-sm">
<nav class="nav nav-underline">
<a class="nav-link active" href="#">-</a>
</nav>
</div>
<main role="main" class="container">
<div class="my-3 p-3 bg-white rounded shadow-sm">
<div class="row">
<!----------------------------------- firebase otp ---------------------->
<div class="col-sm-12">
<div class="card text-center">
<div class="card-header text-white bg-info">
New Applicant
</div>
<div class="card-body">
<div id="container">
<!--<h3>Authentication via Gmail/Phone number</h3>-->
<h3>User Authentication</h3>
<div id="loading">Loading...</div>
<div id="loaded" class="hidden">
<div id="main">
<div id="user-signed-in" class="hidden">
<form action="{{ url('/success') }}" method="post">
{{ csrf_field() }}
<div id="user-info">
<div id="phone"></div>
<input type="text" id="mobile_no" name="mobile_no" >
<div class="clearfix"></div>
</div>
<p>
<button type="submit" id="sign-out">Sign Out</button>
</p>
</form>
</div>
<div id="user-signed-out" class="hidden">
<div id="firebaseui-spa">
<!--<h3>App:</h3>-->
<div id="firebaseui-container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------end firebase otp --------------------->
</div>
</div>
</div>
</main>
@endsectionotp_success.blade.php
@extends('app')
@section('content')
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<a class="navbar-brand mr-auto mr-lg-0" href="#">{{ config('app.name') }}</a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="nav-scroller bg-white shadow-sm">
<nav class="nav nav-underline">
<a class="nav-link active" href="#">-</a>
</nav>
</div>
<main role="main" class="container">
<div class="my-3 p-3 bg-white rounded shadow-sm">
<div class="card text-center">
<h3> OTP Verification successful</h3>
</div>
</div>
</div>
</main>
@endsectionHere is the look of current VsCode editor
Open your NewregController.php file again to add these lines of code.
public function otpfbase(Request $request){
try {
$mobile_no = $request->mobile_no;
if (!empty($mobile_no)){
return view('otp_success');
}
} catch (Exception $e) {
return redirect()->action('NewregController@index');
}
}After insert these lines your NewregController.php file looks like this
Our coding part is now completed! Now open the terminal in VsCode editor and start your server to test our Laravel Application we have created. Here is the command.
php artisan serve
Please note that your laravel service starts on http://127.0.0.1:8000. By default 127.0.0.1 not included as authorized domain in Firebase. If you run your application in http://localhost:8000 your application will run perfectly. But if you run your application from http://127.0.0.1:8000 Firebase gives you error like "Hostname match hot found Dismiss". So let's fix this issue!
Log on to your Firebase account, Select Develop, then Authentication then Sign-in method and click Add Domain, type 127.0.0.1 and click Add button.
Open your Browser, type http://127.0.0.1:8000 in address bar and here is your application
Now test the application, type your mobile number, hit verify. If you are using this application from other country outside India, please select your country code from drop-down menu. You can set your own country code in app.blade.php file so that your country code will show by default.
Type 6 digit verification code and hit continue. If you enter correct verification code you will be redirected to success page.
for wrong verification code here application will ask for correct verification code
That's all for now! If you have any problem in execution of code, please comment below. I will try to give the answer.
i'm having error of Target class [NewregController] does not exist
ReplyDelete