I'm trying to do a OAuth2 workflow defined by Lightspeed POS in the following link: https://developers.lightspeedhq.com/resto-api/introduction/authentication/

Essentially goes like this: step1: send Get request to https://test.lightspeedapis.com/resto/oauth2/v1/authorize?response_type=code&client_id=CLIENT_ID&state=authenticated&redirect_uri=https://localhost

step2: after entering credentials of box in browser and then click the "Allow" button, redirect to the specified redirect_uri with state=authenticated&code=AUTHORIZATION_CODE

step3: now with the AUTHORIZATION_CODE in the redirect url from step2, getting access_token can be done programmatically, by sending POST request to lightspeed token endpoint with AUTHORIZATION_CODE, client_id, client_secret in body and then parsing the returned json response.

I have a client app that I am integrating with lightspeed and they want to trigger the popup or iframe from their website, lets say : www.mysystem.com .

I cannot find a way to programmatically get that code from the response. I can call this page as a popup or iframe just fine, but I cannot then get that code from the response programatically.

The issue is that when trying to embed the lightspeed login page inside an iframe, it gives a cross-origin-policy error. When attempting to embed the authorization page inside an iframe in Web App, it gives an error pertaining to the Content Security Policy of the host website. When attempting to open a popup with the login page, the page will appear and the user may log in without any hiccups. However, it is impossible for webapp to query the url of said popup window, giving an error stating it blocked the site from accessing a cross-origin frame

What are possible solutions to this??