Как использовать JWT для аутентификации пользователя с помощью Web Api 2 из углового SPA?

Question

Я пытаюсь настроить аутентификацию с помощью приложения Singleular Application (SPA) AngularJS на веб-сайт Api, основанный на OWIN. Вот что у меня есть ...

Это функция Логин (POST действие на AuthenticationController в API)

public HttpResponseMessage login(Credentials creds) 
    { 
     if (creds.Password == "password" && creds.Username.ToLower() == "username") 
     { 
      var user = new User { UserId = 101, Name = "John Doe", Role = "admin" }; 

      var tokenDescriptor = new SecurityTokenDescriptor() 
      { 
       Subject = new ClaimsIdentity(new[] 
       { 
        new Claim(ClaimTypes.Name, user.Name), 
        new Claim(ClaimTypes.Role, user.Role) 
       }), 

       AppliesToAddress = "http://localhost:/8080", 
       TokenIssuerName = "myApi", 

       SigningCredentials = new SigningCredentials(new InMemorySymmetricSecurityKey(TestApp.Api.Startup.GetBytes("ThisIsTopSecret")), 
        "http://www.w3.org/2001/04/xmldsig-more#hmac-sha256", 
        "http://www.w3.org/2001/04/xmlenc#sha256") 
      }; 

      var tokenHandler = new JwtSecurityTokenHandler(); 
      var token = tokenHandler.CreateToken(tokenDescriptor); 
      var tokenString = tokenHandler.WriteToken(token); 

      return Request.CreateResponse<LoginResponse>(HttpStatusCode.Accepted, new LoginResponse { User = user, AuthToken = tokenString }); 
     } 

     return Request.CreateResponse(HttpStatusCode.Unauthorized); 
    } 

Это мой Owin запуск конфигурации

public void Configuration(IAppBuilder app) 
    { 
     app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); 

     HttpConfiguration config = new HttpConfiguration(); 
     config.Routes.MapHttpRoute(
      name: "Default", 
      routeTemplate: "{controller}" 
     ); 

     var jsonSettings = config.Formatters.JsonFormatter.SerializerSettings; 
     jsonSettings.Formatting = Formatting.Indented; 
     jsonSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); 

     app.UseWebApi(config); 

     app.UseJwtBearerAuthentication(
     new JwtBearerAuthenticationOptions 
     { 
      AuthenticationMode = AuthenticationMode.Active, 
      AllowedAudiences = new[] { "http://localhost:8080" }, 
      IssuerSecurityTokenProviders = new IIssuerSecurityTokenProvider[] 
      { 
       new SymmetricKeyIssuerSecurityTokenProvider("myApp", TestApp.Api.Startup.GetBytes("ThisIsTopSecret")) 
      } 
     }); 
    } 

Это угловое код, который я использую, чтобы вызвать контроллер в API с атрибутом Authorized.

$http({ method: 'GET', url: 'http://localhost:5000/Admin', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + Session.token }}) 
      .then(function (res) { 
       return res.data; 
      }); 

Когда я вхожу в систему, я получаю возвращенный токен в виде строки. Затем я сохраняю его на сеансе на стороне клиента. Затем я беру его и помещаю его в заголовок для последующих запросов.

Когда я пытаюсь вызвать «Авторизованное» действие в API, я получаю ответ 401, хотя мой токен был передан через заголовок запроса.

Я новичок в JWT, поэтому я могу быть полностью вне зависимости от моего подхода. Будем признательны любому совету.

Answer 1

Я считаю, что это порядок операций. Переместите оператор app.UseJwt над строкой app.UseWebApi.

app.UseJwtBearerAuthentication(
    new JwtBearerAuthenticationOptions 
    { 
     AuthenticationMode = AuthenticationMode.Active, 
     AllowedAudiences = new[] { "http://localhost:8080" }, 
     IssuerSecurityTokenProviders = new IIssuerSecurityTokenProvider[] 
     { 
      new SymmetricKeyIssuerSecurityTokenProvider("myApp", TestApp.Api.Startup.GetBytes("ThisIsTopSecret")) 
     } 
    }); 

app.UseWebApi(config);