Angular2 - ログインしてユーザーを覚えているアプリケーション

Question

私は、Angular 2（最終バージョン）でログインしてアプリケーションを作成しようとしています。 私はこれの原則を理解しようとしました。

1 - ユーザーは自分のログイン名とパスワードを入力し、ウェブサービスは、トークンを作成し

3 - ユーザのログインとパスワードを使用してWebサービスに接続

2 - Angular2要求をクリックして、DBに格納し

4つのWebサービスがそれを前面に返します。

しかし、フロントはトークンで何をしていますか？ localStorageに保存しますか？

リメンバー・ミー：

私はWhat is the best way to implement "remember me" for a website?

このトピックを読んだ私は、このトークンがクッキーに存在し、それがDBに同じだ場合であれば、我々はトークンを必要とし、各ページにチェックすることを理解。

ログイン用のトークンとは異なるトークンですか？ localStorage、sessionStorage、またはクッキーとして保存しますか？

誰かが私にこのすべてを明確に説明できますか？ または、明確なトピック、チュートリアルまたはアプリケーションコードがわかりやすい場合は、私は非常に喜んでいます。

Answer 1

JWTをご覧ください。それは以下のように動作します：

サーバー側： WebサービスまたはWeb APIのログインコントローラには、usernameとpwdを受け入れ、キーを使用してトークンを生成するログインメソッドがあります。

public string Login(string username, string password) 
    { 
     if (!VerifyUserPassword(username, password)) 
      return "Wrong access"; 

     List<Claim> claims = GetUserClaims(username); 

     RSACryptoServiceProvider publicAndPrivate = new RSACryptoServiceProvider(); 
     publicAndPrivate.FromXmlString(File.ReadAllText(HostingEnvironment.MapPath("~/AppKey.xml"))); 

     JwtSecurityToken jwtToken = new JwtSecurityToken 
     (
      issuer: "http://example.com", 
      audience: "http://receiver.com", 
      claims: claims, 
      signingCredentials: new SigningCredentials(new RsaSecurityKey(publicAndPrivate), SecurityAlgorithms.RsaSha256Signature), 
      expires: DateTime.Now.AddDays(1) 
     ); 

     JwtSecurityTokenHandler tokenHandler = new JwtSecurityTokenHandler(); 
     string tokenString = tokenHandler.WriteToken(jwtToken); 

     return tokenString; 
    } 

ここで使用される「AppKey.xml」ファイルは、後でトークンをデコードするために使用されるトークンに署名するためのキーです。次に、このような以前使用されたキーファイルを使用してトークンを検証するために、customAuthorizeAttributeを作成することができます（Webサービスについてはわかりませんが、別の方法が必要です）。

public class CustomAuthorizeAttribute : AuthorizeAttribute 
{ 
    public override void OnAuthorization(System.Web.Http.Controllers.HttpActionContext actionContext) 
    { 

     AuthenticationHeaderValue token = actionContext.Request.Headers.Authorization; 
     if (ValidateToken(token.ToString())) 
      return; 
     else 
      throw new HttpResponseException(System.Net.HttpStatusCode.Unauthorized); 
    } 

    private bool ValidateToken(string TokenString) 
    { 
     bool result = false; 

     try 
     { 
      SecurityToken securityToken = new JwtSecurityToken(TokenString); 
      JwtSecurityTokenHandler securityTokenHandler = new JwtSecurityTokenHandler(); 
      RSACryptoServiceProvider publicAndPrivate = new RSACryptoServiceProvider(); 

      publicAndPrivate.FromXmlString(File.ReadAllText(HostingEnvironment.MapPath("~/AppKey.xml"))); 

      TokenValidationParameters validationParameters = new TokenValidationParameters() 
      { 
       ValidIssuer = "http://example.com", 
       ValidAudience = "http://receiver.com", 
       IssuerSigningKey = new RsaSecurityKey(publicAndPrivate) 
      }; 

      ClaimsPrincipal claimsPrincipal = securityTokenHandler.ValidateToken(TokenString, validationParameters, out securityToken); 

      result = true; 
     } 
     catch (Exception ex) 
     { 
      result = false; 
     } 

     return result; 
    } 
} 

ここで、権限を使用する場合は、このcustomAuthoorize属性をこのようなメソッドに置くことができます。

[CustomAuthorize] 
    [HttpPost] 
    public string TestAuthorization() 
    { 
     return "Success!"; 
    } 

クライアント側： Angular2アプリケーションでは、このようにあなたのためのサーバにリクエストを送信する前に認証ヘッダーにトークンを挿入するサービスを実装します。

export class DataService { 

constructor(private http: Http) { } 

postService(url: string, body: any, options?: RequestOptions):  Observable<any> { 
let tempOptions: RequestOptions = options; 

if (tempOptions) 
    tempOptions.headers.append('Authorization', localStorage.getItem("appToken")); 
else { 
    tempOptions = new RequestOptions(); 
    let hd = new Headers(); 
    hd.append('Authorization', localStorage.getItem("appToken")); 

    tempOptions.headers = hd; 
} 

return this.http.post(url, body, tempOptions).map((result: Response) => <any>result.json()); 

} 

} 

実際のコンポーネントクラスでは、単純に実装します。

Login() { 
this.myDataService.postService('http://YOURAPI/Login?username=xyz&password=xyz', null).subscribe(result => { 
    let token = result; 
    localStorage.setItem("appToken",token); 
    this.message="Login successful"; 
}); 

は、loginメソッド内のローカルストレージにトークンを保存し、作成したばかりの角度サービスを介してサーバーのメソッドを呼び出すたびその後、認証トークンはリクエストヘッダに注入されます。

YourMethod() { 
this.myDataService.postService('http://YourAPI/TestAuthorization', null).subscribe(result => { 
    this.message = result; 
}); 

すべて設定されています。楽しい！