Angulaire 6 httpClient Poste avec les informations d'identification

J'ai un code qui affiche certains de 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...que dois-je faire ce que l'url exige de l'utilisateur d'être connecté...Comment puis-je transmettre les informations d'identification?

InformationsquelleAutor Craig2018 | 2018-05-07

2

Bien, dans le but de sécuriser vos points d'accès, vous devez d'abord choisir la stratégie à suivre pour accéder à vos appels et pour être sûr. Une méthode commune serait à l'aide de JWT Jetons. (Il existe d'autres alternatives, je vous offre celui que je suis plus familier avec).

Ce serait de demander à l'utilisateur de communiquer avec un terminal de votre backend, non garantis, avec leurs informations d'identification. Vous devez configurer votre backend, qui va vérifier les informations d'identification, et si elles sont correctes, le backend va vous redonner un jeton, qui vous permettra de vous connecter à vos appels sécurisés ( avec JWT, vous mettez ce code dans votre en-tête, si votre backend est configuré correctement, il va vérifier pour ce jeton sur la garantie de l'Api).

Que nous ne savons pas ce backend que vous utilisez, je ne peux que vous recommander une bibliothèque pour JWT jetons dans angulaire 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 avez stocké localement. Il vous permet également de, mettre des gardes sur votre frontend url, ce qui permettra également de vérifier automatiquement si le jeton stockée n'est pas expiré par exemple.

Le flux de travail serait comme suit:

1) l'Utilisateur envoie des informations d'identification de backend

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

3) Vous stockez votre jeton dans un local de stockage dans votre frontend, et configurer la bibliothèque de l'utiliser.

4) Mis en garde sur garanti Url, comme un pré-vérifiez que vous disposez d'un jeton expiré ou non.

5) Enfin, l'utilisation de la bibliothèque Client HTTP, qui signera votre demande avec le jeton que vous avez stockées dans votre local de stockage, qui sera nécessaire pour consommer vos sécurisé API.

EDIT:

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

Regarder dans le module d'authentification pour la configuration, la connexion & enregistreuse, client http pour http sécurisé client, auth & auth-service de garde pour les token de manutention & route de gardiennage.

Quelques extraits à partir 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);
      }
    );
}
```
Ceux sont les endroits pour trouver votre interface de configuration, vous pouvez également suivre le tutoriel sur la bibliothèque de la page, comme c'est la voie que j'ai mis en place, seulement, j'ai ajouté quelques abstractions ici et là, juste pour vous donner une idée de par où commencer.
- l'op est en utilisant angulaire/common/http. Http et RequestOptions sont obsolètes
InformationsquelleAutor TanguyB
8

De la demande avec les cookies, vous devrez ajouter withCredentials dans votre demande. Voir le code suivant
```
const httpOptions = {
 headers: new HttpHeaders({
  'Authorization': fooBarToken
 }),
 withCredentials: true
};
```
InformationsquelleAutor mobby

Le code suivant fonctionne aussi:

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

InformationsquelleAutor Patricio Vargas

Vous devez vous connecter pour publier un commentaire.