Azure B2C

[fredbjork]

Description

I'm trying to use this plugin with Azure B2C in my Angular project, but haven't been able to make it work.

If anyone here has done this already, some help would be much appreciated.

I get sent to the Azure Policy where I can sign in, but on redirect I get 2 types of errors:

1. If I set responseType: "code token":
   ERR_GENERAL: See client logs. It might be CORS. Status text:
   "Access to XMLHttpRequest at 'https://{tenant}b2c.b2clogin.com/{tenant}b2c.onmicrosoft.com/oauth2/v2.0/token' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

2. If I set responseType: "token":
   "OAuth rejected Error: ERR_NO_AUTHORIZATION_CODE"

Capacitor version:

@capacitor/cli 2.0.1
@capacitor/ios 2.0.1
@capacitor/core 2.0.1

Library version:

• 2.0.0

OAuth Provider:

• Azure AD
• Azure App Registration

Your Plugin Configuration

{
    appId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    authorizationBaseUrl: "https://{tenant}b2c.b2clogin.com/{tenant}b2c.onmicrosoft.com/oauth2/v2.0/authorize",
    accessTokenEndpoint: "https://{tenant}b2c.b2clogin.com/{tenant}b2c.onmicrosoft.com/oauth2/v2.0/token",    
//"https://{tenant}b2c.b2clogin.com/{tenant}b2c.onmicrosoft.com/B2C_1_SignUpAndSignIn/oauth2/v2.0/{authorize/token}",
    scope: "openid https://{tenant}b2c.onmicrosoft.com/capacitor-api/demo.read",
    responseType: "code token",
    web: {
        redirectUrl: "http://localhost:8100/auth",
    },
    ios: {
        responseType: "code token",
        redirectUrl: "msalxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx://auth"
    },
    additionalParameters: {
      p: "B2C_1_B2C_1_SignUpAndSignIn",
      response_mode: "query"
    }
}

Thanks!

[NishaBhat]

Hi,
We have a B2B app and this is the config we used to connect to Microsoft AD
{
authorizationBaseUrl:
"https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
accessTokenEndpoint: "http://localhost:8100/",
scope:
"User.ReadBasic.All Calendars.Read Calendars.ReadWrite Contacts.Read",
resourceUrl: "http://localhost:8100/",
web: {
appId: "",
responseType: "token",
accessTokenEndpoint: "", // clear the tokenEndpoint as we know that implicit flow gets the accessToken from the authorizationRequest
redirectUrl: "http://localhost:8100/",
windowOptions: "height=600,left=0,top=0",
},
android: {
appId: "",
responseType: "code", // if you configured a android app in google dev console the value must be "code"
redirectUrl:
"", // package name from google dev console
},
ios: {
appId: "",
responseType: "code", // if you configured a ios app in google dev console the value must be "code"
redirectUrl: "com.companyname.appname:/", // Bundle ID from google dev console
},
};

[fredbjork]

Thanks, it works on the web when I clear the accessTokenEndpoint.

I now have the following config:

appId: "xxxxxx-xxxx-xxxxx-xxx-xxxxxxxx",
authorizationBaseUrl: "https://tenant.b2clogin.com/tfp/tenantb2c.onmicrosoft.com/B2C_1_SignUpAndSignIn/oauth2/v2.0/authorize",
accessTokenEndpoint: "",
scope: "openid offline_access https://tenantb2c.onmicrosoft.com/capacitor-api/demo.read",
responseType: "token",
web: {
        redirectUrl: "http://localhost:8100/auth",
},
android: {
        redirectUrl: "msalxxxxxxx-xxxxx-xxx-xxxx-xxxxxxxx://auth"   
},
ios: {
        redirectUrl: "msauth.com.xxxxx://auth",
        resourceUrl: "https://graph.microsoft.com/"
}

I now get the following errors when redirected back to the apps:

Android:
D/Capacitor: Sending plugin error: {"save":false,"callbackId":"53281380","pluginId":"OAuth2Client","methodName":"authenticate","success":false,"error":{"message":"ERR_ANDROID_NO_INTENT"}}
D/Capacitor: App restarted
D/Capacitor: App started
V/Capacitor/Plugin/App: Notifying listeners for event appUrlOpen
D/Capacitor/Plugin/App: No listeners found for event appUrlOpen
D/Capacitor/Plugin/App: Firing change: true
V/Capacitor/Plugin/App: Notifying listeners for event appStateChange
D/Capacitor/Plugin/App: No listeners found for event appStateChange
D/Capacitor: App resumed
D/EGL_emulation: eglMakeCurrent: 0xe5646560: ver 3 0 (tinfo 0xc618b9d0)
D/eglCodecCommon: setVertexArrayObject: set vao to 1 (1) 0 4
D/eglCodecCommon: setVertexArrayObject: set vao to 0 (0) 9 8
E/Capacitor/Console: File: http://localhost/main-es2015.js - Line 1029 - Msg: OAuth rejected
V/Capacitor/Plugin/Network: Notifying listeners for event networkStatusChange
D/Capacitor/Plugin/Network: No listeners found for event networkStatusChange

iOS:
@byteowls/capacitor-oauth2: Invalid json in resource response The data couldn’t be read because it isn’t in the correct format..
ERROR MESSAGE: {"errorMessage":"","message":"ERR_GENERAL"}
⚡️ [error] - OAuth rejected {"errorMessage":"","message":"ERR_GENERAL","line":224,"column":23,"sourceURL":"user-script:2"}

In string.xml:
<string name="custom_url_scheme">msalxxxx-xxxxx-xxxx-xxx-xxxxxxx</string>
AppManifest:
<data android:scheme="@string/custom_url_scheme" android:host="auth">

info.plist:
<string>msauth.com.xxxxxxx</string>

Does anyone have any idea what I should change?

[NishaBhat]

A colleague of mine got IOS working. I haven't got Android working yet but try this config for IOS
ios: {
redirectUrl: "msauth.com.xxxxx://auth",
resourceUrl: "https://graph.microsoft.com/"
pkceEnabled: true,
responseType: "code",
accessTokenEndpoint:
"https://login.microsoftonline.com/xxx/oauth2/v2.0/token",
}
PKCE is used for encryption and is ideally needed both for web and native apps. We don't have resourceUrl though and it worked. There was also I change for xcode plist, I will find out and keep yu posted.
Let me know if you make any progress with android

[fredbjork]

It worked on ios with your config, thanks.

Still the same error on Android. I'll let you know if I figure it out.

[moberwasserlechner]

1. Maybe try those Android specific options, they were introduced because of Android: App crashes if Intent data is null #52 and Android crash with NullPointerException #55.

{
   ...
   android: {
      handleResultOnNewIntent = false
      handleResultOnActivityResult = true
   }
}

You have to play with those options. I could not reproduce the issue myself but added these params so developers have some options to work around it.

2. See Android setup: https://github.com/moberwasserlechner/capacitor-oauth2#platform-android

3. Which Android versions and devices did you use for testing?

[fredbjork]

I made it work on Android as well. I created a new Custom redirect URI on my b2c app with the following structure: "com.tenant.app://oauth/auth".

Then added "handleResultOnNewIntent: true" in the config.

[NishaBhat]

Thanks, I have used pixel 2 Android version 9 & 10 for testing
In AndroidManifest.xml, if I have

<intent-filter  >
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="msauth"
                    android:host="com.xxx" />
</intent-filter>

The control gets redirected to my app but Plugins.OAuth2Client.authenticate(this.oauth2Options) callback is not hit. If I use
<data android:scheme="oauth" android:host="com.xxx" />
the control does not come back to my app

oauth2Options: OAuth2AuthenticateOptions = {
    appId: "xxx",
    authorizationBaseUrl:
      "https://login.microsoftonline.com/xxx/oauth2/v2.0/authorize",
    responseType: "code",
    redirectUrl: "http://localhost:8100",
    scope:
      "openid User.ReadBasic.All Calendars.Read Calendars.ReadWrite Contacts.Read",
    accessTokenEndpoint:
      "https://login.microsoftonline.com/xxx/oauth2/v2.0/token",
    logoutUrl: "https://login.microsoftonline.com/common/oauth2/v2.0/logout",
    pkceEnabled: true,
    web: {
      redirectUrl: "http://localhost:8100",
      accessTokenEndpoint: "",
      responseType: "token",
    },
    android: {
      responseType: "token",
      redirectUrl:
        "msauth://xxx",
      resourceUrl: "https://graph.microsoft.com/",
      handleResultOnNewIntent: true,
      handleResultOnActivityResult: false,
    },
    ios: {
      redirectUrl: "xxx",
    },
  };

is my configuration

[fredbjork]

Try switching your scheme and host.

<data android:scheme="com.xxx" android:host="oauth" />

[moberwasserlechner]

Thanks for helping each other. I guess this task is now ready to be closed?

If you could be so nice to post a full config for Azure B2C I'll add it as a example to the readme for others having the same provider.

[tekagesolutions]

Almost ready to be closed...so I've followed the steps outlined by these amazing developers in this thread and I finally get the popup, signup/signin and all is wonderful....until.....I either finish signing up or finish signing in and I'm getting the following in my console:
OAuth rejected Error: ERR_NO_ACCESS_TOKEN

It never appears to hit the "then" which I have starting with a log:
).then(response => { console.log("AccessToken: " + response["access_token"]); console.log("RefreshToken: " + response["refresh_token"]); let accessToken = response["access_token"]; this.refreshToken = response["refresh_token"];

but goes right to the catch. What am I missing? Here's my config:
{ authorizationBaseUrl: "https://{{tenant}}.b2clogin.com/{{tenant}}.onmicrosoft.com/B2C_1_csa_signupsignin/oauth2/v2.0/authorize", accessTokenEndpoint: "http://localhost:8100/", scope: "openid offline_access", resourceUrl: "http://localhost:8100/", web: { appId: "{{appId}}", responseType: "token", accessTokenEndpoint: "", // clear the tokenEndpoint as we know that implicit flow gets the accessToken from the authorizationRequest redirectUrl: "http://localhost:8100/home", windowOptions: "height=600,left=0,top=0", }

[fredbjork]

Make sure your Azure App Config is setup correctly with allowImplicitFlow: true and Grant admin consent for your permissions.

Here's my config for B2C:

    appId: "xxxxxxxxx",
    authorizationBaseUrl: "https://tenantb2c.b2clogin.com/tfp/tenantb2c.onmicrosoft.com/B2C_1_SignUpAndSignIn/oauth2/v2.0/authorize",
    accessTokenEndpoint: "",
    scope: "openid offline_access https://tenantb2c.onmicrosoft.com/capacitor-api/demo.read",
    responseType: "token",
    web: {
        redirectUrl: "http://localhost:8100/auth"
    },
    android: {
        pkceEnabled: true,
        responseType: "code",
        redirectUrl: "com.tenant.app://oauth/auth",
        accessTokenEndpoint: "https://tenantb2c.b2clogin.com/tfp/tenantb2c.onmicrosoft.com/B2C_1_SignUpAndSignIn/oauth2/v2.0/token",
        handleResultOnNewIntent: true,
        handleResultOnActivityResult: true
    },
    ios: {
        pkceEnabled: true,
        responseType: "code",
        redirectUrl: "msauth.com.tenant://oauth",
        accessTokenEndpoint: "https://tenantb2c.b2clogin.com/tfp/tenantb2c.onmicrosoft.com/B2C_1_SignUpAndSignIn/oauth2/v2.0/token",
    }

[tekagesolutions]

@fredbjork - Thanks for replying. It looks as though I have the allow implicit flow set, but unsure about the Grant Admin consent would be located on the Azure ADB2C blade. I'm assuming that is what's tied to the last scope item you have on your reply?

[fredbjork]

Yes, go to App Reg. (preview) > YourApp > API permissions > Add your permissions and "Grant...".