Azure B2C With Verifiable Credentials - QR Code Not Generated in SelfAsserted.html

[SB-o-matic]

Hello Team,

Following the Verifiable Credentials B2C Sample here https://github.com/Azure-Samples/active-directory-verifiable-credentials/blob/main/B2C/README.md

I have updated the selfasserted.html file with the path (in Azure Storage) of qrcode.min.js. But none of the following B2C policies render the QRCode when the user journey is run. This means a verifiable credential can neither be issued nor verified.

B2C_1A_SIGNINMFA_VC
B2C_1A_SIGNIN_VC
B2C_1A_SIGNUP_SIGNIN_VC
B2C_1A_VC_SUSIQ
B2C_1A_VC_SUSI_ISSUEVC
However, there are no issues loading the QR code when hitting the app endpoint directly via localhost or using ngrok. Only seems to happen when going via Azure B2C.

[SB-o-matic]

Please help.

[SB-o-matic]

I am not a front end person and that is why I am struggling here. But I have tracked down the problem I believe. I threw a couple of console.logs in the JavaScript for the selfasserted.html and discovered that the requestURL is incomplete. Specifically it is missing the requestID which has a dependency on the VCStateId element.
However, document.getElementById("VCStateId").value would return null wherever it is used as there is no element with id that is VCStateId. I am stuck here for now. Any help will be appreciated.

[cljung]

@SB-o-matic - I will investigate

[SB-o-matic]

Oh thank you so much!! Been stuck here for a bit and cannot move forward. Will keep checking to see what you find. Thanks again!!

[SB-o-matic]

This is still not working.

-I have had to make multiple updates to the ExtensionsVC policy to pass the VCStateId as an input claim.
-The metadata key that passes claims using claimsresolvers has also been missing in some places.
-Then I have had to add a header on the ngrok side to skip the warning page as this is interfering as the JavaScript is expecting a json and not html.
But still, the qrcode is not loaded when going via B2C. I am still able to hit the sample directly via ngrok and then the qrcode loads, making it possible to issue and verify VCs. But that is not how this is supposed to with since B2C is supposed to make the calls with the rest technical profile.

As at this time, this is not a working sample. Please assist.

[cljung]

@SB-o-matic - the QR code doesn't load because of a bug in selfAsserted.html. Change the line vcStateId.length == 0 to be vcStateId.length > 0 at the end of the file. Also, sample is refreshed and B2C policies are moved into the ASPNet core sample here. Custom html is no longer served from separate pages in storage but from the sample app itself

[SB-o-matic]

@cljung - that did not make a difference unfortunately. Earlier I was able to get the QR code to load by modifying the chaining of the promises related to the fetch in function callPresentationResponse(id). After the catch block .then(response => response.text()) is trying to access the response variable. But at this point, it is not the response from fetch but the undefined value or error caught by the previous catch block. This leaves response undefined and by extension respMsg. Did the same for the same for the getQRCode function. Now, I am able to scan the QR code during issuance and verification. However, even though I get the message "user validated successfully ", I still get the error "Verifiable Credentials not presented " from PresentationResponseB2C() in the ApiVerifierController. This is weird since the condition for generating this error is if a callback with the respective correlation id or state id could not be retrieved from cache. Any ideas?