角4 APIを承認できません

Question

私はAngular 4 Projectを構築しており、handwriting.io APIに接続したいと考えています。

私の質問は、どのように私は秘密と鍵の承認を続行するのですか？私はまったく無知なので、認証を必要とするAPIで働いたことはありません。 不正なエラーが続いています。 キーとシークレットを使用してAPIに接続するにはどうすればよいですか？

SOはるかに私のコードはこれです：手書き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リクエストの各リクエストに添付基本認証ヘッダーが必要です。要求を行う前に、ヘッダーにこれらの資格情報を添付する必要があります。

角度は、カスタムヘッダー/許可を設定し達成するために使用することができる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); 
    }); 
    } 

あなたのヘッダーを設定することもできますこのサービスの別の方法でしかし、私はこれが役立つことを願っています