角2 Django Restフレームワークバックエンドへのログイン

Question

私はフロントエンドとしてAngular 2を使用し、Webアプリケーションを構築するにはバックエンドでDjango Rest Frameworkを使用しています。

私はDjango Rest Frameworkバックエンドからデータを取得する基本的なAngular 2アプリをセットアップしました。 Django Rest Frameworkのバックエンドには、ブラウズ可能なAPIでログインするように設定された「api-auth」URLがあります（here参照）が、今問題を抱えています。Angular 2アプリからログイン 。

JSON Webトークン（JWT）を使用することをお勧めします。

オンラインで入手できるほとんどすべてのチュートリアルやブログ記事を見てきましたが、バックエンド（Django）とフロントエンド（Angular 2）で何をする必要があるのか​​を明確にすることはできません。 Angular 2フロントエンドからDjango Rest Frameworkバックエンドにログインする方法を高水準で説明できる人はいますか？

私は具体的には、いくつかのurl ".../login"への投稿要求をするAngular 2アプリの ".service.ts"ファイルに座る "ログイン"機能について考えています。私の意味を理解するには、this blogのlogin（）関数を参照してください。私はその例を外していましたが、フロントエンド&バックエンド間の接続を作成する方法の完全なイメージを私に与えるわけではありません。

Answer 1

このソリューションはJWTを使用した認証用ですが、JWTを使用しない他のソリューションもあります。

This package（django-rest-framework-jwt）では、Django Rest FrameworkでJWTを管理するための認証エンドポイントを持つことができます。 docsに従うと問題は発生しません。

Angular2の最後では、ログイン資格情報を使用してサーバーからJWTを要求するログインサービスが必要です。それはDjangoのユーザモデルに依存します。

This blog postはAngular2 JWT認証に非常に役立ちます。 authentication.serviceでログイン機能を確認することができます。 DRF-jwtに合わせてコードを少し変更しました。

let headers = new Headers({ 
    'Accept': 'application/json', 
    'Content-Type': 'application/json', 
}); 
let options = new RequestOptions({ 
    headers: headers 
}); 
this.http.post(basePath + '/api-token-auth/', JSON.stringify({ username: username, password: password }), options) 
.map((response: Response) => { 
     // login successful if there's a jwt token in the response 
     let token = response.json() && response.json().token; 

     if (token) { 
     // set token property 
     this.token = token; 

     // store username and jwt token in local storage to keep user logged in between page refreshes 
     localStorage.setItem('id_token', token); 

     // return true to indicate successful login 
     return true; 
     } else { 
     // return false to indicate failed login 
     return false; 
     } 
    }); 
// 'api-token-auth/' is the default endpoint with drf-jwt 

これは、drfからのjwtを要求し、それをlocalStorageに格納します。

そこから、認証を必要とするすべてのhttp要求にAuthorizationヘッダーが含まれている必要があります。これを可能にするhttp wrapperがあります。

override the default configuration settingsです。オーバーライドする必要がある最小構成は、globalHeadersを設定する必要があるということです。 tokenNameまたはtokenGetterを変更する必要はありません。 Content-Type: application/jsonとAccept: application/jsonを追加するだけです。 （DRFはAcceptヘッダーをチェックして、どのような種類のものを使用するかを決定します）。drf-jwtがそのヘッダーを認証ヘッダーに使用するか、drf-jwtの設定から変更できるため、headerPrefixをJWTに変更することもできます。