角度リソースにowinトークン認証ヘッダーを設定する方法

Question

私は現在現在作業中です。私はうまく説明できないかもしれませんが、私が理解している限り、私は同じことを私の理解に入れたいと思います。

ウェブAPIにOwinトークンベースの認証を使用しています。ログイン用にアクセストークンを返すトークンメソッドを呼び出しています。私はアクセストークンなしでWeb APIメソッドを呼び出すことができないように、Web APIを保護する方法を知りたいと思います。私は角度jsのリソースを使用しています、私はangularjsサービスの部分にヘッダを定義する必要があると信じていますが、どこにどのように正確に私は何も考えていない、誰もが私を助けてください。

例： -

angularjsに書かれたこの私のサービス、

sghServices.factory('GlobalSettingsService', function ($resource) { 
return $resource("../Api/eClaim/SecondGlobalSettings", 
    {}, 
    { 
     post: { 
      method: 'POST', isArray: false, 
      headers: { 'Content-Type': 'application/json' } 
     }, 
     update: { 
      method: 'PUT' 
     } 
    }); 
}); 

私はアクセスせずにWeb APIにアクセスすることができるよ今のところこれは、Web APIメソッド

[Authorize]   
[Route("~/Api/eClaim/GlobalSettings")] 
[HttpGet] 
public ReportAndeCliam GetGlobalSettings() 
{ 
    //Code Wriiten here 
} 

ですトークンを使用できない場合は、[Authorized] Web APIメソッドを使用することはできません。

ありがとうございました:)

Answer 1

以下のようにapiでフィルタクラスを作成します。

public class AuthorizeAPIAttribute : AuthorizationFilterAttribute 
{ 
    /// <summary> 
    /// Calls when a process requests authorization. 
    /// </summary> 
    /// <param name="actionContext">The action context, which encapsulates information for using <see cref="T:S:System.Web.Http.Filters.AuthorizationFilterAttribute" />.</param> 
    public override void OnAuthorization(System.Web.Http.Controllers.HttpActionContext actionContext) 
    { 
     if (!ConfigItems.APISecurityEnable) 
     { 
      return; 
     } 

     var headers = actionContext.Request.Headers; 
     var security = headers.Any(x => x.Key == "Security"); 
     if (security) 
     { 
      var value = headers.FirstOrDefault(x => x.Key == "Security").Value.FirstOrDefault(); 
      if (value != null) 
      { 
       string token = value; 
       if (token == ConfigItems.APIToken) 
       { 
        return; 
       } 
      } 
     } 

     actionContext.Response = new HttpResponseMessage(System.Net.HttpStatusCode.Unauthorized); 
     actionContext.Response.Content = new StringContent("Security Failed", Encoding.UTF8, "application/json"); 
     base.OnAuthorization(actionContext); 
    } 
} 

ConfigItemsクラス

/// <summary> 
/// ConfigItems class 
/// </summary> 
public class ConfigItems 
{ 
    /// <summary> 
    /// Gets a value indicating whether API Security Enable 
    /// </summary> 
    public static bool APISecurityEnable 
    { 
     get 
     { 
      if (Convert.ToBoolean(WebConfigurationManager.AppSettings["APISecurityEnable"])) 
      { 
       return true; 
      } 
      else 
      { 
       return false; 
      } 
     } 
    } 

    /// <summary> 
    /// Gets a value APIToken 
    /// </summary> 
    public static string APIToken 
    { 
     get 
     { 
      return WebConfigurationManager.AppSettings["APIToken"]; 
     } 
    } 
} 

そして、あなたはこのように、コントローラで使用することができます。

[AuthorizeAPIAttribute] 
public class MainController : ApiController 
{ 
} 

角度サービスのセキュリティキーを渡すと、上記のフィルタがチェックインされます。

angular.module('userApp').factory('httpRequestInterceptor', function() { 
    return { 
     request: function (config) { 
      config.headers['Security'] = "Key"; 
      return config; 
     } 
    }; 
}); 
angular.module('userApp', ['ngAnimate', 'ngRoute', 'angular.filter']).config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.interceptors.push('httpRequestInterceptor'); 
}]); 

上記のように、プロジェクトではセキュリティキーをグローバルに設定できます。