I've started on a new project with ASP.NET Core and Angular from template version 7.2.3.
The Angular application will be deployed to a Azure Storage Static site according to https://docs.aspnetzero.com/documents/aspnet-core-angular/latest/Step-by-step-publish-to-azure-angular-staticsite. Therefore I had to enable hash location strategy to get it to work, by setting { useHash: true } in RouterModule.forRoot(routes). If that is the case you should add that to the documentation. If not, am I missing something here?
Azure AD B2C will be used for authentication so I've enabled openid in appsettings.json. The authentication to the AD B2C works but when I get redirected from the AD the URL is something like https://localhost:4200/account/login#state=.... Angular then tries to find a route matching state and gives an error "ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'state'". If I use path location strategy then it works locally but it will not work when deployed to Azure.
By setting authConfig.customQueryParams = { "response_mode": "query"} in getOpenIdConnectConfig then the redirect URL becomes https://localhost:4200/account/login?state=... which does not produce any routing error. However I just get redirected to the login page after signing in to Azure AD B2C. I guess I need to change let state = UrlHelper.getQueryParametersUsingHash().state; to let state = UrlHelper.getQueryParameters().state; eventually in login.component.ts but I never get there. I tried to follow this, but then nothing happens for the initial request. Please help me in the right direction here.
3 Answer(s)
-
0
Hi @ismcagdas
I finally found a solution to this that others might be interested in, maybe not the most elegant one, since there are some limitations in Azure AD B2C.
First of all I had to remove
<base href="/">from index.html when using hash location strategy otherwise I always got redirected to / initially. I'm not an Angular expert so maybe this is obvious or even incorrect. But if this makes any sense it could also be added to the documentation for #1.The next thing is more related to Azure AD B2C since it seems to be a limitation in there. For local development I want to set the redirect url to http://localhost:4200/#/acount/login but the # is not allowed by AD B2C. The workaround is to set it to a redirect page, for example http://localhost:4200/assets/loginredirect.html which contain something like this
<html> <head></head> <body> <script type="text/javascript"> if (location.hash.includes("id_token")) { location.href = location.origin + '#/account/login/' + location.hash; } </script> </body> </html>In login.service.ts I had to change the redirectUri of authConfig to
window.location.origin + '/assets/loginredirect.html';Now the redirected url will contain two # so I had to change the implementation in UrlHelper.getQueryParametersUsingHash toreturn document.location.hash.substr(document.location.hash.lastIndexOf('#') + 1, document.location.hash.length - 1).replace(/(^\?)/, '').split('&').map(function(n) { return n = n.split('='), this[n[0]] = n[1], this; }.bind({}))[0];So I never used the
authConfig.customQueryParams = { "response_mode": "query"}approach.Hopefully this can help others since I have struggled a lot with this.
Thank you
-
0
Thanks a lot @goransund
We will imrpove this functionality in AspNet Zero as well. Thanks again for sharing this :).
