Andrew Cooke | Contents | Latest | RSS | Previous | Next

C[omp]ute

Welcome to my blog, which was once a mailing list of the same name and is still generated by mail. Please reply via the "comment" links.

Always interested in offers/projects/new ideas. Eclectic experience in fields like: numerical computing; Python web; Java enterprise; functional languages; GPGPU; SQL databases; etc. Based in Santiago, Chile; telecommute worldwide. CV; email.

Personal Projects

Choochoo Training Diary

Last 100 entries

Felicitations - Empowerment Grant; [Bike] Fixing Spyre Brakes (That Need Constant Adjustment); [Computing, Music] Raspberry Pi Media (Audio) Streamer; [Computing] Amazing Hack To Embed DSL In Python; [Bike] Ruta Del Condor (El Alfalfal); [Bike] Estimating Power On Climbs; [Computing] Applying Azure B2C Authentication To Function Apps; [Bike] Gearing On The Back Of An Envelope; [Computing] Okular and Postscript in OpenSuse; There's a fix!; [Computing] Fail2Ban on OpenSuse Leap 15.3 (NFTables); [Cycling, Computing] Power Calculation and Brakes; [Hardware, Computing] Amazing Pockit Computer; Bullying; How I Am - 3 Years Post Accident, 8+ Years With MS; [USA Politics] In America's Uncivil War Republicans Are The Aggressors; [Programming] Selenium and Python; Better Walking Data; [Bike] How Fast Before Walking More Efficient Than Cycling?; [COVID] Coronavirus And Cycling; [Programming] Docker on OpenSuse; Cadence v Speed; [Bike] Gearing For Real Cyclists; [Programming] React plotting - visx; [Programming] React Leaflet; AliExpress Independent Sellers; Applebaum - Twilight of Democracy; [Politics] Back + US Elections; [Programming,Exercise] Simple Timer Script; [News] 2019: The year revolt went global; [Politics] The world's most-surveilled cities; [Bike] Hope Freehub; [Restaurant] Mama Chau's (Chinese, Providencia); [Politics] Brexit Podcast; [Diary] Pneumonia; [Politics] Britain's Reichstag Fire moment; install cairo; [Programming] GCC Sanitizer Flags; [GPU, Programming] Per-Thread Program Counters; My Bike Accident - Looking Back One Year; [Python] Geographic heights are incredibly easy!; [Cooking] Cookie Recipe; Efficient, Simple, Directed Maximisation of Noisy Function; And for argparse; Bash Completion in Python; [Computing] Configuring Github Jekyll Locally; [Maths, Link] The Napkin Project; You can Masquerade in Firewalld; [Bike] Servicing Budget (Spring) Forks; [Crypto] CIA Internet Comms Failure; [Python] Cute Rate Limiting API; [Causality] Judea Pearl Lecture; [Security, Computing] Chinese Hardware Hack Of Supermicro Boards; SQLAlchemy Joined Table Inheritance and Delete Cascade; [Translation] The Club; [Computing] Super Potato Bruh; [Computing] Extending Jupyter; Further HRM Details; [Computing, Bike] Activities in ch2; [Books, Link] Modern Japanese Lit; What ended up there; [Link, Book] Logic Book; Update - Garmin Express / Connect; Garmin Forerunner 35 v 230; [Link, Politics, Internet] Government Trolls; [Link, Politics] Why identity politics benefits the right more than the left; SSH Forwarding; A Specification For Repeating Events; A Fight for the Soul of Science; [Science, Book, Link] Lost In Math; OpenSuse Leap 15 Network Fixes; Update; [Book] Galileo's Middle Finger; [Bike] Chinese Carbon Rims; [Bike] Servicing Shimano XT Front Hub HB-M8010; [Bike] Aliexpress Cycling Tops; [Computing] Change to ssh handling of multiple identities?; [Bike] Endura Hummvee Lite II; [Computing] Marble Based Logic; [Link, Politics] Sanity Check For Nuclear Launch; [Link, Science] Entropy and Life; [Link, Bike] Cheap Cycling Jerseys; [Link, Music] Music To Steal 2017; [Link, Future] Simulated Brain Drives Robot; [Link, Computing] Learned Index Structures; Solo Air Equalization; Update: Higher Pressures; Psychology; [Bike] Exercise And Fuel; Continental Race King 2.2; Removing Lowers; Mnesiacs; [Maths, Link] Dividing By Zero; [Book, Review] Ray Monk - Ludwig Wittgenstein: The Duty Of Genius; [Link, Bike, Computing] Evolving Lacing Patterns; [Jam] Strawberry and Orange Jam; [Chile, Privacy] Biometric Check During Mail Delivery; [Link, Chile, Spanish] Article on the Chilean Drought; [Bike] Extended Gear Ratios, Shimano XT M8000 (24/36 Chainring); [Link, Politics, USA] The Future Of American Democracy; Mass Hysteria

© 2006-2017 Andrew Cooke (site) / post authors (content).

[Computing] Applying Azure B2C Authentication To Function Apps

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

Comment on this post