Flutter登录功能插件 m_login_sdk 的使用

概述

m_login_sdk 是一个原生的 Flutter 客户端库，允许访问 M-Login 系统。M-Login 系统是一个面向慕尼黑城市区域企业和机构的身份提供商方案。用户可以通过该系统集中管理他们的数据，并以安全透明的方式允许其他系统访问这些数据。SDK 基于 OAuth2 标准构建，包括 PKCE 增强。

支持的功能

• 登录
• 注册
• 用户数据管理（姓名、电子邮件、地址、生日、电话号码等）
• 支付方式管理
• 从支付结算流程中恢复错误

使用前准备

1. Flutter 项目

确保你有一个 Flutter 项目。

2. ClientID

你需要向 M-Login 团队申请一个 client-id。请访问 https://login.muenchen.de/ 获取联系详情。

3. Redirect URI

在获取 client-id 时，你应该已经定义了一个 redirectUri。这个 URI 应该以自定义的 URL scheme 开头（例如 de.example.my-app），以避免运行时错误和混淆。

集成 SDK

添加依赖

在 pubspec.yaml 文件中添加 m_login_sdk 依赖并运行 flutter pub get：

dependencies:
  m_login_sdk: ^1.1.0

设置

Android 设置

1. 设置最低 API 版本：确保 minSdkVersion 设置为 >= 24。

   打开 android/app/build.gradle 文件，找到 minSdkVersion 并设置为 24 或更高。

2. 将主活动设置为 singleTask：打开 android/app/src/main/AndroidManifest.xml 文件，在 MainActivity 中添加 android:launchMode="singleTask"。

   <activity
       android:name=".MainActivity"
       android:launchMode="singleTask">
   </activity>
   

3. 注册自定义 URL Scheme：在 AndroidManifest.xml 文件中，为主活动添加以下内容：

   <intent-filter android:label="m_login_sdk">
       <action android:name="android.intent.action.VIEW" />
       <category android:name="android.intent.category.DEFAULT" />
       <category android:name="android.intent.category.BROWSABLE" />
       <data android:scheme="YOUR_URL_SCHEME" />
   </intent-filter>
   

   将 YOUR_URL_SCHEME 替换为你的实际 URL scheme。

4. 针对 API 30 及以上版本：如果你的目标是 Android 30 及以上版本，请在 AndroidManifest.xml 文件中添加以下内容：

   <queries>
       <intent>
           <action android:name="android.intent.action.VIEW" />
           <category android:name="android.intent.category.BROWSABLE" />
           <data android:scheme="https" />
       </intent>
       <intent>
           <action android:name="android.intent.action.VIEW" />
           <category android:name="android.intent.category.APP_BROWSER" />
           <data android:scheme="https" />
       </intent>
   </queries>
   

iOS 设置

编辑 ios/Runner/Info.plist 文件并添加以下内容：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>YOUR_URL_SCHEME</string>
        </array>
    </dict>
</array>

将 YOUR_URL_SCHEME 替换为你的实际 URL scheme。

使用示例

示例代码

以下是一个简单的示例，展示了如何使用 m_login_sdk 进行登录：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String loginResultText = '<Not yet logged in>';

  final MLogin mLogin = MLogin(
    config: MLoginConfig.k,
    clientId: 'm-login-demo-app-k',
    callbackUrlScheme: 'k.de.swm.login.app',
    redirectUri: 'k.de.swm.login.app:/oauth2redirect/example',
  );

  Future<void> _startLogin() async {
    setState(() {
      loginResultText = 'Logging in...';
    });

    final loginResult = await mLogin.login(ephemeral: false);

    setState(() {
      loginResult.process(
        (authCode, verifier) {
          loginResultText =
              'Login successful!\ncode: $authCode\nverifier: $verifier';
        },
        (error) {
          loginResultText = 'Login FAILED!\n$error';
        },
      );
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _startLogin,
              child: const Text('Login'),
            ),
            Text(loginResultText),
          ],
        ),
      ),
    );
  }
}