Flutter阿里巴巴认证插件flutter_ali_auth的使用

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

Flutter阿里巴巴认证插件flutter_ali_auth的使用

插件简介

flutter_ali_auth 是一个基于阿里云一键登录的Flutter集成SDK插件,支持Android和iOS平台的一键登录功能。

更新历史 🌄

  • 已更新到与官方同步的SDK V2.12.11 版本;
  • 授权页适配夜间/暗色模式(仅全屏,弹窗模式需自定义);

目录

效果图 📷

IOS

全屏 底部弹窗 中间弹窗
full_screen_ios bottomsheet_ios alert_ios

Android

全屏 底部弹窗 中间弹窗
full_screen_android bottomsheet_android alert_android

准备工作 🔧

请登录阿里云控制台号码认证服务分别添加IOS和Android的认证方案,从而获取到SDK的秘钥。

原生SDK代码调用顺序 🔗

// 1. 初始化获取Token实例
TokenResultListener mTokenListener = new TokenResultListener();

// 2. 初始化SDK实例
mAlicomAuthHelper = PhoneNumberAuthHelper.getInstance(context, mTokenListener);

// 3. 设置SDK密钥
mAlicomAuthHelper.setAuthSDKInfo();

// 4. 检测终端网络环境是否支持一键登录或者号码认证,根据回调结果确定是否可以使用一键登录功能
mAlicomAuthHelper.checkEnvAvailable(PhoneNumberAuthHelper#SERVICE_TYPE_LOGIN);

// 5. 若步骤4返回true,则根据业务情况,调用预取号或者一键登录接口
mAlicomAuthHelper.getLoginToken(context, 5000);

插件使用 ☄️

1. 添加监听

/// 传入回调函数 onEvent
AliAuthClient.handleEvent(onEvent: _onEvent);
/// 移除回调事件
AliAuthClient.removeHandler();

onEvent中监听回调并且自行进行判断:

void _onEvent(AuthResponseModel event) async {
  // print(event);
}

2. 初始化SDK (initSdk)

await AliAuthClient.initSdk(
  authConfig: const AuthConfig(
    iosSdk: 'your-ios-sdk-key',
    androidSdk: 'your-android-sdk-key',
    enableLog: true,
    authUIStyle: AuthUIStyle.fullScreen,
    authUIConfig: FullScreenUIConfig(
      backgroundColor: "#ffffff",
      logoConfig: LogoConfig(),
      sloganConfig: SloganConfig(),
      phoneNumberConfig: PhoneNumberConfig(),
      loginButtonConfig: LoginButtonConfig(),
      changeButtonConfig: ChangeButtonConfig(),
      checkBoxConfig: CheckBoxConfig(),
      privacyConfig: PrivacyConfig(),
    ),
  ),
);

3. 一键登录获取Token (login)

try {
  await AliAuthClient.login(timeout: 5.0);
} catch (e) {
  // 处理异常
}

4. 其他方法

/// 关闭授权页loading
await AliAuthClient.hideLoginLoading();

/// 退出授权认证页
await AliAuthClient.quitLoginPage();

示例Demo

以下是一个完整的示例应用,展示了如何使用 flutter_ali_auth 插件:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_ali_auth/flutter_ali_auth.dart';

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

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

class _MyAppState extends State<MyApp> {
  String _aliAuthVersion = '获取阿里云插件版本中';

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

  Future<void> initPlatformState() async {
    String aliAuthVersion;
    try {
      aliAuthVersion = (await AliAuthClient.version) as String? ?? '未知阿里云插件版本';
    } on PlatformException {
      aliAuthVersion = 'Failed to get ali auth plugin version.';
    }
    if (!mounted) return;
    setState(() {
      _aliAuthVersion = aliAuthVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter_ali_auth Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('阿里云插件版本: $_aliAuthVersion'),
              ElevatedButton(
                onPressed: () async {
                  try {
                    await AliAuthClient.initSdk(
                      authConfig: const AuthConfig(
                        iosSdk: 'your-ios-sdk-key',
                        androidSdk: 'your-android-sdk-key',
                        enableLog: true,
                        authUIStyle: AuthUIStyle.fullScreen,
                        authUIConfig: FullScreenUIConfig(
                          backgroundColor: "#ffffff",
                          logoConfig: LogoConfig(),
                          sloganConfig: SloganConfig(),
                          phoneNumberConfig: PhoneNumberConfig(),
                          loginButtonConfig: LoginButtonConfig(),
                          changeButtonConfig: ChangeButtonConfig(),
                          checkBoxConfig: CheckBoxConfig(),
                          privacyConfig: PrivacyConfig(),
                        ),
                      ),
                    );
                    await AliAuthClient.login(timeout: 5.0);
                  } catch (e) {
                    // 处理异常
                  }
                },
                child: Text('一键登录'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,关于Flutter阿里巴巴认证插件flutter_ali_auth的使用,以下是一个基本的代码示例,展示了如何集成和使用这个插件进行身份验证。请注意,实际使用时需要替换一些参数(如AppKey、AppSecret等)为你自己的值。

首先,确保你已经在pubspec.yaml文件中添加了flutter_ali_auth依赖:

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

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

接下来,在你的Flutter项目中,你可以按照以下步骤使用flutter_ali_auth插件:

  1. 初始化插件

在你的Dart文件中(比如main.dart),首先导入插件:

import 'package:flutter_ali_auth/flutter_ali_auth.dart';
  1. 配置插件

在应用的初始化阶段(比如void main()函数或者某个State的initState方法中),配置插件的AppKey和AppSecret等信息。这里假设你已经从阿里巴巴开放平台获取了这些信息。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 配置插件(替换为你的AppKey和AppSecret)
  await FlutterAliAuth.init(
    appKey: '你的AppKey',
    appSecret: '你的AppSecret',
    // 其他可能的配置参数(如果有的话)
  );

  runApp(MyApp());
}
  1. 调用认证功能

在你的应用中,当需要触发阿里巴巴认证时,可以调用插件提供的认证方法。例如,这里展示一个按钮点击后触发认证的简单示例:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await FlutterAliAuth.init(
    appKey: '你的AppKey',
    appSecret: '你的AppSecret',
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Alibaba Auth Example'),
        ),
        body: Center(
          child: AuthButton(),
        ),
      ),
    );
  }
}

class AuthButton extends StatefulWidget {
  @override
  _AuthButtonState createState() => _AuthButtonState();
}

class _AuthButtonState extends State<AuthButton> {
  void _handleAuth() async {
    try {
      // 调用认证方法(根据插件提供的API文档,这里可能需要传递更多参数)
      var result = await FlutterAliAuth.auth();
      print('认证结果: $result');
      // 处理认证结果
    } catch (e) {
      print('认证失败: $e');
      // 处理认证失败的情况
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _handleAuth,
      child: Text('触发阿里巴巴认证'),
    );
  }
}

注意

  • 上面的代码示例是基于假设的API调用,实际使用时请参考flutter_ali_auth插件的官方文档,因为API的具体调用方式和参数可能会有所不同。
  • FlutterAliAuth.auth()方法是一个假设的调用,实际使用时应该替换为插件提供的具体认证方法。
  • 确保你已经按照阿里巴巴开放平台的要求配置了必要的回调URL等信息。

由于flutter_ali_auth插件的具体API和实现可能会随时间变化,因此强烈建议查阅最新的官方文档和示例代码来获取最准确的信息。

回到顶部