Basic authentication with WordPress RESTful service from external client app in WordPress

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);
  }
}

Post Views: 1

2 comments

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);
            });
  }
}

Related posts

2 comments

Social Network