6

I developed an Angular 8 App with NgxAdmin and hosted it as Azure Web App. It uses Azure AD Oauth2 Authentication with the help of NbAuthModule. Everything works fine. Now I tried to host the same SPA on an Azure Storage Account. I added the new callback url to the Azure Ad App Registration and updated the redirectUri in the NbOAuth2AuthStrategy.setup-method.

When I call the base url of the static app (https://<projectname>.z6.web.core.windows.net), it correctly redirects to https://<projectname>.z6.web.core.windows.net/auth/login?return=%2Fpages%2Fdashboard. I can login via Azure Ad. Then the url changes to https://<projectname>.z6.web.core.windows.net/auth/callback#access_token=eyJ0eXAiOiJKV1Q... and there should be a redirect to the previously defined return-url /pages/dashboard. But all I get is a 404 on the callback link.

Additionally, if I try to call e.g. https://<projectname>.z6.web.core.windows.net/auth/login directly, it returns a 404 (if I do the same with the web app, the login component is displayed).

What am I doing wrong? Are there additional changes to made in my Angular code to make the routing run in Azure Storage Account?

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
MatterOfFact
  • 1,253
  • 2
  • 18
  • 49

2 Answers2

3

It looks like you're not using the HashLocationStrategy, so the 404 is likely because the webserver doesn't have any folder/files in auth/callback. You have two options:

  1. Configure your webserver to redirect to {root}/index.html when it gets a sub route like auth/callback
  2. Use the HashLocationStrategy, which will prefix your routes with #, for example:

https://<projectname>.z6.web.core.windows.net/#/auth/callback?access_token=eyJ0eXAiOiJKV1Q

https://<projectname>.z6.web.core.windows.net/#/auth/login?return=/#/pages/dashboard

Here's how you can enable hash location strategy:

@NgModule({   
    imports: [
      /* more imports here */
      RouterModule.forRoot(routes, { useHash: true })
    ],   
    declarations: [
       /* components here */ 
    ],
    providers: [   
       /* services here */ 
    ],
    bootstrap: [ AppComponent ]
 }) 
 export class AppModule { }
spots
  • 2,483
  • 5
  • 23
  • 38
  • I'm not all too familiar myself with making re-write modules to redirect properly, but I found another question that may help you. https://stackoverflow.com/questions/38209656/get-angular2-routing-working-on-iis-7-5 – spots Jan 31 '20 at 17:12
  • Thank you for your anser! Please have a look at my comments to Nimezzz's answer – MatterOfFact Feb 05 '20 at 08:59
  • Sorry, the URL I originally provided in the HashLocationStrategy example was wrong, I've edited it to correct the problem. There should be a "?" to denote that "access_token" is a query string param. Based on your comments on the other question, that's why the url didn't work. – spots Feb 05 '20 at 15:36
  • Also, if you're using the HashLocationStrategy, you shouldn't need to implement a re-write module. – spots Feb 05 '20 at 15:38
  • Unfortunately, if I add a question mark at the end of the redirectUri in my app.module, I also have to add it in the azure ad app config as redirect uri. But I cannot save the uri with the ? in azure ad, it complains that it is not a valid url. – MatterOfFact Feb 05 '20 at 15:54
  • The URL I posted is a valid url, I suspect what you've configured does not match what I've written. I've updated the answer with more example URLs that demonstrate the proper routing. – spots Feb 05 '20 at 17:18
  • Yes, the whole thing is valid, but what I have to configure as redirect uri in azure is `https://.z6.web.core.windows.net/#/auth/callback?`, because `access_token=ey...` will be added automatically by the OAuth2 process. And this is assessed as not valid by azure. I'd like to add a screenshot to prove it, but I think it is not possible in a comment? – MatterOfFact Feb 06 '20 at 07:04
  • I marked your answer as the most helpful answer, because it solved the routing problem. Nonetheless the consecutive fault is not yet solved :-( – MatterOfFact Feb 07 '20 at 06:26
  • I created a follow up question for the access_token issue: https://stackoverflow.com/questions/60164661/azure-oauth2-fails-with-angular-hashlocationstrategy – MatterOfFact Feb 11 '20 at 08:29
0

You need to rewrite URLs in order use routes when you deploy an angular apps to a server. I'm assuming you are using an iis server and add following to web.config

<system.webServer>
 <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Source

Or you can add Hash Location strategy, which results a # before route start (ex: https://sample.com/#/login)

In app.module.ts

import {LocationStrategy, HashLocationStrategy} from '@angular/common';

After import add following line to providers.

{provide: LocationStrategy, useClass: HashLocationStrategy}

ex:

providers: [AuthService, 
            AuthGuard, 
            FlxUiDataTable,
            {provide: LocationStrategy, useClass: HashLocationStrategy}]

Source

Hope this helped. Thanks

Nimezzz
  • 1,814
  • 14
  • 15
  • Thank you for your answer. No, I do not use iis - I deploy the angular app as static website to an azure storage account. I added the hash location strategy as suggested, but it still does not work :-( – MatterOfFact Feb 05 '20 at 07:37
  • Ok I'm a step forward now. I made some additional changes: – MatterOfFact Feb 05 '20 at 08:45
  • 1. Changed the redirect url in my app.module to redirectUri: `${environment.frontend.baseUrl}/#/auth/callback` 2. Changed the callback uri in the app registration in azure active directory to `https://.z6.web.core.windows.net/#/auth/callback` 3. Added `useHash: true`config to the RouterModule import. No I'm not getting the 404 anymore. But instead there is a different error: – MatterOfFact Feb 05 '20 at 08:51
  • `https://.z6.web.core.windows.net/auth/callback#access_token=eyJ0eXAiOiJKV1Q...`has changed to `https://.z6.web.core.windows.net/#access_token=eyJ0eXAiOiJKV1Q...`. Should be: `https://.z6.web.core.windows.net/#/auth/callback#access_token=eyJ0eXAiOiJKV1Q...` Seems like there's some confusion about the two hashtags in the url. How can I fix this? – MatterOfFact Feb 05 '20 at 08:52
  • Change "callback#access_token" to "callback?access_token" - I've corrected my answer to clarify. – spots Feb 05 '20 at 15:38
  • you are passing access token as a parameter right? Refer this answer here. https://stackoverflow.com/a/46400432/9206203 @spot 's comment should solve your hash with parameters issue. – Nimezzz Feb 05 '20 at 15:50
  • No, the access token is passed by AZURE in the format `#access_token=`. To add the suggested code to the app.component did not lead to any improvements :-( – MatterOfFact Feb 06 '20 at 08:51