Angular 4無法授權API

Question

我正在構建一個Angular 4項目並希望它連接到handwriting.io API。

我的問題是我如何進行祕密和密鑰授權？我從來沒有使用需要身份驗證的API，所以我有點無知。 我不斷收到未經授權的錯誤。 如何使用密鑰和祕密連接到API？

到目前爲止，我的代碼是這樣的：

import { HandWriteAPIPage } from './../../e2e/app.po'; 
import { Component } from '@angular/core'; 
import { Http, Response, Headers } from '@angular/http'; 
import 'rxjs/add/operator/map'; 


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
    private apiKey: string = '2ND4YD74W5Y5Z8NC'; 
    private apiSecret: string = '65T65J5V850RWEHE'; 
    private apiURL: string = 'https://api.handwriting.io/handwritings' 

    data: any = {}; 

    constructor(private http: Http){ 

    this.getData(); 
    this.getHandWrite(); 
    } 

    getData(){ 
    return this.http.get(this.apiURL) 
     .map(res => res.json()); 
    } 

    getHandWrite(){ 
    this.getData().subscribe(data => { 
     console.log(data); 
    }); 
    } 

Answer 1

你的API請求手寫API需要連接到每個請求的基本授權頭。在提出請求之前，您必須將這些憑據附加到標頭。

角有HTTP模塊中的一類可用於實現設定的自定義頁眉/授權：

您的代碼可能如下所示：

import { HandWriteAPIPage } from './../../e2e/app.po'; 
import { Component } from '@angular/core'; 
import { Http, Response, Headers } from '@angular/http'; 
import 'rxjs/add/operator/map'; 


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app'; 
    private apiKey: string = '2ND4YD74W5Y5Z8NC'; 
    private apiSecret: string = '65T65J5V850RWEHE'; 
    private apiURL: string = 'https://api.handwriting.io/handwritings' 

    data: any = {}; 

    constructor(private http: Http){ 

    this.getData(); 
    this.getHandWrite(); 
    } 

    getData(){ 
     let headers: Headers = new Headers(); 
     headers.append("Authorization", "Basic " + btoa(this.apiKey + ":" + this.apiSecret)); 

     return this.http.get(this.apiURL, { 
     headers: headers 
     }) 
     .map(res => res.json()); 
    } 

    getHandWrite(){ 
    this.getData().subscribe(data => { 
     console.log(data); 
    }); 
    } 

您可能要設置你的頭在這項服務的一個單獨的方法。但我希望這有助於。