C[omp]ute

From: andrew cooke <andrew@...>

Date: Mon, 17 Jan 2022 20:09:08 -0300

Solving this has taken a long time (months) going back + forth with
Microsoft support.  Since I was stuck because I couldn't find this
info on the web I thought I should put something out there.


This is not a general explanation of how to enable B2C authentication
between a SPA (Single Page Application - JavaScript in a web page) and
a Function App.  Instead, what I will focus on is converting the
project at
https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git to
work with a Function App that you have deployed.  If you can get that
working, you can carry everything across to your application.


So this is what you need to do:

1 - Clone
https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
and get it working as is.  Understand it.

2 - Deploy your application that uses a Function App (currently
without authentication), make sure it works, and note what the result
is if you call your Function App directly from a browser (in my case,
for example, I had a Function App that provided an access token to
Azure Maps - if I called it by hand, I got a token).

3 - Configure B2C.  There are three parts that need to be connected:

  3a - Define a User Flow.  Go to B2C in the Portal and select "User
  Flows" (left menu) then "New user flow" (top bar), "Sign up and sign
  in" (option box), "Recommended" (popup) and "Create" (button).
  Provide a name (eg "demoflow"), select "Email Signup" (checkbox) and
  "Create" (button).  Leave everything else as defaults.

  3b - Register the Function App.  Go to B2C in the Portal and select
  "App registrations" (left menu), "New registration" (top bar).
  Provide a name (eg "myfnapp"), set "Select a platform" as "Web" then
  select "Register".  Leave everything else as defaults.

  3c - Register the SPA.  Go to B2C in the Portal and select "App
  registrations" (left menu), "New registration" (top bar).  Provide a
  name (eg "msdemo"), set "Select a platform" as "SPA" with a redirect
  URI of "http://localhost:6420" then select "Register".  Leave
  everything else as defaults.

  3d - Connect things.  Go to B2C in the Portal and select "App
  registrations" (left menu), select "myfnapp", select "Expose an API"
  (left menu), select "Add a scope", save the default URI (popup on
  right), provide a name for the scope (eg "access") and provide some
  text for display (anything will do), then select "Add Scope"
  (button).

  Go to B2C in the Portal and select "App registrations" (left menu),
  select "msdemo", select "Add a permission", then "My APIs" (top
  menu), then "myfnapp", select "access" and then "Add permissions".
  In the "Configured permissions" page (displayed after the above),
  select "Grant admin consent" and "Yes".

4 - Enable authentication for the Function App.  Find the Function App
in the Portal, select "Authentication" (left menu), select "Add
identity provider", select "Microsoft", select "Pick an existing app
registration in this directory" and then select "myfnapp".  Choose
HTTP 401 for "Unauthenticated requests" and select "Add".

CORS also needs to be enabled for the Function App.  Select "CORS"
(left menu) and add "http://localhost:6420" then select "Save".

If you call your Function App from a browser now it will give an
error.

5 - Modify the MS demo.  All the above is standard, really; it's this
section that is critical.  The files that need altering are all in the
App directory and are all pure data structures (no code - the app is
nicely structured).

  5a - authConfig.js

  Change "clientID" to the "Application (client) ID" for the "msdemo"
  registration you defined above (it's displayed in the Portal in the
  App registration for that name).

  5b - policies.js

  Remove the "editProfile" entries because we're not using them.

  Change the "authorityDomain" to be "sts.windows.net" (more exactly,
  use the domain in the "Issuer URL" if you go to "Authentication" for
  the Function App and then select "Edit" for the provider).

  Change "fabrikamb2c" in "authentication" to match whatever you call
  your B2C.

  Change "B2C_1_susi_reset_v2" in the "authority" to be the user flow
  defined above ("B2C_1_demoflow")

  5c - apiConfig.js

  Change "b2cScopes" to be the default URI created for the "access"
  scope above (go to B2C, "App registrations", "myfnapp", "Expose an
  API" and copy the URI)

  Change "webApi" to be the URL of your Function App.

6 - Run the demo.

  > npm install
  > npm start

Open http://localhost:6420 and enable the dev console so you can see
network requests.  Sign-in and call the API.  In a perfect world, it
should work (should make successful calls; the web app itself won't do
much because the function being called is not what is expected).  You
should be able to see the expected return value from the API in the
network panel.

If you get an HTTP 401 error when calling the API then you may be able
to view the actual error from the MS auth system by doing the
following (this is deep magic, but it works):

Select the Function App in the Portal.  Select "New Support Request"
(left menu) (don't worry, we are not going to actually submit a
request).  Enter "authentication error" as "Summary", select
"Authentication and Authorization" as "Problem Type", select "Azure
App Service built-in authentication" as "Problem subtype".  Select
"Next:Solutions".  When something is displayed, scroll down and see if
there are any errors.

If you don't see any errors, wait a little and try again - it seems to
take 30min or so for the errors to propagate.


The critical step in all the above was learning how to see the errors.
From those I managed to infer setting the authorityDomain in 5b above.

Have fun,
Andrew