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

Обновить

December 2018

Просмотры

3.9k раз

5

Я пытаюсь настроить проверку подлинности из приложения AngularJS Single Page (SPA) на веб-Апи, построенной на 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, который имеет Разрешенный атрибут.

$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, так что я может быть полностью покинуть базу на моем подходе. Будем признательны любому совету.

1 ответы

4

Я считаю, что это порядок операций вещи. Перемещение оператора 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);