In our project we've built an Azure Function which launches Puppeteer in headless mode, goes to our webpage and takes a screenshot of the page which is then emailed out as pdf report. Works locally and deployed to Azure. That was the POC though. Now, we're moving to production and introduced authentication (Azure AD B2C, single tenant), will run each http request via APIM etc.
What happens now:
- our Function app was registered in AD as a daemon and receives an access token.
- this access token is inserted into 'Bearer ' Authorization header in Puppeteer (page.setExtraHTTPHeaders)
- headless browser does not get authenticated and screenshot we receive is of the login screen (Azure SSO)
What needs to happen
- we need to convince the react-msal library our FrontEnd is using to authenticate users, that the headless browser should get authenticated and allowed to render the page
The solution I've come up with so far is to replicate msal-react's logic of saving session information into Puppeteer's session storage, so that when msal-react checks for persisted session it will find it and allow headless chromium in. I'm yet to implement it. I'm curious if anyone in the community has experience building something similar.
