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.