web-dev-qa-db-fra.com

Angular 6 httpClient Post avec informations d'identification

J'ai du code qui publie des données pour créer un enregistrement de données.

C'est dans un service:

Voici le code:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  create() {
      const postedData = { userid: 1, title: 'title here', body: 'body text' };
      return this.http.post('https://jsonplaceholder.typicode.com/posts', postedData, httpOptions).subscribe(result => {
        console.log(result);
      }, error => console.log('There was an error: '));
  }

}

Ma question est ... qu'est-ce que je fais ce que l'url requiert de l'utilisateur pour se connecter ... Comment puis-je transmettre les informations d'identification?

javascriptangulartypescriptangular6
7
Craig2018

Eh bien, afin de sécuriser vos points de terminaison, vous devez d'abord choisir la stratégie sur la façon de signer vos appels et pour qu'ils soient sécurisés. Une méthode courante consisterait à utiliser des jetons JWT. (Il existe d'autres alternatives, je vous propose celle que je connais le mieux).

Cela nécessiterait que l'utilisateur contacte un point de terminaison sur votre backend, non sécurisé, avec ses informations d'identification. Vous devez configurer votre backend, qui vérifiera les informations d'identification, et si elles sont correctes, le backend vous donnera un jeton, que vous utiliserez pour signer vos appels sécurisés (avec JWT, vous mettez ce jeton dans votre en-tête, si votre backend est configuré correctement, il vérifiera ce jeton sur les API sécurisées).

Comme nous ne savons pas quel backend vous utilisez, je ne peux que vous recommander une bibliothèque de jetons JWT dans angular pour votre frontend. https://github.com/auth0/ angular-jwt

Cette bibliothèque vous donnera un client http qui signera automatiquement votre demande avec un jeton si vous en avez stocké un localement. Il vous permet également de mettre des gardes sur vos URL frontales, qui vérifieront également automatiquement si le jeton stocké n'est pas expiré par exemple.

Le flux de travail serait le suivant:

1) L'utilisateur envoie des informations d'identification au backend

2) Le backend confirme les informations d'identification et renvoie un jeton

3) Vous stockez votre jeton dans un stockage local sur votre frontend et configurez la bibliothèque pour l'utiliser.

4) Définissez des gardes sur les URL sécurisées, afin de vérifier si vous avez un jeton non expiré ou non.

5) Enfin, utilisez le client HTTP de la bibliothèque, qui signera vos demandes avec le jeton que vous avez stocké dans votre stockage local, qui sera nécessaire pour consommer votre API sécurisée.

MODIFIER:

J'ai un modèle de base qui utilise des jetons JWT en angulaire. Vous pouvez le trouver ici https://github.com/BusschaertTanguy/angular2_template/ .

Recherchez dans le module auth la configuration, le composant de connexion et d'enregistrement, le client http pour le client http sécurisé, le service auth et auth-guard pour la gestion des jetons et la protection des itinéraires.

Quelques extraits rapides du modèle pour vous aider:

//Library Configuration
export function authHttpServiceFactory(
  http: Http,
  options: RequestOptions
) {
  return new AuthHttp(
    new AuthConfig({
      tokenName: 'token',
      tokenGetter: (() => localStorage.getItem('token')),
      globalHeaders: [{ 'Content-Type': 'application/json' }]
    }),
    http,
    options
  );
}

@NgModule({
  providers: [{
    provide: AuthHttp,
    useFactory: authHttpServiceFactory,
    deps: [Http, RequestOptions]
  }]
})
export class AuthModule { }


//HttpService
get(url: string): Observable<any> {
    return this.http.get(endpoint).map(data => data.json());
  }


//LoginComponent
login() {
    this.httpService.get(urlToLogin).subscribe(
      data => {
        localStorage.setItem('token', data.access_token);
      }
    );
}

Ce sont les endroits où chercher votre configuration frontale, vous pouvez également suivre le tutoriel sur la page de la bibliothèque, car c'est la façon dont je l'ai implémenté, seulement j'ai ajouté quelques abstractions ici et là, juste pour vous donner une idée par où commencer.

2
TanguyB

Afin de demander avec des cookies, vous devrez ajouter withCredentials dans votre demande. Voir le code suivant

const httpOptions = {
 headers: new HttpHeaders({
  'Authorization': fooBarToken
 }),
 withCredentials: true
};
10
mobby

Le code suivant fonctionne également:

return this.http.get<{}>('YOU API URL', {
      withCredentials: true
 })
0
devpato