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.

Twitter updates

  • New TinyMCE 6.2.0 Inputfield released for ProcessWire— More
    28 October 2022
  • This week we take a look at a new rich text editor for ProcessWire, why we chose it, some highlights, screenshots, and why we think you’ll like it— More
    21 October 2022
  • This week we have ProcessWire 3.0.206 on the dev branch and a new version of the ProDevTools UserActivity module, which we'll take a closer look at in this post— More
    7 October 2022

Latest news

  • ProcessWire Weekly #447
    In the 447th issue of ProcessWire Weekly we'll share the latest core updates, introduce a new third party module called RockVideoThumbnailGrabber, and more. Read on!
    Weekly.pw / 3 December 2022
  • New rich text editor for ProcessWire
    This week we take a look at a new rich text editor for ProcessWire, why we chose it, some highlights, screenshots, and why we think you’ll like it.
    Blog / 21 October 2022
  • 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