RestApiProfile by Thomas Aull

Build a rest API with ProcessWire. Including JWT-Auth and a Vue SPA example

Update

There is now a module for creation of a REST API in ProcessWire: https://github.com/thomasaull/RestApi Support and Updates for this site profile will be discontinued from now on

RestApiProfile

Build a rest API with ProcessWire. Including JWT-Auth and a Vue SPA example

Disclaimer

This is an example, there is no guarantee this code is secure! Use at your own risk and/or send me PRs with improvements.

Credits…

…go to Benjamin Milde for his code example on how to use FastRoute with ProcessWire and Camilo Castro for this Gist

Install

Grab a copy of processwire and place the site-restapi directory in the root of your ProcessWire directory. Install ProcessWire as usual (don’t forget to pick the site profile).

Then:

If you have composer installed run the following commands:

composer require nikic/fast-route
composer require firebase/php-jwt

Alternatively, you can grab the /vendor folder over here: https://github.com/thomasaull/RestApiProfile-Src

The Rest-API should work now. To check you can use Postman or Insomnia and run a GET Request:

http://your-dev-host.dev/api/test

You should get the following error:

{
  "error": "No Authorization Header found"
}

Because you’re not authenticated yet. To disable authentication, go to /site/templates/api/Router.php and in the function handle set the variable $authActive to false for now.

If you run the same Request again, you’ll get the following

{
  "user": "guest"
}

To use JWT-Auth you have to send a GET Request to http://yourhost/api/auth with two parameters, username and password. The API will log your user in and return you the JWT-Token, which you have to add to every following request.

An example for a simple login form is implemented as a Vue SPA based on the Vue Webpack Template. To install, go to /site/templates/client and run npm install

Go to /site/templates/client/config/index.js and change the target in proxyTable to match your URL:

proxyTable: {
  '/api': {
    target: 'http://change-to-your-dev-host.dev',
    changeOrigin: true
  }
},

Now run npm run dev, point your browser to http://localhost:8080 and you should be able to perform a login with your user.

Check the files components/Login.vue, components/Content.vue and the main.js inside /site/templates/client to learn how the login process works.

As a last step you should change your JWT Secret in your config.php. You can basically use any string but a good idea is to create a random string with the following PHP command:

echo base64_encode(openssl_random_pseudo_bytes(64));

Helper

There is a small helper class, which exposes some often used functionality. At the moment there's basically just one function available, but I for my part use it all the time: checkAndSanitizeRequiredParameters. This function checks if the client send all the parameters required and sanitizes them against a specified ProcessWire sanitizer. To use it call it first thing in your Api endpoint function:

public static function postWithSomeData($data) {
  // Check for required parameter "message" and sanitize with PW Sanitizer
  $data = ApiHelper::checkAndSanitizeRequiredParameters($data, ['message|text']);

  return "Your message is: " . $data->message;
}

An example can be found here: https://github.com/thomasaull/RestApiProfile/blob/master/templates/api/Test.php#L15

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Latest news

  • ProcessWire Weekly #515
    In the 515th issue of ProcessWire Weekly we’ll check out the latest core updates, new modules, and more. Read on!
    Weekly.pw / 23 March 2024
  • Invoices Site Profile
    The new invoices site profile is a free invoicing application developed in ProcessWire. It enables you to create invoices, record payments to them, email invoices to clients, print invoices, and more. This post covers all the details.
    Blog / 15 March 2024
  • Subscribe to weekly ProcessWire news

“The end client and designer love the ease at which they can update the website. Training beyond how to log in wasn’t even necessary since ProcessWire’s default interface is straightforward.” —Jonathan Lahijani