mercredi 11 janvier 2017

How to authenticate Wordpress Users through an Ember.js app via OAuth2?

I've been working on this problem for several days with no success, and no searches turn up anything like my case.

The Setup

I have a wordpress install configured with WP-REST-API to send its data to an ember.js app on another server. I have been able to query for the custom post types we created (questions) and get that data fine.

In order to get user authentication, I have installed WP-OAuth2 Server on the WP site, and ember-simple-auth on the ember.js app.

Desired Outcome

Users provide login credentials to a login form on the ember.js app in order to access the questions. The users would be created on the WP server so that a sysadmin could control it, but users should also be able to register from the app.

Problem

Right now, I cannot seem to get the server to provide a meaningful response to allow authentication. Initially, I was seeing a CORS error, which I fixed by editing .htaccess to allow localhost:4200 access. Now, I am just getting a 400 error (bad request).

Here is the output from my console: enter image description here enter image description here enter image description here

and here is my code for the authenticator:

import OAuth2PasswordGrant from 'ember-simple-auth/authenticators/oauth2-password-grant';
import Ember from 'ember';

export default OAuth2PasswordGrant.extend({
  serverTokenEndpoint: "http://ift.tt/2igk4vi",


  makeRequest(url, data) {

    var client_id = 'k9dQQ6EbpSWhMoGwZQVKTccOOlj4B2';
    var client_secret = 'xVbLL1Rpdgh9y3yeAx5whZIuNxP7Bq';
    data.grant_type = 'password';

    console.log('After variables set');

    return Ember.$.ajax({
      url: this.serverTokenEndpoint,
      type: 'POST',
      data: data,
      dataType: 'json',
      contentType: 'application/x-www-form-urlencoded',
      crossDomain: true,
      header: {
        Authorization: "Basic " + btoa(client_id + ":" + client_secret)
      }
    });

    console.log('After request');
  }
});

And here is the login component that calls authenticate:

import Ember from 'ember';

export default Ember.Component.extend({

  auth: Ember.inject.service('session'),
  login: null,
  password: null,
  actions: {
    authenticate() {
      this.get('auth').authenticate('authenticator:oauth2', this.get('login'), this.get('password')).then( () => {
        alert('Thanks for logging in!');
        this.get('transition')();
      }, () => {
        alert('Wrong user name or password!');
      });
    }
  }

});




Aucun commentaire:

Enregistrer un commentaire