Flutter阿里云号码认证插件`fl_aliyun_number_auth`的使用

阿里云一键登录

官方文档

插件仅连接原生 SDK 的方法和参数，包含 UI 配置（自定义 UI 还未实现完整）。

一键登录和预取号码流程，请参考官方文档。

配置

Android配置

在 android/app/src/main/AndroidManifest.xml 文件中添加 HTTP 支持配置：

<!-- 如果有配置其他 networkSecurityConfig 请添加行替换 或者复制 number_auth_network_security_config 中的添加至自己的 xml -->
<application android:networkSecurityConfig="@xml/number_auth_network_security_config"
    android:requestLegacyExternalStorage="true" tools:replace="android:networkSecurityConfig">

    <!-- 如果使用弹窗模式 需要添加以下内容 -->
    <activity android:name="com.mobile.auth.gatewayauth.LoginAuthActivity"
        android:theme="@style/NumberAuthDialogTheme" tools:replace="android:theme" />

</application>

使用

以下是一些常用的方法示例：

/// 设置SDK密钥
void setAuthInfo() async {
  final result = await FlAliYunNumberAuth()
      .setAuthInfo(android: androidAuthInfo, ios: iosAuthInfo);
}

/// 设置授权页UI
/// 所有 UI 单位均为 px 参考 example 转换为 px
void setAuthUI() async {
  final result = await FlAliYunNumberAuth()
      .setAuthUI(android: buildAndroidUi(context), ios: buildIOSUi(context));
}

/// SDK环境检查函数，检查终端是否支持号码认证
void checkEnvAvailable() async {
  final result = await FlAliYunNumberAuth().checkEnvAvailable(AuthType.login);
}

/// 一键登录预取号
void accelerateLoginPage() async {
  final result = await FlAliYunNumberAuth().accelerateLoginPage();
}

/// 一键登录获取Token
void getLoginToken() async {
  final result = await FlAliYunNumberAuth().getLoginToken();
}

/// 退出登录页面
/// code600024 时调用
void quitLoginPage() async {
  final result = await FlAliYunNumberAuth().quitLoginPage();
  setResultText = 'quitLoginPage:$result';
}

/// 结束授权页loading动画
void hideLoginLoading() async {
  final result = await FlAliYunNumberAuth().hideLoginLoading();
}

/// 二次授权弹窗取消事件
void quitPrivacyAlert() async {
  final result = await FlAliYunNumberAuth().quitPrivacyAlert();
}

/// 设置授权页协议框是否勾选
void setCheckboxIsChecked() async {
  final result =
  await FlAliYunNumberAuth().setCheckboxIsChecked(Random().nextBool());
}

/// 获取授权页协议勾选框选中状态
/// true 选中 false 未选中 null 未初始化
void queryCheckBoxIsChecked() async {
  final result = await FlAliYunNumberAuth().queryCheckBoxIsChecked();
}

/// 获取上网卡运营商 CMCC(中国移动)、CUCC(中国联通)、CTCC(中国电信)
void getCurrentCarrierName() async {
  final result = await FlAliYunNumberAuth().getCurrentCarrierName();
}

/// 授权页协议内容动画执行，注意：必须设置privacyAnimation属性，才会执行动画
void privacyAnimationStart() async {
  final result = await FlAliYunNumberAuth().privacyAnimationStart();
}

/// 授权页checkbox动画执行，注意：必须设置checkboxAnimation属性，才会执行动画
void checkBoxAnimationStart() async {
  final result = await FlAliYunNumberAuth().checkBoxAnimationStart();
}

/// 获取sdk 版本号
void getVersion() async {
  final result = await FlAliYunNumberAuth().getVersion();
}

/// iOS特有方法
void iosMethod() async {
  final result = await FlAliYunNumberAuth().iosMethod();
}

/// Android特有方法
void androidMethod() async {
  final result = await FlAliYunNumberAuth().androidMethod();
}

示例代码

以下是完整的示例代码：

import 'dart:math';

import 'package:example/src/android_ui.dart';
import 'package:example/src/ios_ui.dart';
import 'package:fl_aliyun_number_auth/fl_aliyun_number_auth.dart';
import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  const App({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(title: const Text('FlAliYunNumberAuth')),
            body: Padding(
              padding: const EdgeInsets.all(12),
              child: HomePage(),
            )));
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

const androidSecret = 'androidSecret';
const iosSecret = 'iosSecret';

class _HomePageState extends State<HomePage> {
  AuthInfoForAndroid androidAuthInfo = AuthInfoForAndroid(
      secret: androidSecret,
      enableActivityResultListener: true,
      enableAuthUIControlClickListener: true);
  AuthInfoForIOS iosAuthInfo = AuthInfoForIOS(secret: iosSecret);

  String resultText = "";

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

    /// 添加result回调
    FlAliYunNumberAuth().addCallback((result) {
      setResultText = 'addCallback:${result?.toMap()}';
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
          width: double.infinity,
          height: 120,
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              color: Colors.grey.withValues(alpha: 0.5),
              borderRadius: BorderRadius.circular(8)),
          child: Text(resultText, textAlign: TextAlign.center)),
      SizedBox(height: 10),
      Expanded(
          child: SingleChildScrollView(
              child: Column(children: [
        Wrap(runSpacing: 12, spacing: 12, children: [
          ElevatedText('setAuthInfo', onPressed: setAuthInfo),
          ElevatedText('setAuthUI', onPressed: setAuthUI),
          ElevatedText('checkEnvAvailable', onPressed: checkEnvAvailable),
          ElevatedText('accelerateLoginPage', onPressed: accelerateLoginPage),
          ElevatedText('getLoginToken', onPressed: getLoginToken),
          ElevatedText('quitLoginPage', onPressed: quitLoginPage),
          ElevatedText('hideLoginLoading', onPressed: hideLoginLoading),
          ElevatedText('quitPrivacyAlert', onPressed: quitPrivacyAlert),
          ElevatedText('setCheckboxIsChecked', onPressed: setCheckboxIsChecked),
          ElevatedText('queryCheckBoxIsChecked',
              onPressed: queryCheckBoxIsChecked),
          ElevatedText('getCurrentCarrierName',
              onPressed: getCurrentCarrierName),
          ElevatedText('privacyAnimationStart',
              onPressed: privacyAnimationStart),
          ElevatedText('checkBoxAnimationStart',
              onPressed: checkBoxAnimationStart),
          ElevatedText('getVersion', onPressed: getVersion),
        ])
      ]))),
    ]);
  }

  void setAuthInfo() async {
    final result = await FlAliYunNumberAuth()
        .setAuthInfo(android: androidAuthInfo, ios: iosAuthInfo);
    setResultText = 'setAuthInfo:${result?.toMap()}';
  }

  void setAuthUI() async {
    final result = await FlAliYunNumberAuth().setAuthUI(
        android: buildAndroidDialogUi(context), ios: buildIOSDialogUi(context));
    setResultText = 'setAuthUI:$result';
  }

  void checkEnvAvailable() async {
    final result = await FlAliYunNumberAuth().checkEnvAvailable(AuthType.login);
    setResultText = 'checkEnvAvailable:$result';
  }

  void accelerateLoginPage() async {
    final result = await FlAliYunNumberAuth().accelerateLoginPage();
    setResultText = 'accelerateLoginPage:$result';
  }

  void getLoginToken() async {
    final result = await FlAliYunNumberAuth().getLoginToken();
    setResultText = 'getLoginToken:$result';
  }

  void quitLoginPage() async {
    final result = await FlAliYunNumberAuth().quitLoginPage();
    setResultText = 'quitLoginPage:$result';
  }

  void hideLoginLoading() async {
    final result = await FlAliYunNumberAuth().hideLoginLoading();
    setResultText = 'hideLoginLoading:$result';
  }

  void quitPrivacyAlert() async {
    final result = await FlAliYunNumberAuth().quitPrivacyAlert();
    setResultText = 'quitPrivacyAlert:$result';
  }

  void setCheckboxIsChecked() async {
    final result =
        await FlAliYunNumberAuth().setCheckboxIsChecked(Random().nextBool());
    setResultText = 'setCheckboxIsChecked:$result';
  }

  void queryCheckBoxIsChecked() async {
    final result = await FlAliYunNumberAuth().queryCheckBoxIsChecked();
    setResultText = 'queryCheckBoxIsChecked:$result';
  }

  void getCurrentCarrierName() async {
    final result = await FlAliYunNumberAuth().getCurrentCarrierName();
    setResultText = 'getCurrentCarrierName:$result';
  }

  void privacyAnimationStart() async {
    final result = await FlAliYunNumberAuth().privacyAnimationStart();
    setResultText = 'privacyAnimationStart:$result';
  }

  void checkBoxAnimationStart() async {
    final result = await FlAliYunNumberAuth().checkBoxAnimationStart();
    setResultText = 'checkBoxAnimationStart:$result';
  }

  void getVersion() async {
    final result = await FlAliYunNumberAuth().getVersion();
    setResultText = 'getVersion:$result';
  }

  set setResultText(String text) {
    resultText = text;
    log(resultText);
    setState(() {});
  }
}

void log(String? message) {
  debugPrint("FlAliYunNumberAuth:$message");
}

class ElevatedText extends StatelessWidget {
  const ElevatedText(this.text, {this.onPressed, super.key});

  final VoidCallback? onPressed;
  final String text;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onPressed, child: Text(text));
  }
}

extension ExtensionInt on int {
  // 将 int 转换为 px
  int toPx(BuildContext context) =>
      (this * MediaQuery.of(context).devicePixelRatio).toInt();
}

extension ExtensionDouble on double {
  // 将 double 转换为 px
  double toPx(BuildContext context) =>
      this * MediaQuery.of(context).devicePixelRatio;
}

更多关于Flutter阿里云号码认证插件fl_aliyun_number_auth的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼

更多关于Flutter阿里云号码认证插件fl_aliyun_number_auth的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

fl_aliyun_number_auth 是一个 Flutter 插件，用于集成阿里云的号码认证服务。通过该插件，你可以轻松地在 Flutter 应用中实现一键登录功能。以下是使用 fl_aliyun_number_auth 插件的基本步骤和示例代码。

1. 安装插件

首先，在你的 pubspec.yaml 文件中添加 fl_aliyun_number_auth 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  fl_aliyun_number_auth: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

2. 初始化插件

在使用插件之前，你需要在应用的启动时进行初始化。通常可以在 main.dart 文件中的 main 函数中进行初始化。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化阿里云号码认证插件
  await FlAliyunNumberAuth.init(
    iosAppKey: 'your_ios_app_key', // 替换为你的iOS AppKey
    androidAppKey: 'your_android_app_key', // 替换为你的Android AppKey
  );

  runApp(MyApp());
}

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

3. 实现一键登录

在需要实现一键登录的页面中，你可以调用 FlAliyunNumberAuth.login 方法来启动号码认证流程。

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

class MyHomePage extends StatelessWidget {
  Future<void> _login() async {
    try {
      // 启动号码认证
      final result = await FlAliyunNumberAuth.login();
      
      // 处理认证结果
      if (result != null) {
        print('Login Success: $result');
        // 这里可以处理登录成功后的逻辑，例如获取用户信息等
      } else {
        print('Login Failed');
      }
    } catch (e) {
      print('Error: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('阿里云号码认证示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _login,
          child: Text('一键登录'),
        ),
      ),
    );
  }
}