Basic Authentifizierung mit WordPress RESTful Service von externen Client-App

Question

Ich bin ein kleines Intranet-System für ein Unternehmen zu entwickeln, ich benutze Angular2 Client-App mit WordPress Backend + die WP RESTful API v2.

Benutzer geht an die Client-Anwendung http://cms.somecompany.com, dann wird ein Login-Formular erscheinen und wird sie an die App Armaturenbrett (nicht die Wordpress-Dashboard)

seit ich bin neu in der Authentifizierungen Sachen umleiten, Ich möchte das mit basic auth erreichen.

ich das Token in meinem AppState bin Speichern, die mich globale Variablen setzen lassen auf alle Komponenten zugänglich sein und dann werde ich dieses Token für alle GET/POST/DELETE Operationen verwenden ...

Mein Problem ist, wie kann ich authentifizieren Benutzer auf der Anmeldeseite?

es kam mir in den Sinn, dass ich zuerst Get Anfragen an authentifizierte Benutzer beschränken sollte. und dann kann ich eine Anfrage versuchen, um nach dem Antwortcode zu suchen! Ich bin mir nicht sicher, ob das richtig ist und ich weiß nicht, wie ich Anfragen von anonymen Benutzern ablehnen kann.

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

Answer 1

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

siehe auch -

• Using http rest apis with angular 2

Answer 2

versuchen, etwas wie folgt aus:

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

Dann haben Sie einen Auth-Cookie jeden Remote-Aufruf auszuführen (Sie es einfach durch den Kopf Pass)

Ich hoffe, es