New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

### Desired functionality Support for proxy to backend with Windows Authentication #5627

Closed
mcanic opened this Issue Mar 24, 2017 · 11 comments

Comments

Projects
None yet
5 participants
@mcanic

mcanic commented Mar 24, 2017

We would like to have support for connecting to a backend with Windows Authentication.
I have a c# asp.net core web application with api's, the angular application will be in the wwwroot folder, so that is all in 1 project. During development it is possible to successfully use a proxy with proxy.conf.json, but as far as I can see it does not support Windows authentication pass-through. I was able to make it work by using this hack: http://www.meekdeveloper.com/angular-cli-asp-net-core-windows-authentication/
here's my stackoverflow post: http://stackoverflow.com/questions/42981555/angular-cli-windows-authentication-backend/43001482#43001482

@filipesilva

This comment has been minimized.

Member

filipesilva commented Mar 24, 2017

Going into the CLI source in node_modules is a hack for sure, but truth is you can just use a .js file as proxy config instead. We don't have that documented though, so bad on us for people making blog posts with these hacks.

@mcanic

This comment has been minimized.

mcanic commented Mar 24, 2017

That is awesome. Can you give me simple example of how to implement such a js file? This is the code of which I believe is responsible for incorporating the Windows authentication over the proxy:

const Agent = require('agentkeepalive');

proxy: {
'/api': {
                    target: proxyConfig['/api'].target,
                    secure: false,
                    agent: new Agent({
                        maxSockets: 100,
                        keepAlive: true,
                        maxFreeSockets: 10,
                        keepAliveMsecs: 100000,
                        timeout: 6000000,
                        keepAliveTimeout: 90000
                    }),
                    onProxyRes: proxyRes => {
                        let key = 'www-authenticate';
                        proxyRes.headers[key] = proxyRes.headers[key] &&
                            proxyRes.headers[key].split(',');
                    }
                }
}
@filipesilva

This comment has been minimized.

Member

filipesilva commented Mar 24, 2017

I think you should be able to do something like:

//proxy-conf.js
const Agent = require('agentkeepalive');
module.exports = {
  '/api': {
                    target: proxyConfig['/api'].target,
                    secure: false,
                    agent: new Agent({
                        maxSockets: 100,
                        keepAlive: true,
                        maxFreeSockets: 10,
                        keepAliveMsecs: 100000,
                        timeout: 6000000,
                        keepAliveTimeout: 90000
                    }),
                    onProxyRes: proxyRes => {
                        let key = 'www-authenticate';
                        proxyRes.headers[key] = proxyRes.headers[key] &&
                            proxyRes.headers[key].split(',');
                    }
                }
};

We actually just pass it on to webpack-dev-server. The documentation for it can be found https://webpack.js.org/configuration/dev-server/#devserver-proxy but it doesn't seem to mention the JS file either.

@mcanic

This comment has been minimized.

mcanic commented Mar 24, 2017

That is awesome, it's a much better solution than hacking. I will test this next week and report back.
Even better would be if this could be incorperated into Angular CI, as a simple option 'useWindowsAuthentication': true in proxy.conf.json. Would that be a relevant addition?
This 'workaround' makes it possible for me to have a C# WebApi project with windows authentication and a separate Angular CLI front-end project with a proxy to the backend project.

@mcanic

This comment has been minimized.

mcanic commented Mar 27, 2017

You put me in the right direction. This solution works with windows authentication, with proxy.conf.js instead of proxy.conf.json. Thanks @filipesilva!

package.json:

  "scripts": {
..
    "start": "start http://localhost:4200 && ng serve --proxy-config proxy.conf.js",
..

proxy.conf.js:

const Agent = require('agentkeepalive');

module.exports = {
        '/api': {
            target: 'http://localhost:10863',
            secure: false,
            agent: new Agent({
                maxSockets: 100,
                keepAlive: true,
                maxFreeSockets: 10,
                keepAliveMsecs: 100000,
                timeout: 6000000,
                keepAliveTimeout: 90000
            }),
            onProxyRes: proxyRes => {
                let key = 'www-authenticate';
                proxyRes.headers[key] = proxyRes.headers[key] &&
                    proxyRes.headers[key].split(',');
            }
        }
};
@filipesilva

This comment has been minimized.

Member

filipesilva commented Mar 27, 2017

Glad to hear it works! I don't see us adding a dedicated option for windows authentication though, imho this configuration item is enough.

@Alex-Torres

This comment has been minimized.

Alex-Torres commented Mar 27, 2017

Nice!!! @mcanic @filipesilva this is awesome! Thank you both for looking into this. I will update my blog post as soon as possible.

@Alex-Torres

This comment has been minimized.

Alex-Torres commented Mar 28, 2017

I updated the blog post. http://www.meekdeveloper.com/angular-cli-asp-net-core-windows-authentication. Thank you again to both @mcanic and @filipesilva for taking the time to look at this hack and finding a solid solution.

@filipesilva

This comment has been minimized.

Member

filipesilva commented May 3, 2017

Fixed via #4070.

Cheers for updating your blogpost @The-Meek-Developer !

@filipesilva filipesilva closed this May 3, 2017

@snerks

This comment has been minimized.

snerks commented Jun 13, 2017

I see the issue is closed.

If you guys are still watching:

a) Is the technique proposed by @The-Meek-Developer the "best practice" in production? (works well at dev-time)
b) Does this work if I use ng build, then move the build output (in the \dist folder) to the ASP.NET Core wwwroot folder (such that all files are being served from the the ASP.NET Core project)?

@LUCHENMANER

This comment has been minimized.

LUCHENMANER commented Feb 23, 2018

Hi all. This method works well when I had it running in my local machine. But when I run ng build --prod and place the files in IIS. The Web API calls fail saying Not found (404). Is there anyone know what should I do with IIS in order to get the proxy work ?
Or what is the correct way to deploy the angular CLI window authentication project into IIS ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment