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.