Flutter Azure B2C认证插件flutter_azure_b2c的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter Azure B2C认证插件flutter_azure_b2c的使用

简介

flutter_azure_b2c 是一个用于处理 Azure B2C 认证协议的 Flutter 库。该库基于每个目标平台的 MSAL（Microsoft Authentication Library）原生实现，并提供了一个通用接口，使 Flutter 开发者能够轻松管理 Azure AD B2C 认证过程。

该库旨在与 Azure B2C 服务配合使用，为每个平台实现了 B2CProvider，以适应所选设备。请注意，该库并不打算复制整个 MSAL 库的功能，也不支持所有 OAuth2 或 OpenID 提供商。

安装

添加依赖

在 pubspec.yaml 文件中添加 flutter_azure_b2c 依赖：

dependencies:
  flutter_azure_b2c: any # 或者使用最新版本
Android 配置

  1. 权限配置：在 AndroidManifest.xml 中添加以下权限：

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

  2. Intent Filter：在 AndroidManifest.xml 中添加以下 Intent Filter 以捕获 MSAL 服务的重定向：

    <!-- 捕获系统浏览器或 Authenticator 在登录后回调到我们的应用 -->
<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>

  3. JSON 配置文件：准备一个 JSON 配置文件（例如 auth_config.json），用于初始化 AzureB2C：

    {
    "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>"
    ]
}

  4. 发布模式修复：如果你的应用在发布模式下崩溃，请在 build.gradle 文件中添加以下代码：

    buildTypes {
    release {
        ...
        minifyEnabled false
        shrinkResources false
    }
}
iOS 配置

  1. JSON 配置文件：准备一个 JSON 配置文件（例如 auth_config.json），用于初始化 AzureB2C：

    {
    "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>"
    ]
}
Web 配置

  1. CDN 依赖：在 index.html 文件中添加 MSAL 的 CDN 依赖：

    <script type="text/javascript" src="https://alcdn.msauth.net/browser/<MSAL_VERSION>/js/msal-browser.min.js"></script>

  2. JSON 配置文件：准备一个 JSON 配置文件（例如 auth_config.json），用于初始化 AzureB2C：

    {
    "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>"
    ]
}

运行示例

  1. 配置 B2C 应用：按照 Microsoft 文档配置 B2C 应用。

  2. 准备配置文件：使用上述模板创建 auth_config.json 文件，并将其放置在相应路径：

    • Android: android/app/main/res/raw/
    • iOS: ios/Resources/
    • Web: web/assets/

  3. 启动应用：

    • Android:
      flutter run
      选择一个 Android 模拟器或设备。
    • iOS:
      flutter run
      选择一个 iOS 模拟器或设备。
    • Web:
      flutter run -d chrome --web-port <REDIRECT_PORT>
      注意：选择的端口号应与 B2C 应用中注册的重定向 URI 一致。

  4. VS Code 启动配置：你可以在 VS Code 中创建一个启动配置，例如：

    {
    "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>"]
        }
    ]
}

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_azure_b2c 插件进行 Azure B2C 认证：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_azure_b2c/flutter_azure_b2c.dart';
import 'package:flutter_azure_b2c/B2COperationResult.dart';
import 'package:flutter_azure_b2c/B2CConfiguration.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _retdata = "";
  List<String>? _subjects;
  B2CConfiguration? _configuration;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 注册回调以处理异步调用的返回值
    AzureB2C.registerCallback(B2COperationSource.INIT, (result) async {
      if (result.reason == B2COperationState.SUCCESS) {
        _configuration = await AzureB2C.getConfiguration();
      }
    });

    // 处理重定向状态（如果支持 Web 平台的重定向方法）
    // 并在 MaterialApp 启动之前初始化 AzureB2C 插件
    AzureB2C.handleRedirectFuture().then((_) => AzureB2C.init("auth_config"));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Azure AD B2C Plugin example app'),
        ),
        body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                children: [
                  TextButton(
                    onPressed: () async {
                      // 触发交互式策略（例如登录）
                      var data = await AzureB2C.policyTriggerInteractive(
                          _configuration!.defaultAuthority.policyName,
                          _configuration!.defaultScopes!,
                          null);
                      setState(() {
                        _retdata = data;
                      });
                    },
                    child: Text("LogIn"),
                  ),
                  TextButton(
                    onPressed: () async {
                      // 获取用户信息
                      var subjects = await AzureB2C.getSubjects();
                      var info = await AzureB2C.getUserInfo(subjects![0]);
                      setState(() {
                        _subjects = subjects;
                        _retdata = json.encode(info);
                      });
                    },
                    child: Text("UserInfo"),
                  ),
                ],
              ),
              Row(
                children: [
                  TextButton(
                    onPressed: () async {
                      // 获取访问令牌
                      var token = await AzureB2C.getAccessToken(_subjects![0]);
                      setState(() {
                        _retdata = json.encode(token);
                      });
                    },
                    child: Text("AccessToken"),
                  ),
                  TextButton(
                    onPressed: () async {
                      // 刷新令牌
                      var data = await AzureB2C.policyTriggerSilently(
                        _subjects![0],
                        _configuration!.defaultAuthority.policyName,
                        _configuration!.defaultScopes!,
                      );
                      setState(() {
                        _retdata = data;
                      });
                    },
                    child: Text("Refresh"),
                  ),
                  TextButton(
                    onPressed: () async {
                      // 登出
                      var data = await AzureB2C.signOut(_subjects![0]);
                      setState(() {
                        _retdata = data;
                      });
                    },
                    child: Text("LogOut"),
                  ),
                ],
              ),
              Text(_retdata)
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter Azure B2C认证插件flutter_azure_b2c的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter Azure B2C认证插件flutter_azure_b2c的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于flutter_azure_b2c插件的使用，下面是一个基本的代码示例，展示如何在Flutter应用中集成Azure B2C认证。请注意，实际使用中你可能需要根据具体需求调整代码，并确保正确配置Azure B2C。

首先，确保你的Flutter项目中已经添加了flutter_azure_b2c依赖。在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_azure_b2c: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来，在Flutter应用中配置和使用Azure B2C认证。以下是一个简单的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_azure_b2c/flutter_azure_b2c.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Azure B2C Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FlutterAzureB2C _azureB2C = FlutterAzureB2C(
    tenant: 'your-tenant-id', // 替换为你的Azure B2C租户ID
    clientId: 'your-client-id', // 替换为你的应用客户端ID
    policySignUpSignIn: 'B2C_1_SignUpSignIn', // 替换为你的策略名称
    redirectUri: 'your-redirect-uri', // 替换为你的重定向URI
  );

  Future<void> _signIn() async {
    try {
      String? accessToken = await _azureB2C.signIn();
      if (accessToken != null) {
        // 登录成功，处理访问令牌
        print('Access Token: $accessToken');
        // 例如，可以将用户信息保存到本地或进行API调用
      } else {
        // 用户取消登录
        print('User cancelled login.');
      }
    } catch (e) {
      // 处理错误
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Azure B2C Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _signIn,
          child: Text('Sign In with Azure B2C'),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮用于触发Azure B2C登录流程。当用户点击按钮时，会调用_azureB2C.signIn()方法，该方法会启动Azure B2C的登录页面。登录成功后，你可以从返回的访问令牌中获取用户信息或进行其他操作。

注意：

  1. 确保你的Azure B2C配置正确，包括租户ID、客户端ID、策略名称和重定向URI。
  2. 在实际应用中，你可能需要处理更多的登录状态和错误信息。
  3. 对于生产环境，建议使用更安全的方式存储和处理访问令牌，例如使用Keychain或KeyStore服务。

希望这个示例能帮助你在Flutter应用中集成Azure B2C认证。如果有其他问题，欢迎继续提问！

回到顶部