Basic authentication with WordPress RESTful service from external client app

Question

I'm developing a small intranet system for a company, I'm using Angular2 client app with WordPress backend + the WP RESTful API v2.

User goes to the client app http://cms.somecompany.com, then a login form will appear and will redirect them to the app dashboard (not the WordPress dashboard)

since I'm new to the authentications stuff, I would like to achieve this with basic auth.

I'm saving the token in my AppState which let me set global variables to be accessible to all components and then I will use this token for all GET/POST/DELETE operations...

My problem is how can I authenticate users in the login page?

it came to mind that first of all I should restrict Get requests to authenticated users only. and then I can try some request to check for the response code! I'm not sure if this is correct and I don't know how to reject requests from anonymous users.

import {Component} from 'angular2/core';
import {AppState} from '../app.service';

@Component({
  selector: 'login',
  template: `
    <div class="container">
      <div class="login">
        <div class="login-triangle"></div>

        <h2 class="login-header">Log in</h2>

        <form class="login-container">
          <p><input type="email" placeholder="Email"></p>
          <p><input type="password" placeholder="Password"></p>
          <p><input type="submit" value="Log in"></p>
        </form>
      </div>
    </div>
  `,
  styles: [require('./login.scss')]
})

export class LoginCmp{

  constructor(private state: AppState){

  }
  login(username: string, password: string){
    let token = btoa(username + ':' + password);
    this.state.set('token', token);
  }
}

score 0 · Accepted Answer · edited May 23 '17 at 12:02

Try this -

import {Component} from 'angular2/core';
import {AppState} from '../app.service';
import {Http, Headers, RequestOptions, Request, RequestMethod, Response} from 'angular2/http';

@Component({
  selector: 'login',
  template: `
    <div class="container">
      <div class="login">
        <div class="login-triangle"></div>

        <h2 class="login-header">Log in</h2>

        <form class="login-container">
          <p><input type="email" placeholder="Email"></p>
          <p><input type="password" placeholder="Password"></p>
          <p><input type="submit" value="Log in"></p>
        </form>
      </div>
    </div>
  `,
  styles: [require('./login.scss')]
})


export class LoginCmp{

  constructor(private state: AppState){

  }
  login(username: string, password: string){
    let token = btoa(username + ':' + password);
    <!--this.state.set('token', token);-->

        this.headers = new Headers(); //Set header for authunetication
        this.headers.append('Content-Type', 'application/json');
        this.headers.append('Authorization', 'Basic ' + token); //pass here your encoded string of username and password

        this.requestoptions = new RequestOptions({
            method: RequestMethod.Get, //Chose method you wish to use Get, Post, bla bla
            url: url,
            headers: this.headers
        })

     this.http.request(new Request(this.requestoptions))
            .map(res => {
                let json;
                if (res.status == 200) {
                    json = res.json();
                }
                else if (res.status == 401) {
                    json = null;
                }
                 console.log(res.status, json);
            });
  }
}

see also -

Using http rest apis with angular 2

score 0 · Answer 2 · answered Apr 11 '16 at 07:48

0

try something like this:

$http({
method: 'POST',
url: api_url + 'auth/generate_auth_cookie/?nonce=' + data.nonce + '&username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password)
}).
success(function(data, status, headers, config) {}).
error(function(data, status, headers, config) {});

Then you have an auth cookie to perform every remote call (you pass it simply through the header)

I hope it helps

answered Apr 11 '16 at 07:48

thegio

1,233
7
27

i think you are using code of angular 1.x is't it ? – Pardeep Jain Apr 11 '16 at 07:59
yeah, you should do the same in NG2: call the auth service of WP and get the token, then you can pass it in the header. – thegio Apr 11 '16 at 08:15
hmm and same work stuff i had done in my answer below right ? even in the angular2 – Pardeep Jain Apr 11 '16 at 08:37

Basic authentication with WordPress RESTful service from external client app

2 Answers2