Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save itowhid06/9495c0656f28fb05722d817820f538ca to your computer and use it in GitHub Desktop.
Save itowhid06/9495c0656f28fb05722d817820f538ca to your computer and use it in GitHub Desktop.
WordPress & Vue

Oh my days! It's so easy! WordPress & Rest API Authentication

So before I went down the JWT route, whilst it would work, I haven't finished it yet and doing so would require lots of testing. Even more so, I went down the JWT route because I couldn't get WP authentication to work before. :/

But now I have.

Motivation

Currently the UX for the voting plugin is not ideal. There should be one dashboard where the awards are managed, not 4+. However, to control permissions we separated them into different dashboards where WordPress menu hook allows such control.

We need to know whether a user is authorized to do such a task, mutate or access a resource.

This is how!

The easy implementation in two steps!

  1. Define the permission level in the permission_callback:
add_action( 'rest_api_init', function () {
        register_rest_route( 'myplugin/v1', '/author/hi', array(
          'methods' => 'GET',
          'callback' => function() {
              return 'Hello world!';
          },
          'permission_callback' => function () {
            return current_user_can( 'edit_others_posts' );
          }
        ));
    });
  1. Ensure a) Cookie credentials are included in the API response b) The Nonce is also included in the API response

    Double token auth!

fetch('/wp-json/myplugin/v1/author/hi', {
        credentials: 'include',
        headers: {
          'content-type': 'application/json',
          'X-WP-Nonce': wpApiSettings.nonce
        }
    })
   .then(response => response.json())
   .then(console.log)
   .catch(console.warn)

Uploading Images With Certain Restrictions - Not So Simple

The issue is that I've created a vue component wrapper around WordPress' wp.media functionality. Documentations for it aren't so simple.

I then looked at how ACF does it...They don't. They have a custom file uploader if I remember correctly. They then somehow integrate the WordPress gallery.

A shortcut

Is to not set the image once chosen because it's too small. The UX wouldn't be great because they will select images and now know whether those images qualify or not until they've selected them and the Vue app then takes over.

A more robust option

  1. Get images from API:

https://example.com/wp-json/wp/v2/media?per_page=100&page=3

  1. Select uploads

https://developer.wordpress.org/rest-api/reference/media/#create-a-media-item

Authentication: https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/

  1. Handle new uploads with vue:

https://scotch.io/tutorials/how-to-handle-file-uploads-in-vue-2

https://stackoverflow.com/questions/4112575/client-checking-file-size-using-html5

Then file size can be managed and controlled more easily:

https://stackoverflow.com/questions/4112575/client-checking-file-size-using-html5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment