Login from JavaScript, CORS, completely separate III tiers #3298

meff created 7 years ago

Hello all. Once again thank you Halil for the wonderful framework.

Using ABP.Zero 1.5.1 I'm facing a real challenge: completely separate already created ABP + Module Zero software to run in 3 different servers: database, API and Web. The deployment schema should be:

Database server
Angular front end on on premise Web server + Web API for public front end
Angular front end on publicly accessible Web server, that will not have access to database and should use API from server 2.

I read almost all this forum. My current problem is authentication: when I authenticate using AJAX from Login.js (into AccountController from my .Web project) everything works fine if API and Angular is on the same server. But if I call authenticate from another server - right after

AccountController from .Web project

AuthenticationManager.SignIn(new AuthenticationProperties { IsPersistent = rememberMe }, identity);
return Json(new AjaxResponse {Success = true, TargetUrl = Request.ApplicationPath });

I get 401, that is converted by MVC to 302.

The full code: Login.js

$("#LoginButton").click(function(e) {
			e.preventDefault();
			abp.ui.setBusy(
				$("#LoginArea"),
				abp.ajax({
					url: "http://remoteAndInternallyAccesibleServer/Account/Login",
					//url: abp.appPath + "Account/Login",
					type: "POST",
					data: JSON.stringify({
						tenancyName: $("#TenancyName").val(),
						usernameOrEmailAddress: $("#EmailAddressInput").val(),
						password: $("#PasswordInput").val(),
						rememberMe: false
					})
				})
				.done(function(response) {
					abp.message.info("Login succeeded");
				})
				.fail(function(data) {
					abp.message.error(data.details, data.message);
				})
			);
		});

I always see "Login succeeded" message, I also get new record in AbpUserLoginAttempts table that login was successful. But after a few moments I get HTTP 302 (401, just as mentioned before, that was changed to 302 by MVC).

Everything is working fine from the SAME SERVER if I comment / un-comment this:

//url: "http://internallyaccesibleserver/Account/Login",
url: abp.appPath + "Account/Login",

This probably has something to do with CORS or authentication headers, or the cookie does not travel from my remoteAndInternallyAccesibleServer to my front end server, or some headers are missing from request or from response.

my Web.config part that deals with CORS

<httpProtocol>
		  <customHeaders>
			  <add name="Access-Control-Allow-Origin" value="*" />
			  <add name="Access-Control-Allow-Methods" value="GET, POST, HEAD, OPTIONS" />
			  <add name="Access-Control-Allow-Headers" value="Content-Type, x-xsrf-token" />
		  </customHeaders>
	  </httpProtocol>

Please help anyone, because I cannot solve this problem for a week already. What should I do to make authentication cookie to travel back to my browser from remote server using AJAX, then use this cookie to access all dynamically generated WebAPI functionality from my Angular front end (that is made completely with ABP)?

Login from JavaScript, CORS, completely separate III tiers #3298

2 Answer(s)