Angular 4 ne peut pas autoriser l'API

Question

Je construis un projet Angular 4 et je voudrais qu'il soit connecté à l'API handwriting.io.

Ma question est comment puis-je procéder avec le secret et l'autorisation de clé? Je n'ai jamais travaillé avec des API nécessitant une authentification, donc je suis un peu désemparé. Je continue d'obtenir une erreur non autorisée. Comment utiliser la clé et le secret pour me connecter à l'API?

Jusqu'à présent, mon code est la suivante:

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

Vos requêtes API à l'API d'écriture nécessite un en-tête d'autorisation de base fixé à chaque demande. Vous devrez joindre ces informations d'identification à l'en-tête avant de faire la demande.

angulaire a une classe dans le module Http qui peut être utilisé pour réaliser la mise en-têtes personnalisés/autorisation:

Votre code peut ressembler à ce qui suit:

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

Vous pouvez définir votre tête dans une méthode séparée dans ce service. Mais j'espère que cela aide.