Flutter一键登录插件click_login的使用

Flutter一键登录插件click_login的使用

概述

ali_auth 是一个用于阿里云号码认证服务的一键登录插件。该插件支持 Android 和 iOS 平台，并且完全开源，可以高度定制化。它可以帮助开发者快速集成一键登录功能，提升用户体验。

功能特点

• 国际支持：支持多语言，包括中文和英文。
• 免费开源：插件完全免费，用户可以根据需求进行修改和优化。
• 高定制性：插件提供了多种配置选项，可以根据项目需求进行调整。

使用步骤

1. 添加依赖

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

dependencies:
  ali_auth: ^最新版本号

然后运行以下命令以更新依赖：

flutter pub get

2. 初始化插件

在应用启动时，调用 AliAuthPlugin.initSdk() 方法初始化插件。需要提供 sk 和配置参数。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:ali_auth/ali_auth.dart';
import 'package:flutter/services.dart';
import 'dart:io';

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

  /// 初始化插件
  /// 注意：请根据实际需求修改配置参数
  final result;
  if (Platform.isAndroid) {
    result = await AliAuthPlugin.initSdk(
      sk: 'uYhNaUWEW+1rV9cq27oAQVWi8qFaF1wKfHr6BjrdnMoyQbtAxIA7q/ToLl1xKGCAwDl66Mii6KXK3FstD+PNcwS0aFCLorOrYHMHed8FX7AT8qu/AlzTXE05g0FmUMb5z1QKCiyvpmP+THs04fCfVtHsYdirkJGcd58r24o3QykIatcZYgd1jB3WAz3HLUqCg4afUK49SggbPdwscSfVV8wcB/hP+ST9kUVD02JmsqLA4YZUCRuUX2+o5AG1UpJwi/OHEccrFyEwuODaFzDSMPVth2pTZEwCB/g3PeLWhUQlWxvRqolgWQ==',
      config: getConfig(),
    );
  } else {
    result = await AliAuthPlugin.initSdk(
      sk: '6QzZRbemo+1Zm/C6pMyJQ34YZDafH0UCvIUN1hMnHYHnL5Be2MzeRRC2tmWUywNpxWLvqh9kjrRcE7lVVUZFTWCqKvp2VZuvOIOrZIfCxWWcu7YfEDCrlwekJhEh0EGot3tsDcO8pvgLY5nIc7FmiFGdaWDJ8j6mMRkQJ66PC82H5k9ZR8+MTdGC0zH13ToUxzRGP2d3vzNOAFUbzuKnJA6NdndsTb+CzzoBPR0n3pPuknIUI7u0V5rEc8x7D1pg1lALpB7TFi5y5di3vmUCz6iNk1oyj/9xqNmUHpJg8BY=',
      config: getConfig(), //getDislogConfig(),
    );
  }

  print(result);

  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

3. 配置参数

配置参数分为两种：全屏模式和弹窗模式。以下是两种模式的示例配置：

全屏模式配置

getConfig() {
  return {
    "theme": {
      "backgroundColor": "#FFFFFF",
      "textColor": "#000000",
      "primaryColor": "#FF5722",
      "secondaryColor": "#FFC107",
    },
    "logoUrl": "assets/logo.png",
    "appName": "My App",
    "agreement": {
      "title": "隐私协议",
      "content": "我们承诺保护您的隐私。",
      "url": "https://example.com/privacy-policy",
    },
    "thirdParty": [
      {"name": "Google", "iconUrl": "assets/google.png"},
      {"name": "Facebook", "iconUrl": "assets/facebook.png"},
    ],
  };
}

弹窗模式配置

getDislogConfig() {
  return {
    "theme": {
      "backgroundColor": "#FFFFFF",
      "textColor": "#000000",
      "primaryColor": "#FF5722",
      "secondaryColor": "#FFC107",
    },
    "logoUrl": "assets/logo.png",
    "appName": "My App",
    "agreement": {
      "title": "隐私协议",
      "content": "我们承诺保护您的隐私。",
      "url": "https://example.com/privacy-policy",
    },
    "thirdParty": [
      {"name": "Google", "iconUrl": "assets/google.png"},
      {"name": "Facebook", "iconUrl": "assets/facebook.png"},
    ],
  };
}

4. 登录监听

在应用启动时，注册登录监听器以捕获登录事件。

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

class _MyAppState extends State<MyApp> {
  BuildContext? mContext;
  Timer? countdownTimer;

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

    /// 执行相关登录
    login();
  }

  /// 相关登录
  login() async {
    /// 登录监听
    AliAuthPlugin.loginListen(
        type: false, onEvent: _onEvent, onError: _onError);
  }

  /// 登录成功处理
  void _onEvent(event) async {
    print("-------------成功分割线------------$event");
    if (event != null && event['code'] != null) {
      if (event['code'] == '600024') {
        await AliAuthPlugin.login;
      } else if (event['code'] == '600000') {
        print('获取到的token${event["data"]}');
      }
    }
  }

  /// 登录错误处理
  void _onError(error) {
    print("-------------失败分割线------------$error");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('阿里云一键登录插件'),
        ),
        body: Column(
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                final result = await AliAuthPlugin.login;
                print(result);
              },
              child: Text('直接登录'),
            ),
            Platform.isIOS
                ? ElevatedButton(
                    onPressed: () async {
                      await AliAuthPlugin.appleLogin;
                    },
                    child: Text('apple登录'),
                  )
                : Container()
          ],
        ),
      ),
    );
  }
}