WordPressでの基本認証外部クライアントアプリケーションからのRESTfulサービス

Question

私は会社のための小さなイントラネットシステムを開発しています。WordPressバックエンド+ WP RESTful API v2でAngular2クライアントアプリケーションを使用しています。

ユーザーがクライアントアプリhttp://cms.somecompany.comに行き、その後、ログインフォームが表示され、アプリダッシュボード（ないWordPressのダッシュボード）にリダイレクトされます

私は認証のものに新たなんだから、 basic authでこれを達成したいと思います。私は私がすべてのコンポーネントにアクセスできるようにグローバル変数を設定してから、私はすべてのGET/POST/DELETE操作のために、このトークンを使用します聞かせて私のAppStateでトークンを保存してい

...

私の問題は、私がどのように認証することができていますログインページのユーザーですか？

まず、Getリクエストを認証されたユーザーだけに制限する必要があることに気付きました。応答コードをチェックするリクエストを試すことができます！私はこれが正しいのか分かりませんし、匿名ユーザーからのリクエストを拒否する方法もわかりません。

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

これを試してみてください -

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

も参照 -

• Using http rest apis with angular 2

Answer 2

はこのような何かを試してみてください。

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

その後、あなたはすべてのリモートコール（あなたは、単にヘッダを通してそれを渡す）

を実行するために認証クッキーを持って、私はそれが