Skip to content

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

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

Closed
mcanic opened this issue Mar 24, 2017 · 12 comments
Closed
Labels
area: docs Related to the documentation effort1: easy (hours)

Comments

@mcanic
Copy link

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
Copy link
Contributor

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.

@filipesilva filipesilva added the area: docs Related to the documentation label Mar 24, 2017
@mcanic
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Author

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
Copy link
Contributor

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
Copy link

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
Copy link

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
Copy link
Contributor

Fixed via #4070.

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

@snerks
Copy link

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
Copy link

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 ?

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: docs Related to the documentation effort1: easy (hours)
Projects
None yet
Development

No branches or pull requests

5 participants