JWT Authorization in .NET Core -- 401 Error - asp.net-mvc

Question

I am trying to implement JWT authentication between a simple UI and Web API. Both are .NET Core 2.0 and I'm using Ajax to call the API functions. I am able to login with no problem whatsoever and it passes the Bearer token back to me; however, when I decorate my SaveProduct method with Authorize, call it with Ajax, and pass the token, it returns 401 Unauthorized. As soon as I remove the Authorize it works fine. I've worked for days to figure out what I'm missing and have created several iterations of my apps to see if that would help, but have not been able to figure it out. I've scoured the web and tried numerous suggestions, but as yet to no avail.
I would appreciate any insights you might have. Thanks in advance!
Here is my code:
WEB API -- STARTUP
using System.Text;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.IdentityModel.Tokens;
namespace SportsStoreAngAPI
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("AllowAllOrigins",
builder => builder.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials()
.Build());
});
services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(options =>
{
options.TokenValidationParameters = new TokenValidationParameters
{
IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("superdooperultrasafeKey#999")),
RequireSignedTokens = false,
ValidateIssuer = true,
ValidateAudience = true,
ValidateLifetime = true,
ValidateIssuerSigningKey = true,
ValidIssuer = "http://localhost:3700",
ValidAudience = "http://localhost:3700"
};
});
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseCors("AllowAllOrigins");
app.UseStatusCodePages();
app.UseDeveloperExceptionPage();
app.UseStaticFiles();
app.UseAuthentication();
app.UseMvc();
}
}
}
WEB API -- LOGIN CONTROLLER
using Microsoft.AspNetCore.Mvc;
using Microsoft.IdentityModel.Tokens;
using SportsStoreAngAPI.Models;
using System;
using System.Collections.Generic;
using System.IdentityModel.Tokens.Jwt;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace SportsStoreAngAPI.Controllers
{
[Route("[controller]")]
public class LoginController : Controller
{
[HttpPost]
public JsonResult Login([FromBody] LoginModel user)
{
LoginReturnModel l = new LoginReturnModel();
if (user == null)
{
l.Success = false;
l.Token = null;
}
if (user.Name == "admin" && user.Password == "secret")
{
var secretKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("superSecretKey#345"));
var signinCredentials = new SigningCredentials(secretKey, SecurityAlgorithms.HmacSha256);
var tokenOptions = new JwtSecurityToken(
//issuer: "http://localhost:3700",
//audience: "http://localhost:3700",
//claims: new List<Claim>(),
expires: DateTime.Now.AddDays(5),
signingCredentials: signinCredentials
);
var tokenString = new JwtSecurityTokenHandler().WriteToken(tokenOptions);
l.Success = true;
l.Token = tokenString;
}
else
{
l.Success = false;
l.Token = null;
}
JsonResult jR = new JsonResult(l);
return jR;
}
}
}
WEB API - PRODUCTS CONTROLLER
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using SportsStoreAngAPI.Models;
using System.Collections.Generic;
namespace SportsStoreAngAPI.Controllers
{
[Produces("application/json")]
[Route("[controller]")]
public class ProductsController : Controller
{
[HttpGet]
public IEnumerable<Product> GetProducts()
{
List<Product> p = new List<Product>();
return p;
}
[HttpPost, Authorize]
public Product SaveProduct([FromBody]Product p)
{
return p;
}
}
}
FRONT END UI
#{
ViewData["Title"] = "Home Page";
}
<button class="btn btn-primary" type="button" onclick="loginAPI()">Login</button>
<div name="puthere" id="puthere"></div>
<button class="btn btn-primary" type="button" onclick="postNewRecord()">Post New Record</button>
<div name="puthere2" id="puthere2"></div>
<script>
$(document).ready(function () {
});
var token = '';
var loginAPI = function () {
var myData =
{
Name: 'admin',
Password: 'secret'
};
var myDataString = JSON.stringify(myData);
$.ajax({
type: 'POST',
url: 'http://localhost:3700/login',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data: myDataString,
success: function (results) {
$('#puthere').empty();
var html = '';
$.each(results, function (index, value) {
html = html + '<p>' + index + ' : ' + value + '</p>';
if (index == 'token') {
token = value;
};
});
$('#puthere').append(html);
},
error: function (xhr, textStatus, error) {
alert(Error);
alert(xhr.statusText);
alert(textStatus);
alert(error);
}
});
};
var postNewRecord = function () {
var myData =
{
Id: '0',
Name: 'Soccer Ball',
Category: 'Sports',
Description: 'Round ball for playing the beautiful game',
Price: '13.75'
};
var myDataString = JSON.stringify(myData);
$.ajax({
type: 'POST',
url: 'http://localhost:3700/products',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data: myDataString,
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', token)
},
success: function() {
alert('Saved successfully!');
},
error: function () {
alert('Something went very wrong!');
}
});
};
</script>

Answer 1

EDIT: In your Startup-Class you have defined a different key than the one you are using when you generate your token. They also have to be the same. I'd suggest you to read a little about JWT and how it works here.
So first thing I noticed is that you removed the issuer from the token you generate in the back-end. You have to define them because you also set them up in your Startup-Class.
Secondly your ajax request header must be set like this:
xhr.setRequestHeader('Authorization', 'Bearer ' + token)
You have to define the authorization-type within the headers-value.