问题
This is a follow up question to Angular App Hosting Azure Storage Container - Azure Authentication Callback and Routing fails.
Summary:
I want to host my Angular 8 app on an Azure Storage Account. To make the routing work I had to turn on the HashLocationStrategy. This strategy prefixes the routes with a hashtag like this: https://<projectname>.z6.web.core.windows.net/#/auth/login
The routing works now but the Azure OAuth2 process adds the access token information to the base url also by using a hashtag: <baseurl>/<callbackurl>#access_token=eyJ0eXAiOiJKV1Q....
Without using the HashLocationStrategy the route would be like this (callback route is /auth/callback):
https://<projectname>.z6.web.core.windows.net/auth/callback#access_token=eyJ0eXAiOiJKV1Q...
With HashLocationStrategy it should be like this:
https://<projectname>.z6.web.core.windows.net/#/auth/callback#access_token=eyJ0eXAiOiJKV1Q...
But what it does is this:
https://<projectname>.z6.web.core.windows.net/#access_token=eyJ0eXAiOiJKV1Q...
It just swallows the callback url part and adds the access_token part directly behind the base url. The redirect fails.
Is there a way to make Azure OAuth2 work with HashLocationStrategy?
回答1:
I've not investigated all the facets of your question nor have I needed to leverage HashLocationStrategy, but on S3 buckets we've specified the custom 404 page to point to the index.html file, similar to a suggestion in the Angular Deployment documentation for use in static GitHub Pages.
In Azure's Static website hosting in Azure Storage page, it indicates that a custom 404 page can be specified. You could try to specify the index.html file as well. This effectively "actives" the Angular router on non URL-rewritable hosting - at least this worked on S3 static site hosting.
回答2:
I'm afraid you're trying to put a square peg in a round hole!
You tried to use HashLocationStrategy because you can't redirect Angular routes to index.html when using Azure Storage as a web server.
However, you're using OAuth, which always provides the token in an URL fragment. This is to keep the access_token away from the app server, since the browser doesn't send it at all, after receiving it in the redirection from the identity provider.
I don't see any workaround to help you achieve what you're trying, I'm afraid you'll have to host the app on a "URL rewriting capable" web server.
回答3:
Use &response_mode=query instead of the default fragment.
https://docs.microsoft.com/en-us/azure/active-directory/azuread-dev/v1-protocols-openid-connect-code#send-the-sign-in-request
GET https://login.microsoftonline.com/{tenant}/oauth2/authorize?
client_id=6731de76-14a6-49ae-97bc-6eba6914391e
&response_type=id_token
&redirect_uri=https://<projectname>.z6.web.core.windows.net/auth/callback // escape this..
&response_mode=query
&scope=openid
&state=12345
&nonce=7362CAEA-9CA5-4B43-9BA3-34D7C303EBA7
Your response should now look like this:
https://<projectname>.z6.web.core.windows.net/auth/callback?access_token=eyJ0eXAiOiJKV1Q...
来源：https://stackoverflow.com/questions/60164661/azure-oauth2-fails-with-angular-hashlocationstrategy