web-dev-qa-db-ja.com

Angular 6資格情報付きのhttpClient投稿

データを作成してデータレコードを作成するコードがあります。

それはサービスにあります：

コードは次のとおりです。

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がユーザーがログインするために必要なことをどうすればよいですか...資格情報を渡すにはどうすればよいですか？

javascriptangulartypescriptangular6
7
Craig2018

さて、エンドポイントを保護するために、最初にコールに署名する方法とそれらを保護する戦略を選択する必要があります。一般的な方法は、JWTトークンを使用することです。 （他にも選択肢がありますが、私が最もよく知っているものを提供しています）。

これにより、ユーザーは、資格情報を使用して、セキュリティで保護されていないバックエンドのエンドポイントにアクセスする必要があります。資格情報をチェックするバックエンドを設定する必要があります。資格情報が正しい場合は、バックエンドがトークンを返します。トークンは安全な呼び出しに署名するために使用します（JWTでは、このトークンをヘッダーに入れます。バックエンドが正しく構成されている場合、保護されたAPIでこのトークンを確認します）。

どのバックエンドを使用するかわからないので、フロントエンドのangular=にあるJWTトークンのライブラリのみをお勧めします。 https://github.com/auth0/角jwt

このライブラリは、ローカルに保存したトークンを使用してリクエストに自動的に署名するhttpクライアントを提供します。また、フロントエンドURLにガードを設定することもできます。これにより、たとえば、保存されているトークンの有効期限が切れていないかどうかも自動的にチェックされます。

ワークフローは次のとおりです。

1）ユーザーは資格情報をバックエンドに送信します

2）バックエンドは資格情報を確認し、トークンを送り返します

3）フロントエンドのローカルストレージにトークンを保存し、それを使用するようにライブラリを構成します。

4）期限切れでないトークンがあるかどうかの事前チェックとして、保護されたURLにガードを設定します。

5）最後に、ライブラリのHTTPクライアントを使用します。これにより、ローカルストレージに保存したトークンでリクエストに署名します。これは、セキュリティで保護されたAPIを使用するために必要です。

編集：

私はAngularでJWTトークンを使用する基本的なテンプレートを持っています。ここで見つけることができます https://github.com/BusschaertTanguy/angular2_template/ 。

構成、ログインおよび登録コンポーネント、セキュリティで保護されたhttpクライアント用のhttpクライアント、トークン処理およびルートガード用のauth＆auth-guardサービスについては、authモジュールを参照してください。

あなたを助けるためにテンプレートからいくつかの簡単なスニペット：

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

これらはフロントエンドの設定を探す場所です。ライブラリのページのチュートリアルに従うこともできます。これは実装方法なので、どこから始めればいいかを知るために、あちこちにいくつかの抽象概念を追加しました。

2
TanguyB

Cookieでリクエストするには、リクエストにwithCredentialsを追加する必要があります。次のコードを参照してください

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

次のコードも機能します。

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