Ошибка аутентификации REST API: WooCommerce - PullRequest
Новая
       16

Ошибка аутентификации REST API: WooCommerce

0 голосов
/ 11 июня 2018

Я пытался получить продукты из API WooCommerce REST теперь навсегда, и мой мозг истекает кровью: '(Я следовал всем инструкциям по woocommerce и github / woocommerce и не могумоя жизнь получает что-либо в Почтальоне с Basic Auth :

enter image description here

Но когда я выбираю Auth 1.0 -Я получаю все продукты:

enter image description here

Но тогда, если я возьму сгенерированный URL Auth 1.0 и вставлю его в браузер:

enter image description here

.. Инструкции в разделе Аутентификация по HTTP ( здесь ) описывает параметры, которые генерируются в URLавтоматически, когда я выбираю Auth 1.0 в Postman - но как мне сгенерировать их в моем компоненте React? 

const APP_URL = 'http://0.0.0.0:80'
const CONSUMER_KEY = 'ck_xxxx'
const CONSUMER_SECRET = 'cs_xxxx'
const PRODUCT_URL = `${APP_URL}/wp-json/wc/v2/products?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`

fetch(PRODUCT_URL).then(res => {
    if(res.status === 200){
      return json
    } else {
      console.log("ERROR RESPONSE STATUS: " + status);
    }
  }).then( json => {
    console.log(json)
  })
})

Так благодарен за весь ввод!

1 Ответ

0 голосов
/ 12 июня 2018

Я думаю, что эта проблема может быть решена с помощью приведенного ниже кода с использованием концепции "Перехватчик" ... 

 import {
  Injectable,
  // Injector
 } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
// import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

// import { AuthService } from './auth.service';
import { config } from '../config/config';

@Injectable()
export class AppInterceptor implements HttpInterceptor {

  constructor(
    // private injector: Injector,
    // private router: Router
  ) { }

  private includeWooAuth(url) {
    const wooAuth = `consumer_key=${config.consumerKey}&consumer_secret=${config.secretKey}`;
    const hasQuery = url.includes('?');
    let return_url = '';
    if (hasQuery) {
      return_url =  wooAuth;
    } else {
      return_url = '?' + wooAuth;
    }
    return return_url;
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // const auth = this.injector.get(AuthService);
    const authRequest = request.clone({
      setHeaders: {
        // Authorization: `Bearer ${auth.getToken()}`
      },
      url: `${config.basePath}/${request.url}${this.includeWooAuth(request.url)}`
    });

    return next.handle(authRequest)
      .catch(err => {
        if (err instanceof HttpErrorResponse && err.status === 0) {
          console.log('Check Your Internet Connection And Try again Later');
        } else if (err instanceof HttpErrorResponse && err.status === 401) {
          // auth.setToken(null);
          // this.router.navigate(['/', 'login']);
        }
        return Observable.throw(err);
      });
  }
}

Этот код будет сохранен в http.interceptor.ts .Очевидно, вы должны инициализировать ключ потребителя и другие детали API woocommerce в постоянную переменную.После этого вы создаете сервис для отображения списка продуктов следующим образом: 

retriveProducts(query: ProductQuery = {}): Observable<RetriveProductsResponse> {
    return this.httpClient.get(`products`, {params: this.wooHelper.includeQuery(query), observe: 'response'})
      .pipe(
        map(value => this.wooHelper.includeResponseHeader(value)),
        catchError(err => this.wooHelper.handleError(err)));
  }

И вызываете этот сервис в файле product.ts следующим образом:

getProducts() {
    this.woocommerceProductsService.retriveProducts()
       .subscribe(productResponse => {
        this.products = productResponse.products;
       }, error =>  this.errorMessage = <any>error);
  }

Я использовал приведенный выше код в своем проекте.Я думаю, что это поможет вам.

...