flutter_azure_b2c

Description:

flutter azure b2c

flutter_azure_b2c #
A flutter library to handle the Azure B2C authentication protocol.
This library is based on native implementation of MSAL for each target platform
and aims to provide a common interface to easily manage Azure AD B2C authentication
process for flutter developer.
There is a common interface that permits to handle the authentication and authorization
process and it is entirely designed to work with the Azure B2C service. For each platform
is then implemented a B2CProvider that permits to adapt the common interface to the selected
device.
Aim of this library is NOT to replicate the entire MSAL library in flutter and never
will be. The entire capabilities of MSAL are not exposed. Furthermore, the library is
not designed to work with any OAuth2 or OpenID provider. It may work or may not but it
is not guaranteed.
Actual limitation:

Some platform still miss an implementation as there are out of our business scope
at the moment. All contributions are appreciated! ;)

Installation #
Add flutter_azure_b2c to your pubspec:
dependencies:
flutter_azure_b2c: any # or the latest version on Pub
copied to clipboard
Android #

Configure your app to use the INTERNET and ACCESS_NETWORK_STATE permission in the manifest file located in

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.INTERNET"/>
copied to clipboard

Add also an intent filter in the manifest file to capture redirect from MSAL service:

<!--Intent filter to capture System Browser or Authenticator calling back to our app after sign-in-->
<activity
android:name="com.microsoft.identity.client.BrowserTabActivity">
<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="<YOUR_PACKAGE_NAME>"
android:path="<YOUR_BASE64_URL_ENCODED_PACKAGE_SIGNATURE>" />
</intent-filter>
</activity>
copied to clipboard
For more information see https://github.com/AzureAD/microsoft-authentication-library-for-android.

Prepare a JSON configuration file (named auth_config.json in the example code) for AzureB2C initialization(AzureB2C.init("auth_config")) in

{
"client_id" : "<application (client) id>",
"redirect_uri" : "msauth://<YOUR_PACKAGE_NAME>/<YOUR_BASE64_URL_ENCODED_PACKAGE_SIGNATURE>",
"account_mode" : "<MULTIPLE|SINGLE>",
"broker_redirect_uri_registered": false,
"authorities": [
{
"type": "B2C",
"authority_url": "https://<youractivedirectoryname>.b2clogin.com/<youractivedirectoryname>.onmicrosoft.com/<sign_in_up_policy_name>/",
"default": true
},
{
"type": "B2C",
"authority_url": "https://<youractivedirectoryname>.b2clogin.com/<youractivedirectoryname>.onmicrosoft.com/<other_policy e.g. reset_pass>/"
}
],
"default_scopes": [
"https://<youractivedirectoryname>.onmicrosoft.com/<application (server) id>/<API name>"
]
}
copied to clipboard
See https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-android for information about how to configure your B2C application and generate <YOUR_BASE64_URL_ENCODED_PACKAGE_SIGNATURE>.

Your app might crash in release, if this is the case you need to add these two lines of code in your app's build.gradle file (thanks to users euphoria3k and emaborsa for providing this fix):

buildTypes {
release {
...
minifyEnabled false
shrinkResources false
}
}
copied to clipboard
IOS #

Prepare a JSON configuration file (named auth_config.json in the example code) for AzureB2C initialization(AzureB2C.init("auth_config")) in

{
"client_id" : "<application (client) id>",
"redirect_uri" : "msauth://<YOUR_PACKAGE_NAME>/<YOUR_BASE64_URL_ENCODED_PACKAGE_SIGNATURE>",
"account_mode" : "<MULTIPLE|SINGLE>",
"broker_redirect_uri_registered": false,
"authorities": [
{
"type": "B2C",
"authority_url": "https://<youractivedirectoryname>.b2clogin.com/<youractivedirectoryname>.onmicrosoft.com/<sign_in_up_policy_name>/",
"default": true
},
{
"type": "B2C",
"authority_url": "https://<youractivedirectoryname>.b2clogin.com/<youractivedirectoryname>.onmicrosoft.com/<other_policy e.g. reset_pass>/"
}
],
"default_scopes": [
"https://<youractivedirectoryname>.onmicrosoft.com/<application (server) id>/<API name>"
]
}
copied to clipboard
See https://github.com/AzureAD/microsoft-authentication-library-for-objc for information about how to configure your B2C application.
Web #

Add a CDN dependecy in your index.html file:

<script type="text/javascript" src="https://alcdn.msauth.net/browser/<MSAL_VERSION>/js/msal-browser.min.js"></script>
copied to clipboard
Web implementation depends from the package msal_js (for more information see https://pub.dev/packages/msal_js), depending on the version imported follow the package documentation in order to select the correct <MSAL_VERSION>.
For more information about MSAL web see https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser#usage.

Prepare a JSON configuration file (named auth_config.json in the example code) for AzureB2C initialization(AzureB2C.init("auth_config")) in

{
"client_id" : "<application (client) id>",
"redirect_uri" : "<your app domain>",
"cache_location": "<localStorage|sessionStorage>",
"interaction_mode": "<popup|redirect>",
"authorities": [
{
"type": "B2C",
"authority_url": "https://<youractivedirectoryname>.b2clogin.com/<youractivedirectoryname>.onmicrosoft.com/<sign_in_up_policy_name>/",
"default": true
},
{
"type": "B2C",
"authority_url": "https://<youractivedirectoryname>.b2clogin.com/<youractivedirectoryname>.onmicrosoft.com/<other_policy e.g. reset_pass>/"
}
],
"default_scopes": [
"https://<youractivedirectoryname>.onmicrosoft.com/<application (server) id>/<API name>"
]
}
copied to clipboard
Run the example #
In


Configure a B2C app following Microsoft documentation (see https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-overview).


Prepare a configuration file using previous templates to match the init (e.g. AzureB2C.init("auth_config")):

Android:

path: android/app/main/res/raw/


IOS:

path: ios/Resources/


Web:

path: web/assets/





launch the application:

Android:

flutter launch
choose an android emulator or device


IOS:

flutter launch
choose an ios emulator or device


Web:

flutter launch -d chrome --web-port
Note: choose port number according to the redirect uri registered in the B2C app.





In VS Code you can create a launch configuration like the one below:
{
"version": "0.2.0",
"configurations": [
{
"name": "touchscreen",
"request": "launch",
"type": "dart",
"args": ["--web-port", "<REDIRECT_PORT>"]
},
{
"name": "touchscreen (profile mode)",
"request": "launch",
"type": "dart",
"flutterMode": "profile",
"args": ["--web-port", "<REDIRECT_PORT>"]
},
{
"name": "touchscreen (release mode)",
"request": "launch",
"type": "dart",
"flutterMode": "release",
"args": ["--web-port", "<REDIRECT_PORT>"]
}
]
}
copied to clipboard