web api 跨域 asp.net基于JWT的web api身份验证及跨域调用实践（webtoon）

/// <summary>
 /// 表示jwt的payload
 /// </summary>
 public class AuthInfo
 {
  /// <summary>
  /// 用户名
  /// </summary>
  public string UserName { get; set; }
  /// <summary>
  /// 角色列表，可以用于记录该用户的角色,相当于claims的概念(如不清楚什么事claim，请google一下"基于声明的权限控制")
  /// </summary>
  public List<string> Roles { get; set; }
  /// <summary>
  /// 是否是管理员
  /// </summary>
  public bool IsAdmin { get; set; }

public class LoginController : ApiController
 {
  public LoginResult Post([FromBody]LoginRequest request)
  {
   LoginResult rs = new LoginResult();
   //假设用户名为"admin"，密码为"123"
   if (request.UserName == "admin" && request.Password == "123")
   {
    //如果用户登录成功，则可以得到该用户的身份数据。当然实际开发中，这里需要在数据库中获得该用户的角色及权限
    AuthInfo authInfo = new AuthInfo
    {
     IsAdmin = true,
     Roles = new List<string> { "admin", "owner" },
     UserName = "admin"
    };
    try
    {
     //生成token,SecureKey是配置的web.config中，用于加密token的key，打死也不能告诉别人
     byte[] key = Encoding.Default.GetBytes(ConfigurationManager.AppSettings["SecureKey"]);
     //采用HS256加密算法
     string token = JWT.JsonWebToken.Encode(authInfo, key, JWT.JwtHashAlgorithm.HS256);
     rs.Token = token;
     rs.Success = true;

    }
    catch
    {
     rs.Success = false;
     rs.Message = "登陆失败";
    }
   }
   else
   {
    rs.Success = false;
    rs.Message = "用户名或密码不正确";
   }
   return rs;
  }
 }

public class ApiAuthorizeAttribute : AuthorizeAttribute
 {
  protected override bool IsAuthorized(HttpActionContext actionContext)
  {
   //前端请求api时会将token存放在名为"auth"的请求头中
   var authHeader = from h in actionContext.Request.Headers where h.Key == "auth" select h.Value.FirstOrDefault();
   if (authHeader != null)
   {
    string token = authHeader.FirstOrDefault();
    if (!string.IsNullOrEmpty(token))
    {
     try
     {
      //对token进行解密
      string secureKey = System.Configuration.ConfigurationManager.AppSettings["SecureKey"];
      AuthInfo authInfo = JWT.JsonWebToken.DecodeToObject<AuthInfo>(token, secureKey);
      if (authInfo != null)
      {
       //将用户信息存放起来，供后续调用
       actionContext.RequestContext.RouteData.Values.Add("auth", authInfo);
       return true;
      }
      else
       return false;
     }
     catch
     {
      return false;
     }
    }
    else
     return false;
   }
   else
    return false;
  }
 }

//标记该controller要求身份验证
 [ApiAuthorize]
 public class UserController : ApiController
 {
  public string Get()
  {
   //获取回用户信息(在ApiAuthorize中通过解析token的payload并保存在RouteData中)
   AuthInfo authInfo = this.RequestContext.RouteData.Values["auth"] as AuthInfo;
   if (authInfo == null)
    return "无效的验收信息";
   else
    return string.Format("你好:{0},成功取得数据",authInfo.UserName);
  }
 }

$(function () {
   //调用api站点的登录接口,接口在登录成功后返回一个token。
   $("#login").on("click", function () {
    $.ajax({
     url: "http://localhost:8056/api/login",
     data: $("form").serialize(),
     method: "post",
     success: function (data) {
      if (data.Success) {
       //为简单起见，将token保存在全局变量中。
       window.token = data.Token;
       alert("登录成功");
      } else {
       alert("登录失败:" + data.Message);
      }
     }
    });
   });

   //调用api站点的获取数据的接口，该接口要求身份验证。
   $("#invoke").on("click", function () {
    $.ajax({
     url: "http://localhost:8056/api/user",
     method: "get",
     headers: { "auth": window.token },//通过请求头来发送token，放弃了通过cookie的发送方式
     complete: function (jqXHR,textStatus) {
      alert(jqXHR.responseText);
     },
     
    });
   });
  });
 </script>