How to deploy an Angular 14 app integrated with AD B2C with authorization code flow PKCE in an App Service?

Luis Diego Cáceres García 61 Reputation points
2022-08-05T14:32:09.92+00:00

Hi,

I'm trying to deploy in an Azure App Service an Angular application that has integrated AD B2C with a user flow (signupsignin1) and with authorization code flow PKCE, this is what I did:

  1. For all the configuration of the B2C and the Angular app I used this link:
    configure-authentication-sample-angular-spa-app
    • I moved the code to Angular 14 and created a home component with the button sign-in.

The redirect URL: http://localhost:4200/home

It works properly.

-Configuration to deploy in App Service-

  1. App Service

Stack Node v16
SO: Windows

Created...

Then I copied the URL => https://name-app.azurewebsites.net

  1. Angular

a. I added the web.config and configure the angular.json

web.config:

<?xml version="1.0" encoding="utf-8"?>  
<configuration>  

<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>  
</configuration>

Angular.json

 "assets": [  
    "src/favicon.ico",  
    "src/assets",  
    "src/web.config"  
            ],

b. msalConfig I added the new redirect URL:

const msalConfig: Configuration = {  
  auth: {  
    clientId: <clientId>,  
    authority: b2cPolicies.authorities.signUpSignIn.authority,  
    knownAuthorities: [b2cPolicies.authorityDomain],  
    redirectUri: 'https://name-app.azurewebsites.net/home',  
  },  
  cache: {  
    cacheLocation: BrowserCacheLocation.LocalStorage,  
    storeAuthStateInCookie: isIE,  
  },  
  system: {  
    loggerOptions: {  
      loggerCallback(logLevel: LogLevel, message: string) {  
      },  
      logLevel: LogLevel.Verbose,  
      piiLoggingEnabled: false  
    }  
  }  
}
  1. Adding the new Redirect URIs in the app registration of the Angular:

Single-page application:

New URL: https://name-app.azurewebsites.net/home

  1. Build the Angular.

a. ng b

  1. Install in the VS the extension Azure App Service.
  2. Deploy the dist folder.
  3. In portal Azure go to the App service -> configuration -> Path mappings/Virtual applications and directories/Virtual path:
    Edit: site\wwwroot\name-project-angular
    Save.
  4. Start the app service.
  5. Go to URL.

Now here comes the problem, it loads the home page but when I click on sign-in throw these errors:

a. In page: The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

b. Console: GET https://name-app.azurewebsites.net/home, HTTP 404 'Not Found'.

c. https://test-deploy-angular.azurewebsites.net/favicon.ico, HTTP 404 'Not Found'

Warnings:

d. Cookie “ARRAffinity” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute.

e. This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.

  1. Is the redirect URL incorrect in msalconfig or in the registration app?

Is the web.config incorrect?

I don´t know what is wrong. And I searched information about this but I didn´t find anything related.

Regards,
Luis Cáceres.

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
6,832 questions
Microsoft Entra External ID
Microsoft Entra External ID
A modern identity solution for securing access to customer, citizen and partner-facing apps and services. It is the converged platform of Azure AD External Identities B2B and B2C. Replaces Azure Active Directory External Identities.
2,633 questions
Microsoft Entra ID
Microsoft Entra ID
A Microsoft Entra identity service that provides identity management and access control capabilities. Replaces Azure Active Directory.
19,380 questions
Accepted answer
  1. ajkuma 22,086 Reputation points Microsoft Employee
    2022-08-22T07:04:14.027+00:00

    To benefit the community, posting our offline discussions.

    Cause: Misconfiguration in the application's web.config file caused a bad redirect after "sign in".

    Resolution: Change the following line in the web.config file so that it redirects to “/index.html” and instead of “/”:

    <action type="Rewrite" url="/index.html" /> 

    <configuration>  
<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>  
</configuration>

    Thanks for your patience and cooperation! @Luis Diego Cáceres García . It's much appreciated!

    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest