はどのようにWEBAPIはAngular2 SPAに組み込むことがChallengeResultことができますか？

Question

コンテキスト

我々はAngular2 単一ページのアプリケーション（SPA）のフロントエンドを使用するようにAsp.Netコア（ウェブAPI）を使用してWebアプリケーションを移行しています。このアプリケーションは当初、「個人ユーザーアカウント」で作成されました。 cshtmlビューをAngular2コンポーネントに変換しました。コントローラメソッドはJsonを生成し、認証にJWTを組み込んでいます。

私はこのConfiguring Google authenticationマイクロソフトのドキュメントを使用してきました。

通報

問題は、次の2つのコントローラの方法によって示されています。 LinkLoginメソッドは、ChallengeResultアクションを返します。明らかに、これはJSONに変換できません。私は、この結果は、ブラウザが自動的にリダイレクトLinkLoginCallback、外部ログインプロバイダにリダイレクトする原因になるとされている推測。

[HttpPost] 
    public async Task<IActionResult> LinkLogin([FromBody] string provider) 
    { 
     // Clear the existing external cookie to ensure a clean login process 
     await HttpContext.Authentication.SignOutAsync(externalCookieScheme); 

     // Request a redirect to the external login provider to link a login for the current user 
     string redirectUrl = Url.Action(nameof(LinkLoginCallback), "Manage"); 
     var properties = signInManager.ConfigureExternalAuthenticationProperties(provider, redirectUrl, userManager.GetUserId(User)); 
     return Challenge(properties, provider); 
    } 

    [HttpPost] 
    [Produces("application/json")] 
    public async Task<ActionResult> LinkLoginCallback() 
    { 
     User user = await userManager.GetUserAsync(User); 
     if (user == null) 
      return Json(false); 

     ExternalLoginInfo info = await signInManager.GetExternalLoginInfoAsync(await userManager.GetUserIdAsync(user)); 
     if (info == null) 
      return Json(false); 

     IdentityResult result = await userManager.AddLoginAsync(user, info); 
     if (result.Succeeded) 
     { 
      // Clear the existing external cookie to ensure a clean login process 
      await HttpContext.Authentication.SignOutAsync(externalCookieScheme); 
      return Json(true); 
     } 

     return Json(false); 
    } 

私はこの応答を得る角度からLinkLoginを呼び出そうとするならば：プリフライトリクエストに

応答は、アクセス制御チェックに合格しない：いいえ「アクセス制御 - 許可 - 起源」ヘッダを要求されたリソースに存在します。 Origin 'http://localhost:53462'はアクセスできません。応答にHTTPステータスコード405がありました。

Answer 1

このように、Angular2とWebApiの間のフローを変更することで、「ChallengeResult」を回避するソリューションが完成しました。

1. 角度パッケージにangular2-social-login npmパッケージを追加しました（すべてeasy instructions for setupに続く）。
1つに両方の制御方法を合併しました。 Web APIをするために必要な資格情報を取得するためにソーシャルメディアパッケージを使用するAngular2クライアントを変更

[HttpPost] 
[Produces("application/json")] 
public async Task<ActionResult> LinkLogin([FromBody] ExternalLoginViewModel info) 
{ 
    if (ModelState.IsValid) 
    { 
     User user = await userManager.GetUserAsync(User); 
     if (user != null) 
     { 
      IdentityResult result = await userManager.AddLoginAsync(user, new UserLoginInfo(info.LoginProvider, info.ProviderKey, info.LoginProvider)); 
      if (result.Succeeded) 
       return Json(true); 
     } 
    } 
    return Json(false); 
} 

3. ：ExternalLoginViewModelパラメータは、単純な（ステップ3の角度に移入）メール、ProviderKeyとLoginProviderプロパティを持つクラスです。 。 （this.service.LinkLoginがLinkLoginコントローラメソッドを呼び出す）

   public async LinkProvider(providerName: string): Promise<void> 
   { 
       const result: any = await this.auth.login(providerName).toPromise(); 
       const success: boolean = await this.service.LinkLogin({ 
        email: result.email, 
        loginProvider: result.provider, 
        providerKey: result.uid 
       }); 
   
       // Handle link response here 
   }