Mixing
.Net Core 2.1 and Angular 6 Cookies
I have a little private Project and now I'm hanging with cookies.
First of all I want to show you some code:
UserServiceControler.cs
[HttpPost("IsAuthenticated")]
public IActionResult IsAuthenticated([FromBody] IsAuthenticatedRequest request) {
var hash = _userService.IsAuthenticated(HttpContext, request);
switch (hash) {
case "200":
case "401":
return new StatusCodeResult(Convert.ToInt32(hash));
default:
if (HttpContext.Request.Cookies.Contains("TEST")) {
HttpContext.Response.Cookies.Delete("TEST");
}
HttpContext.Response.Cookies.Append("Test", hash, new CookieOptions() {
HttpOnly = true,
Secure = true,
IsEssential = true,
Domain = "localhost",
Expires = new DateTimeOffset(DateTime.Now).AddMinutes(20.0)
});
return new StatusCodeResult(200);
}
}
Proxy.conf.json
{
"/api/*": {
"target": "https://localhost:5001",
"secure": false,
"topLevel": "debug",
"changeOrigin": true
},
"/login.html": {
"target": "http://localhost:4200/assets/pages",
"secure": false
},
"/": {
"target": "http://localhost:4200",
"secure": false
}
}
login.html just function
var paramString = "{username: "test", password: "test"}";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.location.href = "/";
} else if (this.status == 401) {
alert("1");
}
};
xhttp.open("POST", "/api/UserService/IsAuthenticated", true);
xhttp.withCredentials = true;
xhttp.setRequestHeader("Content-type", "application/json-patch+json");
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xhttp.setRequestHeader("Access-Control-Allow-Credentials", "true");
xhttp.send(paramString);
When I test my IsAuthenticated via Swagger, I get my cookie with all I want. But when I want to use this in my Angular app, i don't get my cookie.
How does it works:
Normally when I call /api/UserService/IsAuthenticated, in swagger, and give him a username and a password it sets the cookie in my browser. This makes my happy because this shows me that my api is not the problem.
Now it comes to Angular.
I start my app via npm start and this makes that ng serve --proxy-config proxy.conf.json nothing special.
In my index.html is the same code as in login.html just with test username and password because it looks at the cookie in my api.
So I go to localhost:4200. First it should redirect me to localhost:4200/login.html because I'm not logged in. This works.
Now in login.html I give him my username and my password --> wait some ms --> and i get StatusCode 200 and in my Brower Console at network i see my request with a response cookie. But it isn't set in my browser. This is not good. That I get redirected to localhost:4200 because StatusCode is 200 and at index.html he checks again if i'm Authenticated and I get redirected back to localhost:4200/login.html because of cookie is not there.
Can anyone help me please with this cookie problem? Or is there a better way how I can make this user session?
angular cookies asp.net-core-2.1 edited Nov 22 '18 at 10:10
Mike
2,0031722
asked Nov 22 '18 at 10:00
Darky_ChanDarky_Chan
448
|
show 5 more comments
I have a little private Project and now I'm hanging with cookies.
First of all I want to show you some code:
UserServiceControler.cs
[HttpPost("IsAuthenticated")]
public IActionResult IsAuthenticated([FromBody] IsAuthenticatedRequest request) {
var hash = _userService.IsAuthenticated(HttpContext, request);
switch (hash) {
case "200":
case "401":
return new StatusCodeResult(Convert.ToInt32(hash));
default:
if (HttpContext.Request.Cookies.Contains("TEST")) {
HttpContext.Response.Cookies.Delete("TEST");
}
HttpContext.Response.Cookies.Append("Test", hash, new CookieOptions() {
HttpOnly = true,
Secure = true,
IsEssential = true,
Domain = "localhost",
Expires = new DateTimeOffset(DateTime.Now).AddMinutes(20.0)
});
return new StatusCodeResult(200);
}
}
Proxy.conf.json
{
"/api/*": {
"target": "https://localhost:5001",
"secure": false,
"topLevel": "debug",
"changeOrigin": true
},
"/login.html": {
"target": "http://localhost:4200/assets/pages",
"secure": false
},
"/": {
"target": "http://localhost:4200",
"secure": false
}
}
login.html just function
var paramString = "{username: "test", password: "test"}";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.location.href = "/";
} else if (this.status == 401) {
alert("1");
}
};
xhttp.open("POST", "/api/UserService/IsAuthenticated", true);
xhttp.withCredentials = true;
xhttp.setRequestHeader("Content-type", "application/json-patch+json");
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xhttp.setRequestHeader("Access-Control-Allow-Credentials", "true");
xhttp.send(paramString);
When I test my IsAuthenticated via Swagger, I get my cookie with all I want. But when I want to use this in my Angular app, i don't get my cookie.
How does it works:
Normally when I call /api/UserService/IsAuthenticated, in swagger, and give him a username and a password it sets the cookie in my browser. This makes my happy because this shows me that my api is not the problem.
Now it comes to Angular.
I start my app via npm start and this makes that ng serve --proxy-config proxy.conf.json nothing special.
In my index.html is the same code as in login.html just with test username and password because it looks at the cookie in my api.
So I go to localhost:4200. First it should redirect me to localhost:4200/login.html because I'm not logged in. This works.
Now in login.html I give him my username and my password --> wait some ms --> and i get StatusCode 200 and in my Brower Console at network i see my request with a response cookie. But it isn't set in my browser. This is not good. That I get redirected to localhost:4200 because StatusCode is 200 and at index.html he checks again if i'm Authenticated and I get redirected back to localhost:4200/login.html because of cookie is not there.
Can anyone help me please with this cookie problem? Or is there a better way how I can make this user session?
angular cookies asp.net-core-2.1 edited Nov 22 '18 at 10:10
Mike
2,0031722
asked Nov 22 '18 at 10:00
Darky_ChanDarky_Chan
448
Can you be more specific when you say But it isn't set in my browser.?
– Kirk Larkin
Nov 22 '18 at 11:23
When you pressF12then go to storage and then cookies, e.g. there should be a stackoverflow cookie now. When I test it in Swagger I have my own Cookie there too. But not when I do it with Angular
– Darky_Chan
Nov 22 '18 at 11:27
1
Have you usedAllowCredentialsin your ASP.NET Core project's CORS configuration?
– Kirk Larkin
Nov 22 '18 at 11:36
Just tried, but nothing changed
– Darky_Chan
Nov 22 '18 at 11:44
Are you actively doing anything to save the cookie? Like setting document.cookie the token you receive from the API?
– Boanta Ionut
Nov 22 '18 at 12:11
|
show 5 more comments
I have a little private Project and now I'm hanging with cookies.
First of all I want to show you some code:
UserServiceControler.cs
[HttpPost("IsAuthenticated")]
public IActionResult IsAuthenticated([FromBody] IsAuthenticatedRequest request) {
var hash = _userService.IsAuthenticated(HttpContext, request);
switch (hash) {
case "200":
case "401":
return new StatusCodeResult(Convert.ToInt32(hash));
default:
if (HttpContext.Request.Cookies.Contains("TEST")) {
HttpContext.Response.Cookies.Delete("TEST");
}
HttpContext.Response.Cookies.Append("Test", hash, new CookieOptions() {
HttpOnly = true,
Secure = true,
IsEssential = true,
Domain = "localhost",
Expires = new DateTimeOffset(DateTime.Now).AddMinutes(20.0)
});
return new StatusCodeResult(200);
}
}
Proxy.conf.json
{
"/api/*": {
"target": "https://localhost:5001",
"secure": false,
"topLevel": "debug",
"changeOrigin": true
},
"/login.html": {
"target": "http://localhost:4200/assets/pages",
"secure": false
},
"/": {
"target": "http://localhost:4200",
"secure": false
}
}
login.html just function
var paramString = "{username: "test", password: "test"}";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.location.href = "/";
} else if (this.status == 401) {
alert("1");
}
};
xhttp.open("POST", "/api/UserService/IsAuthenticated", true);
xhttp.withCredentials = true;
xhttp.setRequestHeader("Content-type", "application/json-patch+json");
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xhttp.setRequestHeader("Access-Control-Allow-Credentials", "true");
xhttp.send(paramString);
When I test my IsAuthenticated via Swagger, I get my cookie with all I want. But when I want to use this in my Angular app, i don't get my cookie.
How does it works:
Normally when I call /api/UserService/IsAuthenticated, in swagger, and give him a username and a password it sets the cookie in my browser. This makes my happy because this shows me that my api is not the problem.
Now it comes to Angular.
I start my app via npm start and this makes that ng serve --proxy-config proxy.conf.json nothing special.
In my index.html is the same code as in login.html just with test username and password because it looks at the cookie in my api.
So I go to localhost:4200. First it should redirect me to localhost:4200/login.html because I'm not logged in. This works.
Now in login.html I give him my username and my password --> wait some ms --> and i get StatusCode 200 and in my Brower Console at network i see my request with a response cookie. But it isn't set in my browser. This is not good. That I get redirected to localhost:4200 because StatusCode is 200 and at index.html he checks again if i'm Authenticated and I get redirected back to localhost:4200/login.html because of cookie is not there.
Can anyone help me please with this cookie problem? Or is there a better way how I can make this user session?
angular cookies asp.net-core-2.1 edited Nov 22 '18 at 10:10
Mike
2,0031722
asked Nov 22 '18 at 10:00
Darky_ChanDarky_Chan
448
I have a little private Project and now I'm hanging with cookies.
First of all I want to show you some code:
UserServiceControler.cs
[HttpPost("IsAuthenticated")]
public IActionResult IsAuthenticated([FromBody] IsAuthenticatedRequest request) {
var hash = _userService.IsAuthenticated(HttpContext, request);
switch (hash) {
case "200":
case "401":
return new StatusCodeResult(Convert.ToInt32(hash));
default:
if (HttpContext.Request.Cookies.Contains("TEST")) {
HttpContext.Response.Cookies.Delete("TEST");
}
HttpContext.Response.Cookies.Append("Test", hash, new CookieOptions() {
HttpOnly = true,
Secure = true,
IsEssential = true,
Domain = "localhost",
Expires = new DateTimeOffset(DateTime.Now).AddMinutes(20.0)
});
return new StatusCodeResult(200);
}
}
Proxy.conf.json
{
"/api/*": {
"target": "https://localhost:5001",
"secure": false,
"topLevel": "debug",
"changeOrigin": true
},
"/login.html": {
"target": "http://localhost:4200/assets/pages",
"secure": false
},
"/": {
"target": "http://localhost:4200",
"secure": false
}
}
login.html just function
var paramString = "{username: "test", password: "test"}";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
window.location.href = "/";
} else if (this.status == 401) {
alert("1");
}
};
xhttp.open("POST", "/api/UserService/IsAuthenticated", true);
xhttp.withCredentials = true;
xhttp.setRequestHeader("Content-type", "application/json-patch+json");
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xhttp.setRequestHeader("Access-Control-Allow-Credentials", "true");
xhttp.send(paramString);
When I test my IsAuthenticated via Swagger, I get my cookie with all I want. But when I want to use this in my Angular app, i don't get my cookie.
How does it works:
Normally when I call /api/UserService/IsAuthenticated, in swagger, and give him a username and a password it sets the cookie in my browser. This makes my happy because this shows me that my api is not the problem.
Now it comes to Angular.
I start my app via npm start and this makes that ng serve --proxy-config proxy.conf.json nothing special.
In my index.html is the same code as in login.html just with test username and password because it looks at the cookie in my api.
So I go to localhost:4200. First it should redirect me to localhost:4200/login.html because I'm not logged in. This works.
Now in login.html I give him my username and my password --> wait some ms --> and i get StatusCode 200 and in my Brower Console at network i see my request with a response cookie. But it isn't set in my browser. This is not good. That I get redirected to localhost:4200 because StatusCode is 200 and at index.html he checks again if i'm Authenticated and I get redirected back to localhost:4200/login.html because of cookie is not there.
Can anyone help me please with this cookie problem? Or is there a better way how I can make this user session?
angular cookies asp.net-core-2.1 angular cookies asp.net-core-2.1 edited Nov 22 '18 at 10:10
Mike
2,0031722
asked Nov 22 '18 at 10:00
Darky_ChanDarky_Chan
448
edited Nov 22 '18 at 10:10
Mike
2,0031722
asked Nov 22 '18 at 10:00
Darky_ChanDarky_Chan
448
edited Nov 22 '18 at 10:10
Mike
2,0031722
edited Nov 22 '18 at 10:10
Mike
2,0031722
edited Nov 22 '18 at 10:10
Mike
2,0031722
2,0031722
asked Nov 22 '18 at 10:00
Darky_ChanDarky_Chan
448
asked Nov 22 '18 at 10:00
Darky_ChanDarky_Chan
448
asked Nov 22 '18 at 10:00
Darky_ChanDarky_Chan
448
448
Can you be more specific when you say But it isn't set in my browser.?
– Kirk Larkin
Nov 22 '18 at 11:23
When you pressF12then go to storage and then cookies, e.g. there should be a stackoverflow cookie now. When I test it in Swagger I have my own Cookie there too. But not when I do it with Angular
– Darky_Chan
Nov 22 '18 at 11:27
1
Have you usedAllowCredentialsin your ASP.NET Core project's CORS configuration?
– Kirk Larkin
Nov 22 '18 at 11:36
Just tried, but nothing changed
– Darky_Chan
Nov 22 '18 at 11:44
Are you actively doing anything to save the cookie? Like setting document.cookie the token you receive from the API?
– Boanta Ionut
Nov 22 '18 at 12:11
|
show 5 more comments
Can you be more specific when you say But it isn't set in my browser.?
– Kirk Larkin
Nov 22 '18 at 11:23
When you pressF12then go to storage and then cookies, e.g. there should be a stackoverflow cookie now. When I test it in Swagger I have my own Cookie there too. But not when I do it with Angular
– Darky_Chan
Nov 22 '18 at 11:27
1
Have you usedAllowCredentialsin your ASP.NET Core project's CORS configuration?
– Kirk Larkin
Nov 22 '18 at 11:36
Just tried, but nothing changed
– Darky_Chan
Nov 22 '18 at 11:44
Are you actively doing anything to save the cookie? Like setting document.cookie the token you receive from the API?
– Boanta Ionut
Nov 22 '18 at 12:11
Can you be more specific when you say But it isn't set in my browser.?
– Kirk Larkin
Nov 22 '18 at 11:23
Can you be more specific when you say But it isn't set in my browser.?
– Kirk Larkin
Nov 22 '18 at 11:23
When you press
F12 then go to storage and then cookies, e.g. there should be a stackoverflow cookie now. When I test it in Swagger I have my own Cookie there too. But not when I do it with Angular– Darky_Chan
Nov 22 '18 at 11:27
When you press
F12 then go to storage and then cookies, e.g. there should be a stackoverflow cookie now. When I test it in Swagger I have my own Cookie there too. But not when I do it with Angular– Darky_Chan
Nov 22 '18 at 11:27
1
1
Have you used
AllowCredentials in your ASP.NET Core project's CORS configuration?– Kirk Larkin
Nov 22 '18 at 11:36
Have you used
AllowCredentials in your ASP.NET Core project's CORS configuration?– Kirk Larkin
Nov 22 '18 at 11:36
Just tried, but nothing changed
– Darky_Chan
Nov 22 '18 at 11:44
Just tried, but nothing changed
– Darky_Chan
Nov 22 '18 at 11:44
Are you actively doing anything to save the cookie? Like setting document.cookie the token you receive from the API?
– Boanta Ionut
Nov 22 '18 at 12:11
Are you actively doing anything to save the cookie? Like setting document.cookie the token you receive from the API?
– Boanta Ionut
Nov 22 '18 at 12:11
|
show 5 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428330%2fnet-core-2-1-and-angular-6-cookies%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428330%2fnet-core-2-1-and-angular-6-cookies%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you be more specific when you say But it isn't set in my browser.?
– Kirk Larkin
Nov 22 '18 at 11:23
When you press
F12then go to storage and then cookies, e.g. there should be a stackoverflow cookie now. When I test it in Swagger I have my own Cookie there too. But not when I do it with Angular– Darky_Chan
Nov 22 '18 at 11:27
1
Have you used
AllowCredentialsin your ASP.NET Core project's CORS configuration?– Kirk Larkin
Nov 22 '18 at 11:36
Just tried, but nothing changed
– Darky_Chan
Nov 22 '18 at 11:44
Are you actively doing anything to save the cookie? Like setting document.cookie the token you receive from the API?
– Boanta Ionut
Nov 22 '18 at 12:11