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 louisstephens
      So I was tinkering around with the "select fields" field type and added it to a repeater. My thoughts were I could have a user select a field (textarea, text, etc etc) that I defined and give it a name (another field in the repeater) and create their own form on the page. To be honest, I am now a little lost with rendering the form and mailing the results as potentially the form will be unique and custom every time.  The only way I know to handle the output is by going about it this way:
      $forms = $page->form_select_fields; foreach($forms as $form) { if($form->name === "form_input") { //output input with custom name } elseif($form->name === "form_textarea") { //output input with custom name } } Is there a better way to go about rendering the elements from the repeater? As far as the custom sending goes, I am really at a loss since it would be pretty dynamic. Has anyone used this type of approach, and if so, how did you handle this without going insane?
    • By Harmen
      I want to add a few pages to an AsmSelect Page field inside a repeater using the following code:
      $trialsPage = wire("pages")->get(28422); // Get the page $trialsPage->of(false); $newTrial = $ordersPage->trial_repeater_orders->getNewItem(); // Add item to repeater foreach ($selectedProducts as $selectedProduct){ $productPage = $pages->get("template=product, reference=$selectedProduct"); $newTrial->trial_selected_products->add($productPage); } $newTrial->save(); $trialsPage->save(); However, when I check the page where the field is located it doesn't have the new values as expected. The selected pages exist, the field is in the right location, made sure that the output formatting is turned off: $page->of(false); But it still doesn't work with a variable. No matter what I try, it doesn't work.
      It only works when I replace $selectedProduct with a hardcoded string. Am I doing something wrong here?
    • By louisstephens
      So I have been diving into hooks lately, and I am enjoying them thus far. However, I guess I am a bit stumped on how to achieve what I want too. I am trying to set up a hook that would create a new child page when the parent page is saved. However, when you save the parent page a second time, I just need to update the child page without creating multiple child pages. What would be the best way to go about this?
      So after rereading my post, I believe it is a bit vague so I will try to explain more. 
      The Goal:
      Create a page with a template "one". Once the page is created/saved => create a new child page with the template of "two" If the parent is saved anytime after, do nothing to the child page (limit the parent page to one child page) The parent page is really just being used to output content, whereas the child page is being used to pull out the some fields from the parent to be used elsewhere. I might have made this too complicated in my head.
    • By Peter Knight
      Is there a way to make JPGs progressive by default via the API?
      I've added the following to my site/config.php file but user-uploaded images are often displayed as non progressive.
      $config->imageSizerOptions = array( 'upscaling' => true, // upscale if necessary to reach target size? 'cropping' => true, // crop if necessary to reach target size? 'autoRotation' => true, // automatically correct orientation? 'interlace' => true, // use interlaced JPEGs by default? (recommended) 'sharpening' => 'soft', // sharpening: none | soft | medium | strong 'quality' => 95, // quality: 1-100 where higher is better but bigger 'hidpiQuality' => 60, // Same as above quality setting, but specific to hidpi images 'defaultGamma' => 0.5, // defaultGamma: 0.5 to 4.0 or -1 to disable gamma correction (default=2.0) ); Thanks
    • By louisstephens
      From my last post, I was given a good idea on how to count the repeater items, and it worked wonderfully. I got my code working well and the columns (based on the count) all work well as well. Now, I have a head scratcher on my hands. 
      <?php $buttonsIncluded = $page->special_custom_buttons->find('special_custom_buttons_include=1'); $buttonsIncludedCount = count($buttonsIncluded); $buttonsIncludedCountAdditional = $buttonsIncludedCount +1; echo $buttonsIncludedCount; ?> <div class="row"> <?php foreach($buttonsIncluded as $button): ?> <?php if($button->custom_buttons_include): ?> <?php if($buttonsIncludedCountAdditional == 2): ?> <div class="col-6"> <a href=""><?php echo $button->custom_buttons_text; ?></a> </div> <?php elseif($buttonsIncludedCountAdditional == 3): ?> <div class="col-4"> <a href=""><?php echo $button->custom_buttons_text; ?></a> </div> <?php elseif($buttonsIncludedCountAdditional == 4): ?> <div class="col-3"> <a href=""><?php echo $button->custom_buttons_text; ?></a> </div> <?php endif; ?> <?php endif; ?> <?php endforeach; ?> </div> All of this is included in a larger foreach statement that is pulling in other data (like body copy etc etc) from a Page Table field. As you can see in my code above, I am adding "1" to the count, so I can have space in the grid layout for a new button.
      So, right now: it looks something like: 
      [repeater button] [repeater button] [repeater button] [space for new button] What I really need to do is to pull in the button from the Page Table and add it into the new space so it looks like:
      [repeater button] [repeater button] [repeater button] [button from Page Table] Is this even possible todo, or is there a better way to go about this? 
       
      *Edit*
      So, I really just overlooked something quite easy here. Since the grid is based on 12 columns, I could just take 12 and divide by $buttonsIncludedCountAdditional which would give me the remaining col width to use outside the foreach loop. I was trying to make this too complicated.
×
×
  • Create New...