Angular 5 次通过网络进行身份验证 api

Question

我尝试 post 我的登录凭证到我的 asp.net 核心网站 api。但每次我这样做都会收到这条消息。

选项 XHR http://localhost:64989/api/auth/login [HTTP/1.1 415 不支持的媒体类型 16ms]

错误 Object { headers: Object, 状态: 0, statusText: "Unknown Error", url: null, ok: false, name: "HttpErrorResponse"，消息："Http failure response for (unknown …"，错误：错误}

我的代码在 Angular 方面看起来像这样：

login( email:string, password:string ) :Observable<boolean>{

  return this.http.post('http://localhost:64989/api/auth/login', {email, password}, {headers: new HttpHeaders().set('Content-Type', 'application/json')})
   .map(data => {
     let userAuth = data;
     if(userAuth){
       localStorage.setItem('currentUser', JSON.stringify(userAuth));
       return true;
     }else{
       return false;
     } 
   });
}

在服务器端我有一个网站 api 应该检查登录凭据。这适用于 postman 但不适用于 angular。 Web Api 是用 Asp.net 核心 2 制作的。

 [AllowAnonymous]
    [HttpPost("CreateToken")]
    [Route("login")]
    public async Task<IActionResult> Login([FromBody] LoginDTO model)
    {
        try
        {
            var user = await _userManager.FindByNameAsync(model.Email);
            if (user == null)
            {
                return Unauthorized();
            }

            var signInResult = await _signInManager.CheckPasswordSignInAsync(user, model.Password, false);

            if (signInResult.Succeeded)
            {
                var userClaims = await _userManager.GetClaimsAsync(user);

                var claims = new[]
                {
                    new Claim(JwtRegisteredClaimNames.Sub, user.UserName),
                    new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
                    new Claim(JwtRegisteredClaimNames.Email, user.Email)
                }.Union(userClaims);

                var symmetricSecurityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration["JwtToken:Key"]));
                var signingCredentials = new SigningCredentials(symmetricSecurityKey, SecurityAlgorithms.HmacSha256);

                var jwtSecurityToken = new JwtSecurityToken(
                    issuer: _configuration["JwtToken:Issuer"],
                    audience: _configuration["JwtToken:Audience"],
                    claims: claims,
                    expires: DateTime.UtcNow.AddMinutes(60),
                    signingCredentials: signingCredentials
                    );
                return Ok(new
                {
                    token = new JwtSecurityTokenHandler().WriteToken(jwtSecurityToken),
                    expiration = jwtSecurityToken.ValidTo
                });
            }
            return Unauthorized();
        }
        catch (Exception ex)
        {
            _logger.LogError($"error while creating token: {ex}");
            return StatusCode((int)HttpStatusCode.InternalServerError, "error while creating token");
        }
    }

Answer 1

我想我找到了一种在开发中对我有用的方法。未生产。

问题出在 Web API 上。如果您的网站来自不同的来源 api，它不会 awnser。就我而言，如果我尝试在 http://localhost:4200/ and my web api is running on http://localhost:64989 上从客户端应用程序调用我的网络 api，我将遇到这个问题。如果您的客户端应用程序和服务器端应用程序在同一个域下，您就不会有任何问题。我将把它放在生产的同一个域中。所以我仍然需要开发的解决方法。

在我的 ASP.NET 核心应用程序中，我可以将 CORS（跨源资源共享）添加到 Startup。

  public void ConfigureServices(IServiceCollection services)
  {
        services.AddCors();
        //add cors bevor mvc
        services.AddMvc();
  }

 public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {

        loggerFactory.AddConsole();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();

            app.UseCors(builder =>
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader());
        }


        app.UseAuthentication();


        app.UseMvc();
    }

在 IsDevelopment 中定义使用 cors。在这里你可以定义哪个来源是允许的，哪个不是。我允许任何用于开发，因为我不会在生产中遇到这个问题。

Angular 5 次通过网络进行身份验证 api

Angular 5 authenticate with web api

asp.net

authentication

httpclient

access-token

angular