May 28, 2016 by Mark
- Create a Saved Query This is the sql we’ll execute by calling the API.
- Create an Authorization Token This gives us an Authorization Key to use in the API call.
- Implement the HTML What to include to make an api call.
About Testing Locally
When testing html files that call the Lite Engine API, the files must be served by an http server. When an html file on the filesystem (ie the users Desktop for example) is opened by a browser, the browser doesn’t populate the Origin header when making CORS xhr reqeusts. This is due to browsers enforcing the ‘same origin’ policy on the local filesystem. Lite Engine relies on the Origin header being populated to whitelist the calling domain.
If you’re just starting your web development journey, or simply want to experiment using our API in a webpage, we recommend setting up a free account at neocities.org were html can be edited, in the browser.
Step 1: Create a Saved Query
First, login in theadmin application and create new Saved Query name "hello_world.sql", and click to open it. Then paste the SQL below into the textarea and save. Note the flavor of SQL we’re using here is the one spoken by Sqlite , there are lots of tutorials online.
select ('Hello ' || :name) as message;
You can test execute the query by clicking the ‘exec’ button. Note the API requires an offset and limit value be passed with each exec or mexec call, and if not provided default to 0 and 10 respectively. Put a value in the ‘name’ field and click the Test button. The result will be displayed.
Step 2: Create an Authorization Token
Calls to the API require an Account Key, and an Authorization Key. The Account Key is available in the admin application under Settings -> Basic Information. Next, we need an Authorization Key for this service. Calling queries in Lite Engine is restricted two ways: by manually managing Authorization Tokens, or by setting User permissions if using the User API. Here we will create an Authorization Token, with an Authorization Key for this query specifically.
In the admin applciation, navigate to Settings -> Auth Tokens. Click the ‘+’ button to add an Authorization Token. Give the token a name, and specify the permissons as the name of the query, minus the ‘.sql’. Be sure to set the token as Active by clicking the checkbox.
At this point we can execute our Hello World service with the following curl:
curl -d "name=World" -H "Authorization: $acct_key $authorization_key" / https://www.lite-engine.com/api/exec/hello_world
Step 3: Implement the HTML
Then we’ll need a form to post to our hello_world service. This should be an ajax form submission (using jquery, see below).
<form id="helloForm" role="form"> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name" name="name" placeholder="Enter name"> </div> <button id="helloFormSubmit" type="submit" class="btn btn-default" onclick="$('#helloForm').submit();">Submit</button> </form>
The final result can be found here . This has been a basic, bare bones introduction making CORS requests with Lite Engine. Subsequent documents will build on this, stay tuned!