Angular 6 httpClient Post с учетными данными

Question

У меня есть код, который публикует некоторые данные для создания записи данных.

Это в услуге:

Вот код:

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

}

У меня вопрос ... что мне делать, что URL требует от пользователя, чтобы войти в систему ... Как передать учетные данные?

Answer 1

Чтобы запросить файлы cookie, вам необходимо добавить withCredentials в свой запрос. Смотрите следующий код

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

Answer 2

Также работает следующий код:

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

Answer 3

Что ж, чтобы обезопасить свои конечные точки, вы должны сначала выбрать стратегию того, как подписывать свои звонки и чтобы они были безопасными.Распространенным методом будет использование токенов JWT.(Существуют и другие альтернативы, я предлагаю вам наиболее знакомую).

Для этого пользователю потребуется связаться с конечной точкой вашего бэкэнда, незащищенной, со своими учетными данными.Вам нужно настроить свой бэкэнд, который проверит учетные данные, и, если они верны, бэкэнд вернет вам токен, который вы будете использовать для подписи ваших безопасных вызовов (с JWT вы добавите этот токен в свой заголовок, если вашбэкэнд настроен правильно, он будет проверять этот токен в защищенных API).

Поскольку мы не знаем, какой бэкэнд вы используете, я могу порекомендовать вам только библиотеку для токенов JWT под углом для вашего внешнего интерфейса.https://github.com/auth0/angular-jwt

Эта библиотека предоставит вам http-клиент, который автоматически подпишет ваш запрос токеном, если вы сохранили его локально.Это также позволяет вам устанавливать защиту на ваши URL-адреса внешнего интерфейса, что также автоматически проверяет, не истек ли, например, срок хранения сохраненного токена.

Рабочий процесс будет следующим:

1) Пользовательотправляет учетные данные в бэкэнд

2) Бэкэнд подтверждает учетные данные и отправляет обратно токен

3) Вы храните свой токен в локальном хранилище в своем интерфейсе и настраиваете библиотеку для его использования.

4) Установите защиту для защищенных URL-адресов, в качестве предварительной проверки, у вас токен с истекшим сроком действия или нет.

5) Наконец, используйте HTTP-клиент библиотеки, который будет подписывать ваши запросы с помощьютокен, который вы сохранили в локальном хранилище, который потребуется для использования вашего защищенного API.

РЕДАКТИРОВАТЬ:

У меня есть базовый шаблон, который использует токены JWT в Angular.Вы можете найти его здесь https://github.com/BusschaertTanguy/angular2_template/.

Найдите в модуле авторизации конфигурацию, компонент входа в систему и регистрации, http-клиент для защищенного http-клиента, службу аутентификации и аутентификации для обработки токена и защиты маршрута.

Несколько быстрых фрагментов из шаблона, чтобы помочь вам:

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

Здесь вы можете найти конфигурацию вашего интерфейса, вы также можете следовать руководству на странице библиотеки, так какЯ реализовал это, только я добавил некоторые абстракции здесь и там, просто чтобы дать вам представление о том, с чего начать.