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

您可能要设置你的头在这项服务的一个单独的方法。但我希望这有助于。