I'm trying to get Authorization Code flow going with an Angular app.
So far, I've got the app successfully authenticating, and I get an Id token back, even have an API connector running with my web app to add some custom claims, all working. But that's all returning the id token directly.
Now I'm trying to get auth code flow working. I do the following:
- In my angular app, I set the 'response_type=code'
- In the B2C app registration, I uncheck 'Access tokens' and 'ID token' But it still returns the ID token from the 'authorize' call. What else do I need to do?
One other point of confusion for me is in the app registration section it says:
Your Redirect URI is eligible for the Authorization Code Flow with PKCE.
What does that mean? Why does it say 'eligible'?
I'm trying to get Authorization Code flow going with an Angular app.
So far, I've got the app successfully authenticating, and I get an Id token back, even have an API connector running with my web app to add some custom claims, all working. But that's all returning the id token directly.
Now I'm trying to get auth code flow working. I do the following:
- In my angular app, I set the 'response_type=code'
- In the B2C app registration, I uncheck 'Access tokens' and 'ID token' But it still returns the ID token from the 'authorize' call. What else do I need to do?
One other point of confusion for me is in the app registration section it says:
Your Redirect URI is eligible for the Authorization Code Flow with PKCE.
What does that mean? Why does it say 'eligible'?
Share Improve this question edited 2 days ago jonrsharpe 122k30 gold badges267 silver badges474 bronze badges asked 2 days ago buzzripperbuzzripper 4991 gold badge5 silver badges16 bronze badges 1- What is the scope you are passing to generate tokens? And what parameteres are you using? – Rukmini Commented yesterday
1 Answer
Reset to default 0Note that: When you configure redirect URI under Single-page application it means that the redirect URI is appropriate for scenarios where PKCE will be implemented.
- PKCE (Proof Key for Code Exchange) is a security extension for OAuth 2.0 and OpenID Connect that prevents attackers from intercepting the authorization code during the flow and exchanging it for tokens.
As you have configured redirect URI as SPA, you can make use of Authorization Code Flow with PKCE like below:
I created an Azure AD B2C application and configured redirect URL as SPA:
Generated auth-code by passing below parameters:
https://rukk33.b2clogin/rukk33.onmicrosoft/oauth2/v2.0/authorize?p=B2C_1_testruk
&client_id=ClientID
&nonce=defaultNonce
&redirect_uri=RedirectURL
&scope=https://rukk33.onmicrosoft/xxx/access_as_user
&response_type=code
&code_challenge_method=S256
&code_challenge=CodeChallenge
After sign-in the auth-code got generated:
I used this PKCE Code Generator tool to generate Code-Verifier and Code-Challenge.
Now for sample, I generated tokens by passing the above auth-code:
https://rukk33.b2clogin/rukk33.onmicrosoft/oauth2/v2.0/token?p=B2C_1_testruk
client_id: ClientID
grant_type: authorization_code
code: codeFromURL
redirect_uri: RedirectURL
code_verifier: xxx
scope: https://rukk33.onmicrosoft/xxx/access_as_user openid offline_access
Also pass Headers as Origin:RedirectURL
:
The tokens generated successfully. To do the same in Angular refer this blog by Yuri Burger.
To perform Authorization Code Flow (without PKCE), refer this SO Thread by me.