登录的MSAL和AD B2C问题

Question

I've invested some considerable time into trying to understand and properly use MSAL but I'm still struggling. I have numerous issues and I'm not really sure what to do/what I'm doing wrong.

Here's what I do have:

1) The Active-Directory-B2C-Javascript-Angular2.4-spa application downloaded from github.

2) I reconfigured it to use my B2C tenant I created

3) I can login via Facebook or create my own account (sometimes)

From here I'm struggling with two problems now: acquireTokenSilent - always fails, and ends up calling acquireTokenPopup (which appears to popup a window). So I'm not sure why acquireTokenSilent is failing, but when it calls acquireTokenPopup the popup gets blocked.

1) I'm thinking the acquireTokenSilent failure may be due to my "scope" i'm requesting. I've looked through the Azure documentation and don't understand how to create a scope so I'm kind of stuck there. Is there a default I can use? I tried an empty string and it failed. I also tried https://myapp.onmicrosoft.com/demoapi/demo.read which didn't make sense, but I tried it anyway (didn't make sense because I couldn't see it anywhere).

2) I thought maybe removing my popup blocker which is defaulted in every browser now could maybe cause acquireTokenPopup to work. INSTEAD: It still fails, BUT when I call loginPopup it opens the login window twice. Yes Twice. I debugged the code to ensure I wasn't calling loginPopup twice. I wasn't...

Can somebody explain why in an age of popup blockers a library would even attempt this code? Having somebody enable popups just to use your app seems incredibly archaic... Is there a way around this with this library?

Anyone have any advice?

Answer 1

As per the readme on the github repo, you can clone and run the application as is to demonstrate sign in with a sample web api that they provide ( https://aadb2cplayground.azurewebsites.net ). This web api has been secured by using an Azure AD tenant called "fabrikamb2c.onmicrosoft.com". You can see this by visiting the root url of that site:

In order for the sample to call web api actions on this site, you need to send it an OpenIDConnect Access Token (JWT) in the header of your request issued by an audience it trusts. The audience is denoted by the AppID that a new B2C Application receives when created using the B2C Azure blade interface. In addition, the access token needs to specify the policy used you used when authenticating against the tenant.

If you click "App Settings" on the playground site and then "Use the AAD B2C Playground example directory" you can see the same values that are preset in your github sample repo:

In your scenario, you are trying to use the SPA repo to call the sample webservices. Obviously the Playground site knows nothing about your repo so you need to supply the settings so that it knows how to validate your tokens against your tenant. I haven't tried it but I would guess that if you fill the App Settings inputs with the appropriate values with your own tenant the sample will work as the Playground sample now knows how to communicate with your tenant.

Obviously I wouldn't use any production tenant settings here!

When you want your SPA app to access your own WebAPI, you would need to secure both sides with your own tenant but each one can use it's own B2C application. If you authenticate your SPA application using a token which contains the AppID and scope of the WebAPI B2C application you will be granted access as the resulting token will use the audience value of the WebAPI.

1) I'm thinking the acquireTokenSilent failure may be due to my "scope" i'm requesting. I've looked through the Azure documentation and don't understand how to create a scope so I'm kind of stuck there. Is there a default I can use? I tried an empty string and it failed. I also tried https://myapp.onmicrosoft.com/demoapi/demo.read which didn't make sense, but I tried it anyway (didn't make sense because I couldn't see it anywhere).

For the scope, you need that to be " https://fabrikamb2c.onmicrosoft.com/demoapi/demo.read ". On the FabrikamB2C tenant there will be a B2C application with the AppID of " https://fabrikamb2c.onmicrosoft.com/demoapi " and a scope will be defined called "demo.read" which the Playground site looks for in your incoming token to ensure you have access to endpoints that require that scope defined in your token.

2) I thought maybe removing my popup blocker which is defaulted in every browser now could maybe cause acquireTokenPopup to work. INSTEAD: It still fails, BUT when I call loginPopup it opens the login window twice. Yes Twice. I debugged the code to ensure I wasn't calling loginPopup twice. I wasn't...

Can somebody explain why in an age of popup blockers a library would even attempt this code? Having somebody enable popups just to use your app seems incredibly archaic... Is there a way around this with this library?

Popups tend to be implemented when authenticating to avoid destroying the flow of the user's journey through the application. If the token expires and there is no valid refresh token to use, your application cannot gain access to another token therefore it has to ask the user to authenticate again. If the user is in the middle of an operation (eg saving data) it might be possible to recover outside of the action in a separate window rather than forcing a redirect on the user. However, I am not that familiar with the SPA implementation so other more knowledgeable people may have more valid input!