Базовая аутентификация с помощью службы WordPress RESTful от внешнего клиентского приложения

Question

Я разрабатываю небольшую систему интрасети для компании, я использую клиентское приложение Angular2 с бэкэндом WordPress + WP RESTful API v2.

Пользователь переходит к клиентскому приложению http://cms.somecompany.com, то форма Войти появится и будет перенаправлять их на приложении приборной панели (а не приборная панель WordPress)

, так как я новичок в вещи авторизаций, Я хотел бы достичь этого с помощью basic auth.

Я спасаю маркер в моей AppState, который позволит мне установить глобальные переменные должны быть доступны для всех компонентов, а затем я буду использовать этот маркер для всех GET/POST/DELETE операций ...

Моя проблема заключается в том, как я могу проверить подлинность пользователей на странице входа?

Пришло к выводу, что в первую очередь я должен ограничивать только 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) {}); 

Тогда у вас есть печенье аутентификации для выполнения каждого удаленного вызова (вы передаете его просто через коллектор)

Я надеюсь, что это помогает