How to use authentication from my ASP.NET Core site to authenticate angular 2 web app? - authentication

Question

I have ASP.NET Core app with angular 2 front-end. I use cookie auth.
But I want to split my app into 2 separate sites - one front-end site on angular2 and one back-end site on asp.net core.
How do I use auth from ASP.NET Core site to authenticate front-end app?
There's a login page in my back-end site. How do I identify in front-end app that I'm not authenticated, then redirect to back-end app and then get auth cookies? I'm not sure I understand mechanic of this process.

Answer 1

I used token based authentication. I choosed this solution: https://stormpath.com/blog/token-authentication-asp-net-core & https://github.com/nbarbettini/SimpleTokenProvider

Answer 2

For Authentication I prefer to use cookies.
Use cookie authentication without Identity
Login Code
[HttpPost("login")]
[AllowAnonymous]
public async Task<HttpBaseResult> Login([FromBody]LoginDto dto)
{
var user = db.Users.Include(u=>u.UserRoles).SingleOrDefault();
var claims = new List<Claim>
{
new Claim(ClaimTypes.NameIdentifier, user.Id.ToString()),
new Claim(ClaimTypes.Name, user.UserName)
};
var roles = user.UserRoles.Select(u => u.Role);
foreach (var item in roles)
{
claims.Add(new Claim(ClaimTypes.Role, item.Name));
}
var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
await HttpContext.SignInAsync(
new ClaimsPrincipal(identity),
new AuthenticationProperties { IsPersistent = dto.RememberMe });
// ...
}
Cross Domain
ConfigureServices
{
options.SlidingExpiration = true;
options.Cookie.HttpOnly = false;
// Dynamically set the domain name of the prod env and dev env
options.Cookie.Domain = Configuration["CookieDomain"];
});
Configure
app.UseCors(builder => builder.WithOrigins("http://localhost:4200", "http://www.example.com","http://example.com")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
Angular Code
public login(userName: string, password: string, rememberMe: boolean): Observable<HttpBaseResult> {
const url: string = `${this.url}/login`;
var data = {
UserName: userName,
Password: password,
RememberMe: rememberMe
};
return this.client.post<HttpBaseResult>(url, data, { withCredentials: true });
}