Authentication?

[daltonrooney]

I was wondering if you've explored the idea of authenticating the Ember app with the WP REST API to enable create, update, and delete actions? I've looked at the official WP REST API javascript client which is done with Backbone, and there is a nonce that is localized in the client-js.php file.

I suppose something like that is possible if you're loading Ember from a PHP template that's talking directly to WordPress, but I'm not sure how that would work otherwise. And OAuth authentication seems like a bit much if the API and the Ember app are on the same server.

[oskarrough]

It would be great to have ember-wordpress make it easy to create, update and delete!

In the end, I imagine a step-by-step guide to authentication (with different servers) and have CRUD working through ember-data out of the box :+1: I haven't looked into it yet and I'd appreciate any help we can find.

Check http://v2.wp-api.org/guide/authentication/

[daltonrooney]

I'm loading Ember in a theme so I'm using wp_localize_script() to try to pass my nonce value to the Ember app. So far I can't figure out how to access global variables within Ember. I'll post any progress I make.

Without authentication, I was able to use your add-on to access the REST API very easily, so thanks for sharing your work so far.

[daltonrooney]

I did make some progress which I thought I'd share in case it's helpful for you or anyone else attempting this in the future. Ember really doesn't like global variables, so I'm passing in the API information via meta tags instead. In the theme file, I've added the following meta tags:

<meta name="wpapiroot" content="http://myapp.dev/wp-json" />
<meta name="wpapinonce" content="72e9812417" />
<meta name="wpapinamepsace" content="myapp/v1" />

(This is the same information that's passed by wp_localize_script() in the default REST API client.)

From what I understand, the correct way to pull this into Ember is with an Initializer, but the examples I found were for older versions of Ember and didn't work, so I'm still working that out. But I was able to access these tags directly from the adapter, which currently looks like this (based on your implementation):

/* adapters/application.js */
import Ember from 'ember';
import DS from 'ember-data';

export default DS.RESTAdapter.extend({
    host: Ember.$('meta[name="wpapiroot"]').attr('content'),
    namespace: Ember.$('meta[name="wpapinamepsace"]').attr('content'),
    headers: {
    "X-WP-Nonce": Ember.$('meta[name="wpapinonce"]').attr('content')
  },
    handleResponse(status, headers, payload, requestData) {
        if (payload) {
            const meta = {
                total: headers['X-WP-Total'],
                totalPages: headers['X-WP-TotalPages']
            };
            payload.meta = meta;
        }
        return this._super(status, headers, payload, requestData);
    }
});

And I was able to retrieve data from a private endpoint (given that I'm already logged in with cookie authentication).

[signal-intrusion]

I've been doing some work on auth and read/write in a project. I've been moving that code into a fork of this repo as appropriate: https://github.com/oskarrough/ember-wordpress/compare/master...signal-intrusion:cp-media-serialize

Read/write just requires serializing certain data, like title and excerpt. I'd be happy to continue that work and submit a PR.

@daltonrooney's method works perfectly if your site is being served by WP. Pulling it in with an initializer is no big deal. The next step would be probably be adding an oauth feature. Or is that something that should be implemented by consumers?

[daltonrooney]

@signal-intrusion I would be very interested in seeing this repo expand to support create/update/delete actions. I'm just far enough along with my Ember app that I'm ready to make some fields editable, but the API requests are all wrong. I've started learning how the serializer works in Ember so I can translate the API requests for the WP REST API, but any progress you've made so far would be welcome.

[sheriffderek]

@daltonrooney There is a well-written book on serializers and such you could check out https://leanpub.com/emberdatainthewild written by @skaterdav85

[daltonrooney]

@sheriffderek 👍 Thanks for that, looks like exactly what I need.

[khaledallen]

@oskarrough what is the status of this issue? I'm about to dive into a headless CMS for a client who will definitely be wanting to authenticate users, so I'll share whatever we come up with to solve the problem, assuming there haven't been any changes since we used the addon.

[oskarrough]

@khaledallen to be honest I haven't needed it myself and didn't take time to look into it. If you can share your findings that would be great!

[linearza]

Is the status on this still unchanged? I've been looking around at a few options, and really like the Ember+Wordpress combo - but I would need user auth on the client side for member areas and such, so that might unfortunately be a blocker unless there are some viable solutions around it?

[oskarrough]

@linearza the WP API does support authentication, so viable it is. And @daltonrooney shared some ideas above. But it's unfortunately still not something I can do for you :)

I found these resources:

• https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/
• https://github.com/WP-API/Basic-Auth
• https://github.com/WP-API/jwt-auth
• https://github.com/WP-API/OAuth2
• https://github.com/WP-API/node-wpapi#authentication

So I'd suggest we

1. Choose an authentication method and make it work outside of ember-wordpress
2. Integrate it into ember-wordpress (this I can help with)

[linearza]

@oskarrough Perfect thanks, I have at least 2 projects Im currently considering it for, so will try make some time to look into it and also report back if I have anything worthwhile to share. Thank you for the work so far though!

[alexmasita]

Thumbs up. It would be great to have an Addon that pulls Wordpress authentication into Ember.js to enable management of private membership areas for instance. Any pointers to any existing ones?