Our Work

GETTING DATA FROM LARAVEL VIA WIDGET

Updated 17 days ago

Laravel (Web Application) as content provider for a Web Widget

You can refer the code here : https://github.com/KtreeOpenSource/Laravel_Jswidget

Here we going to learn about how we make a web widget to bring authenticated data from a laravel application

These are steps we are going to follow

  • Create the routes
  • Create the controller
  • Create the widget file

Step 1:

Install the passport package refer link

Lets create the routes for logging and getting helloworld from the laravel application after installing and configuring the passport package.

path:routes/api.php

Route::post('login', 'API\[email protected]');

Route::group(['middleware' => 'auth:api'], function(){
   Route::post('helloworld', 'API\[email protected]');
   });

Step 2:

Create a controller for the routes in Step 1.

On click get access token button we will call the login function.

path:app/Http/Controllers/API/UserController.php

public $successStatus = 200;
public function login(){
       if(Auth::attempt(['email' => request('email'), 'password' => request('password')])){
           $user = Auth::user();
           $success['token'] =  $user->createToken('MyApp')-> accessToken;//token generated
           return response()->json(['success' => $success], $this-> successStatus);
       }
       else{
           return response()->json(['error'=>'Unauthorised'], 401);
       }
   }

Step 3:

Let's create the a php form assuming we have correct credentials

path:public/widget.php

<form>
      <input type='hidden' name="email" value="[email protected]"><br>
      <input type='hidden' name="password" value="anandc123"><br>
      <input name="submit" type="submit" value="Get Oauth Token">
      <br>
      Token <input disabled="true" type="text"   id="key" class='helloworld' value=''/>
      <br>
      <button disabled="true"  id='getdata' class='helloworld' >Get Data From Laravel api</button>
      <br>
      <div style="display:none" id='finalValue' >Data From Laravel is this </div>
    </form>

JavaScript:

 $(function () {
        $('#getdata').on('click',function(e){
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'http://xxxxxxxxx/api/helloworld',
            headers: {
                Authorization:$('#key').val()
            },
            success: function (data) {    
                $('#finalValue').text($('#finalValue').text()+' "'+data.description+'"')
                $('#finalValue').css("display","block")
            }
          });
        })
$(document).ajaxStart(function() {
  $("#wait").css('display','block');
}).ajaxStop(function() {
  $("#wait").css('display','none');
});
        $('form').on('submit', function (e) {
          e.preventDefault();
          $.ajax({
            type: 'post',
            url: 'http://xxxxxxxxx/api/login',
            data: $('form').serialize(),
    ajaxStart:function(){
                  $("#wait").css("display", "block");
            },
            success: function (data) {
                var token =  data.success.token
                if(token)
                {
                    $('.helloworld').prop('disabled',false);
                    $('.helloworld').val('Bearer '+token);
//                    $('#finalValue').text('Token Generated Successfully');
//                    $('#finalValue').css("display","block");
                }
                else
                {
                    alert('oops token not generated');
                }
            }
          });
        });
      });

The widget.php can be included anywhere(in other applications) and requests can be send to the laravel application.

 

Please Contact us if you have any Laravel Implementation requirements.Hire dedicated Laravel developers or Laravel Development services from KTree. KTree is Best offshore Laravel development company with extensive experience in building Laravel web applications and Laravel Plugins.
KTree is one of top most Web Application Development company from India which specializes in Web Application development and Mobile Apps Development

Related Posts

Tags

    No tag results found for this post