Angular cli + windows authentication backend
I created an Angular CLI project with a proxy link to my backend project that contains web api services.
launchSettings.json (backend project):
...
"iisSettings": {
"windowsAuthentication": true,
"anonymousAuthentication": false,
"iisExpress": {
"applicationUrl": "http://localhost:10863/",
"sslPort": 0
}
},
...
proxy.conf.json (frontend project):
{
"/api": {
"target": "http://localhost:10863",
"secure": false,
"logLevel": "debug"
}
}
package.json (frontend project):
...
"scripts": {
"ng": "ng",
"start": "start http://localhost:4200 && ng serve --proxy-config proxy.conf.json",
"build": "ng build --prod --output-path=..\\CoreTest\\wwwroot",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
...
Then I fire up the back-end and start the Kestrel web server by running npm start
. With angular2 service, I am doing http-get for one of the backend services. Since the back-end services are running in IISExpress with Windows Authentication (I want Windows Authentication) I get a 401 error.
I could do npm run build
and go to my IISExpress url and load index.html as posted in ng build, but I would like to use the ng serve method as development is much smoother since the ng service runs in memory.
My question is, how can I use Angular CLI with Windows Authentication during development?
source to share
For what it's worth, it's better to use a js proxy file https://github.com/angular/angular-cli/issues/5627#issuecomment-289381319
source to share
I found a hack here:
http://www.meekdeveloper.com/angular-cli-asp-net-core-windows-authentication/
it works. My backend project can now correctly identify the caller with User.Identity.Name
. This is really a hack, it would be nice if the Angular CLI could officially support this!
source to share
Hope this helps.
Create a proxy.conf.json file with the following content (replace the target url with your backend url):
{
"/api": {
"target": "http://localhost:20938",
"secure": false
}
}
Create a proxy.conf.js file with the following content (replace the target url with your backend url):
const Agent = require("agentkeepalive");
module.exports = {
'/api': {
target: "http://localhost:20938",
secure: false,
agent: new Agent({
maxSockets: 100,
keepAlive: true,
maxFreeSockets: 10,
keepAliveMsecs: 100000,
timeout: 6000000,
keepAliveTimeout: 90000
}),
onProxyRes: proxyRes => {
const key = "www-authenticate";
proxyRes.headers[key] = proxyRes.headers[key] &&
proxyRes.headers[key].split(",");
}
}
};
Place this line in your package.json file, under the "scripts" section:
"start": "ng serve --proxy-config proxy.conf.json --o --port 4200"
run npm start
.
source to share