Jump to content
thomasaull

Rest-API site profile

Recommended Posts

I recently started to build Vue SPAs with ProcessWire as the backend, connected with a REST API. Thanks to code and the help of @LostKobrakai (How to use FastRoute with ProcessWire) and @clsource (REST-Helper) I got it up and running pretty quickly and now have put all of it in a site profile for others to use. It includes the REST API with routing for different endpoints, JWT Auth and a simple Vue SPA which shows the process of logging in a user (nevertheless, you don't have to use the Vue part, the API will work on it's own).

Check it out here: https://github.com/thomasaull/RestApiProfile

I'm pretty sure, it's not the perfect or most sophisticsted solution, but it gets the job done for me…

Feedback or Improvements are very welcome :)

Update: This site profile is a module now: https://github.com/thomasaull/RestApi

  • Like 28
  • Thanks 2

Share this post


Link to post
Share on other sites

Seems great. Awesome Job!.

Thanks for sharing.

I think the JWT Auth may become a module on it´s own.

For folks who don´t know about JWT. It´s a standard for Authentication Using Json.

https://jwt.io/

:)

  • Like 2

Share this post


Link to post
Share on other sites
4 hours ago, thomasaull said:

I recently started to build Vue SPAs with ProcessWire as the backend, connected with a REST API.

Sounds awesome, never done anything like this before, can we see an example application?

Share this post


Link to post
Share on other sites
3 hours ago, SamC said:

Sounds awesome, never done anything like this before, can we see an example application?

Unfortunately, one is not public – the other one not finished (not public either, but I might put in in my portfolio with a screencast or anything)

  • Like 2

Share this post


Link to post
Share on other sites
5 hours ago, clsource said:

I think the JWT Auth may become a module on it´s own.

Are you working on it? ;) I'm not sure if you need a module for that, the only thing which makes sense being managed by the backend is the JWT Secret maybe… But by all means it might make things easy for people who are not familiar with JWT!

Share this post


Link to post
Share on other sites
13 minutes ago, thomasaull said:

Unfortunately, one is not public – the other one not finished (not public either, but I might put in in my portfolio with a screencast or anything)

Yeah that'd be good, thanks.

Share this post


Link to post
Share on other sites

Nice! 

But I wonder if the JWT are really necessary here—or why the implementation?
Doesn't the server session / processwire handle that already?

Share this post


Link to post
Share on other sites
On 4/12/2017 at 6:19 PM, thomasaull said:

Are you working on it? ;) I'm not sure if you need a module for that, the only thing which makes sense being managed by the backend is the JWT Secret maybe… But by all means it might make things easy for people who are not familiar with JWT!

Not really at the moment. Just an idea :)

4 hours ago, blynx said:

Nice! 

But I wonder if the JWT are really necessary here—or why the implementation?
Doesn't the server session / processwire handle that already?

JWT is just a communication system.
If you look at the profile is the Processwire auth system that is used at the end.

Instead of using oAuth or Basic Authentication
JWT can be used for getting user roles and data without requiring to log in the user on every request,
saving server resources :)

 

  • Like 2

Share this post


Link to post
Share on other sites
15 hours ago, blynx said:

Nice! 

But I wonder if the JWT are really necessary here—or why the implementation?
Doesn't the server session / processwire handle that already?

It's not necessary, just one way of authentication. Basic Auth is perfectly fine aswell :)

  • Like 1

Share this post


Link to post
Share on other sites

On a sidenote jwt is perfect when things need to "scale" (i.e. in a microservice architecture). Just share the secret across multiple instances and you don't have to care about syncing sessions and related data. The backend thus can be "stateless" (regarding logins) and just used to deliver data.

 

  • Like 3

Share this post


Link to post
Share on other sites

@thomasaull Thanks for the profile. Can see you've put a lot of time and effort into it.

Have been reading up on PWA's and while Vue.js seems to be the flavour of the month, I really don't like its '/#/' in the URL. Seems Stencil.js is a very similar option and gets around the URL issue. I'm new at this and decided to try your Vue.js option first.

Got through most of it thanks to your docs and then got stumped big time at the login process.

All good to here using postman:

5a83f33c75642_Screenshot2018-02-1419_28_30.png.d5d92b206e3913e06c536cf825dbc5e3.png

From then on, I got completely lost:

5a83f3a3606e0_Screenshot2018-02-1419_30_13.png.c24ffde9e363da253bf0f69f5233548d.png

Did all that then used postman to try to get the JWT-token and log in. Nope... every response was "user is not logged in"

After many & varied attempts, I finally realised that the first conditional in /site/templates/api/Auth.php says if the user isn't log in, throw a WireException... OK but I'm not logged in. I'm trying to log in...

Commented out the WireException then my postman GET request gave me my JWT token.

Tried to login from my site but still no access???

 

Doesn't seem to matter whether I have $authActive set to true or false.

What am I doing wrong?

At what point, if ever, does $authActive get set back to true?

Any and all help, especially if they involve more detailed help docs (examples are great!!!!), much appreciated.

Thanks

psy

 

 

Share this post


Link to post
Share on other sites

Got a bit further... this time the error reporting in Router.php pointed to Tracy Debugger which is not included in the profile:

  public static function handle($class, $method, $vars)
  {
//      $authActive = true;
      $authActive = false;
//     if(!$authActive) \TD::fireLog('WARNING: Auth disabled!');

Another thing I did not know how to fix was that the Vue build files only worked when uploaded to the same domain as PW. When I uploaded the final build static folder and index.html to another domain, it failed with:

Screenshot-2018-02-15-08_32_03.jpg.ddc7c69e2e2de27741a43ce7eef5f4f7.jpg

 

Does this mean I can only have one Vue SPA per PW instance? Would be good to have the ability for one PW instance to serve multiple Vue sites.

What's your recommendation for configuring, eg install PW in a subfolder and have the Vue build files in the root?

TIA

psy

 

Share this post


Link to post
Share on other sites

Still moving along slowly

Auth.php line 37 changed:

  public static function login($data) {
//      ApiHelper::checkRequiredParameters($data, ['username', 'password']);
      ApiHelper::checkAndSanitizeRequiredParameters($data, ['username', 'password']);

Next... in ApiHelper.php - again Tracy Debugger not installed/included in default profile:

      // Sanitize Data
      if (!$sanitizer) {
//        \TD::fireLog('WARNING: No Sanitizer specified for: ' . $name . ' Applying default sanitizer: text');
        $data->$name = wire('sanitizer')->text($data->$name);
      }

That then forced the next bit in ApiHelper.php to fail too, ie:

     $data->$name = wire('sanitizer')->$sanitizer($data->$name);

as $sanitizer is empty.

Maybe not me after all.

@thomasaull suspect you have the client file versions out of synch in the profile on github... what with TD calls and incorrect function names, etc. Please confirm.

Share this post


Link to post
Share on other sites

Hi @thomasaull keen to get it resolved but not urgent in the next few hours. When you get it right is best :) 

Just grateful for the API and want to get it working. Have lots of applications for a fully functional PW REST API that handles logins and sanitizer.

Happy to help you quality control/troubleshoot. Maybe we can take this conversation offline until the profile is ready?

Keep me posted.

Thx

 

Share this post


Link to post
Share on other sites

Ok so apparently my flight got wifi, so I'm able to answer now :)

Vue Router is also capable of suppressing the /#/ in URLs, you just need to add the HTML5 History Mode: https://router.vuejs.org/en/essentials/history-mode.html

Did you actually check and run the Vue Login example? Is everything working as supposed there?

The login does happen in the login function in Auth.php, the other function just makes sure the user is actually logged in and therefore allowed to query the API. 

$authActive never gets changed after the initial declaration, it's basically just a switch to make the API publicy available or not. 

To get rid of the errors by TracyDebugger you can just delete these lines, they are just in there for debugging. 

You can totally have multiple Vue SPAs querying the same API, although I have never tested this with this profile. There might be CORS related issues that needs to be solved first. For starters, I'd try to have it all under the same domain.

The checkAndSanitize works with. name|sanitizer pairs, check this line: https://github.com/thomasaull/RestApiProfile/blob/master/templates/api/Test.php#L17 (message is the parameter you're sending, text is the sanitizer which should be applied)

I think I forgot to change the function call in Auth.php, try: ApiHelper::checkAndSanitizeRequiredParameters($data, ['username|text', 'password|text']);

Try to change this line, remove all TracyDebugger statements and run the Vue example. I guess it should work then! I'm not with my computer until end of next week, so not really a big help I'm afraid 🙈

Share this post


Link to post
Share on other sites

Hi @thomasaull

In answer to your questions:

- Vue Router - thanks for the tip. Hadn't got that far yet

- Have run the installed-by-profile Vue Login example countless times - that's where I'm stuck. On the times I do get logged in, I'm only ever logged in as 'guest'

- OK I think about $authActive - but in the destructions you ask the dev to to change $authActive to false

- Yep, figured that but then in ApiHelper.php, $sanitizer is null so everything falls in a heap

- OK

- Ahhh yes, the line is just username, password - not username|text, password|text

Will try tomorrow. It's late here. Thanks for the help and safe travels

Cheers, psy

 

Share this post


Link to post
Share on other sites

Yay!!! Got it working successfully with a few tweaks to @thomasaull's templates.

In Auth.php:

  public static function login($data) {
//      ApiHelper::checkRequiredParameters($data, ['username', 'password']);

//    $data->username = wire('sanitizer')->selectorValue($data->username);
//    $data->password = wire('sanitizer')->string($data->password);

// All the below work as expected including logging an incorrect Sanitizer method
//    $data =   ApiHelper::checkAndSanitizeRequiredParameters($data, ['username', 'password']);
//    $data =   ApiHelper::checkAndSanitizeRequiredParameters($data, ['username|selectorValuexxx', 'password|string']);
      $data =   ApiHelper::checkAndSanitizeRequiredParameters($data, ['username|selectorValue', 'password|string']);

    $user = wire('users')->get($data->username);
...

The changes to ApiHelper::checkAndSanitizeRequiredParameters($data, $params) were a bit more intense:

  public static function checkAndSanitizeRequiredParameters($data, $params) {
    foreach ($params as $param) {
      // Split param: Format is name|sanitizer
      $name = explode('|', $param)[0];

        // Check if Param exists
        if (!isset($data->$name)) throw new \Exception('Required parameter "' . $param .'" missing!', 400);

        $sanitizer = stripos($param,'|') !== false ? explode('|', $param)[1] : 'text';

        // Check the sanitizer type is valid (Array copied from Sanitizer method testAll)
        $sanitizers = array(
            'alpha',
            'alphanumeric',
            'array',
            'bool',
            'date',
            'digits',
            'email',
            'emailHeader',
            'entities',
            'entities1',
            'entitiesMarkdown',
            'fieldName',
            'filename',
            'float',
            'int',
            'intArray',
            'intSigned',
            'intUnsigned',
            'markupToLine',
            'markupToText',
            'minArray',
            'name',
            'names',
            'pageName',
            'pageNameTranslate',
            'pageNameUTF8',
            'pagePathName',
            'pagePathNameUTF8',
            'path',
            'purify',
            'removeNewlines',
            'selectorField',
            'selectorValue',
            'string',
            'templateName',
            'text',
            'textarea',
            'unentities',
            'url',
            'varName',
        );
        if (!in_array($sanitizer, $sanitizers))
            throw new WireException(_("Invalid sanitizer type: $sanitizer for param $name"));

      $data->$name = wire('sanitizer')->$sanitizer($data->$name);
    }
    return $data;
  }

 

Share this post


Link to post
Share on other sites

@psy I (hopefully) resolved all issues with an update to the site profile. Can you give it a try and check if everything is working for you now? https://github.com/thomasaull/RestApiProfile/releases/tag/0.1.1

I didn't want to copy all the sanitizers in my site profile since it might break, when there will be more sanitizers added in the future. Instead I'm checking with method_exists if the specified sanitizer exists.

Thanks for all your input and work :)

  • Like 1

Share this post


Link to post
Share on other sites

@thomasaull Works great!

You say tomato and I say tomato :) 

One thing about putting the classes in templates rather than a module is that they can be modified to suit. I tweaked the new ApiHelper to make it more ProcessWire-ish for my own benefit - still does the same thing as your version.

    public static function checkAndSanitizeRequiredParameters($data, $params) {
        $sanitizer = wire('sanitizer');
        foreach ($params as $param) {
            // Split param: Format is name|sanitizer method
            $name = explode('|', $param)[0];
            // Check if Param exists
            if (!isset($data->$name)) throw new WireException(_("Required parameter: '$param' missing!"), 400);
            // Sanitize Data
            $parms = explode('|', $param);
            $sanMethod = 'text';
            if (isset($parms[1]))  $sanMethod = $parms[1];
            if(!method_exists($sanitizer, $sanMethod)) throw new WireException(_("Sanitizer: '$sanMethod' is invalid for param '$name'"), 400);
            $data->$name = $sanitizer->$sanMethod($data->$name);
        }
        return $data;
    }

Thanks for the update. :) 

 

  • Like 1

Share this post


Link to post
Share on other sites

Hi @thomasaull,
Thanks for this great site profile !

After building for production I'm having a 404 error when trying to reach a page from its url.
It works with the /login though but I guess this is because this page doesn't exist as a processwire page.

This problem is explained here https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
but I'm not sure how to implement the Apache solution to make it work with processwire. 
 

Any ideas ?

Thanks!

Share this post


Link to post
Share on other sites

If it works for the login, it should work with every other route aswell. Did you create the route in /router/index.js? And are you trying to use HTML5 History Mode?

Share this post


Link to post
Share on other sites

Yes, i'm using history mode.
Also I'm using props.

{ 
  path: '/:section/',
  name: 'Section',
  component: Section,
  props: true
}

where :section is the name of the page.

It's working fine in dev environnement but not in production.

I think it's related to that issue :
https://router.vuejs.org/guide/essentials/history-mode.html

Quote

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.


it's trying to reach the processwire page instead of redirecting to my app template (home.php)

Share this post


Link to post
Share on other sites

Ok, I figured out 

I just needed to use the home.php template for every other templates (in templates/template/files/ > Alternate template settings)

 

Thank you for your reply !

Share this post


Link to post
Share on other sites

Glad you figured it out! I think I ran into the same issue on another project earlier and I solived it like you by using "Alternate Template Filename". Since the frontend of a Vue App would be completely decoupled from ProcessWire anyway, another possible solution would be to set every page to "hidden" except the home page (didn't try that though). Edit: An that probably wouldn't allow deep linking on initial page load

Edited by thomasaull

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By VeiJari
      Hello forum, this is my first security related post, so I'm a bit of a newbie.
      I understand that when I have direct front-input from user I should sanitize the input, but how about when I use a secret key for showing a API for a third-party supplier? Should I sanitize the input->get() key?
      I've tested this issue and I tried ?key=<?php echo $page->field; ?> And without adding any sanitization it comes back: /?key=<?php%20echo%20$page->field;%20?>
      So can I rely on this, or should I still use $sanitizer just in case?
       
      Thanks for the help!
    • By EyeDentify
      I have been experimenting with the new $page->meta() method and find it useful.

      Once i figured out that the data i "save" with it is tied to the page where i called the method from.

      So this is not obvious at least not for me in the documentation:
      https://processwire.com/api/ref/page/meta/
       
      So i just wanted to share that revelation with the community so you don´t get as confused as i was.

      Happy Coding Everyone.
    • By louisstephens
      Going through my long quest to get better with ajax and utilizing the api, I have hit yet another roadblock. I currently have a form with an image field (thanks to flydev for getting that sorted), "title" text input, and a select field set to multiple. In my ajax call, I added in:
      tags = $("#select-tags").val(); form_data.append('tags', tags); $.ajax({ type: 'POST', data: form_data, contentType: false, processData: false, url: '/ajax/upload-preview/', success: function(data) { console.log("Woo"); }, error: function(xhr, ajaxOptions, thrownError) { alert(xhr.responseText); } }); And in the ajax template: 
      $tags = $sanitizer->text($_POST['tags']); $image = $sanitizer->text($_POST['image']); $p = new Page(); $p->template = "preview"; $p->parent = $pages->get("/previews/"); $p->name = $title; $p->title = $title; $p->tags = $tags; $p->save(); If I select a "tag" from the select input and submit, it does indeed add it to the Page Reference field in the backend. However, this does not work with an array being passed to it of multiple options.

      So it does appear that my ajax call is trying to submit multiple options, but I am really just unsure how to get these two added in. I saw in other forums posts of add($page) and even add(array()). Do I need to handle this js array differently or do  I need to foreach through the $tags to add it like:
      foreach($tags as $tag) { $p->tags->add($tag); $p->save(); } I tried this approach, but apparently I am still missing something.
       
      Edit:
      I was doing some tweaking, and I know I can split the js array out like:
      for (i = 0, len = tags.length; i < len; i++) { console.log(tags[i]); } However, I am not sure then how to handle the POST in php if I were to split it out.
    • By louisstephens
      I have been messing around with creating pages from ajax requests, and it has gone swimmingly thus far. However, I am really struggling with creating a page and saving an image via ajax. 
      The form:
      <form action="./" role="form" method="post" enctype="multipart/form-data"> <div> <input type="text" id="preview" name="preview" placeholder="Image Title"> </div> <div> <input type="file" id="preview-name" name="preview-name"> </div> <div> <select id="select-tags" name="select-tags"> <?php $tags = $pages->find("template=tag"); ?> <option value="">Select Your Tags</option> <?php foreach ($tags as $tag) : ?> <option value="<?= $tag->name; ?>"><?= $tag->name; ?></option> <?php endforeach; ?> </select> </div> <div> <button type="button" id="submit-preview" name="submit" class="">Upload Images</button> </div> </form>  
      The ajax in my home template:
      $('#submit-preview').click(function(e) { e.preventDefault(); title = $("#preview").val(); image = $("input[name=preview-name]"); console.log(title); console.log(image); data = { title: title, image: image //not sure if this is actually needed }; $.ajax({ type: 'POST', data: data, url: '/development/upload-preview/', success: function(data) { console.log("Woo"); }, error: function(xhr, ajaxOptions, thrownError) { alert(xhr.responseText); } }); }); And finally in my ajax template:
      $imagePath = $config->paths->assets . "files/pdfs/"; //was from an older iteration $title = $sanitizer->text($_POST['title']); $image = $sanitizer->text($_POST['image']); $p = new Page(); $p->template = "preview"; $p->parent = $pages->get("/previews/"); $p->name = $title; $p->title = $title; $p->save(); $p->setOutputFormatting(false); $u = new WireUpload('preview_image'); $u->setMaxFiles(1); $u->setOverwrite(false); $u->setDestinationPath($p->preview_image->path()); $u->setValidExtensions(array('jpg', 'jpeg', 'gif', 'png', 'pdf')); foreach($u->execute() as $filename) { $p->preview_image->add($filename); } $p->save(); I can complete the file upload but just using a simple post to the same page and it it works well, but I was really trying to work out the ajax on this so I could utilize some modals for success on creation (and to keep my templates a little cleaner). When I do run the code I have, a new/blank folder is created under assets, and a new page is created with the correct title entered. However, no image is being processed. I do get a 200 status in my console. I have searched google for help, but everything seems to be slightly off from my needs. If anyone could help point me in the right direction I would greatly appreciate it. 
    • By louisstephens
      This might be a completely dumb question, but I cant seem to wrap my head around it. I have a page reference field that allows users to select "Tags". In the front end I would like to use the titles as class names for a single item. ie:
      <?php $previews = $pages->find("template=preview"); ?> <?php foreach($previews as $preview): ?> <div class="tagOne TagTwo tagThree"> <!-- use another foreach to output--> <img src="<?=$preview->preview_image->url; ?>" /> </div> <?php endforeach; ?> I am little stumped as I know I need a foreach loop to produce each tag title, but how do I insert them all into one corresponding div class with spaces?
      Whelp, that was the easiest thing, but my brain just didnt "get it". Just put the foreach in the "class" inside of the overall foreach. Ugh 😓
×
×
  • Create New...