How to Make a Data API Request Directly From Your Browser

This article explains how you can make a request to the Data API from the client side.

The Data API is a back end service, however you can still make a request from the browser.

The basic steps to follow are:

  • Validate and sign the request from your server, and
  • Send a regular XHR request to the Data API.

In the example below, we simulate signing a request that has been sent from a client page.

The output of this routine will be sent to the Data API from the browser.

Example of signing Data API request data:

/*
|---------------------------------------------------------
| Sign a request payload for the Data API
|---------------------------------------------------------
|
| In this example we assume that the browser is POSTing
| data that should be sent to the Data API. This would be
| posted from a client webpage to a client server, not a
| Learnosity domain.
|
| Proper sanitisation/validation of the request data
| should happen before signing anything!!!
|
| Note: the example below is in PHP syntax.
|
*/

// Import the SDK to sign the request data
use LearnositySdk\Request\Init;

// Make sure you have your consumer credentials available
$consumer_key    = 'yis0TYCu7U9V4o7M';
$consumer_secret = '74c5fd430cf1242a527f6223aebd42d30464be22';

// Setup the mandatory `security` object
$security = [
    'consumer_key' => $consumer_key,
    'domain'       => 'localhost'
];

// Retrieve the `request` packet from the client side form POST
$request = $_POST['request'];

// The `action` will be `get` for reads
$action = 'get';

// Initialise the SDK Init class, passing in the relevant information
$Init = new Init(
    'data',
    $security,
    $consumer_secret,
    $request,
    $action
);

// Generate the signature and print it for the XHR response
echo json_encode($Init->generate(), true);

Now that you have a signature, all that's required is to POST the entire SDK signature to the Data API.

The SDK will return everything you need, including:

  • security
  • request
  • action

The following JavaScript example has methods to send the request to the client server for signature generation, then sends that response to the Data API.

Example of sending an XHR to the Data API:

// Include jquery just because it's easy
<script src="./assets/vendor/jquery/jquery-2.1.4.min.js"></script>

<script>
    /**
     * Sends an XHR request to an end-user server
     * passing all request parameters that will go
     * to the Data API.
     * @param  {object} request The request object
     * being passed to the Data API
     * @return void
     */
    function signRequest (request) {
        $.ajax({
            url: './signrequest.php',
            method: 'POST',
            data: {'request': request}
        }).done(function(data, status, xhr) {
            sendRequest(JSON.parse(data));
        }).fail(function(xhr, status, error) {
            console.log('Error: ', xhr, status, error);
        });
    }

    /**
     * Sends an XHR to the Data API with a fully signed
     * request.
     * @param  {object} signedRequest The `security`, `request`
     * and `action` keys to be POSTed to the Data API
     * @return void
     */
    function sendRequest (signedRequest) {
        var url = 'https://data.learnosity.com/v2022.1.LTS/itembank/items';

        $.ajax({
            url: url,
            method: 'POST',
            data: signedRequest
        }).done(function(data, status, xhr) {
            processResults(data);
        }).fail(function(xhr, status, error) {
            console.log('Error: ', xhr, status, error);
        });
    }

    /**
     * Do something with the results...
     * @param  {object} results The Data API response
     */
    function processResults (results) {
        console.log(results);
    }

    $(function() {
        // An object of request data
        var request = {
            'limit': 5
        };

        signRequest(request);
    });
</script>
Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.