Flutter单点登录插件one_login的使用

Flutter单点登录插件one_login的使用

介绍

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

以下是如何使用 ali_auth 插件的完整指南及示例代码。

功能特性

  • 国际支持：支持多种语言，包括中文。
  • 跨平台：支持 Android 和 iOS。
  • 高度定制化：可以根据项目需求调整配置。
  • 开源：插件完全开源，欢迎贡献和反馈。

使用步骤

1. 添加依赖

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

dependencies:
  ali_auth: ^最新版本号

然后运行以下命令安装依赖：

flutter pub get

2. 初始化插件

在应用启动时，使用 AliAuthPlugin.initSdk() 方法初始化插件。需要提供阿里云的 sk 密钥和配置文件。

import 'package:flutter/material.dart';
import 'package:ali_auth/ali_auth.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: getDislogConfig(),
    );
  } else {
    result = await AliAuthPlugin.initSdk(
      sk: '6QzZRbemo+1Zm/C6pMyJQ34YZDafH0UCvIUN1hMnHYHnL5Be2MzeRRC2tmWUywNpxWLvqh9kjrRcE7lVVUZFTWCqKvp2VZuvOIOrZIfCxWWcu7YfEDCrlwekJhEh0EGot3tsDcO8pvgLY5nIc7FmiFGdaWDJ8j6mMRkQJ66PC82H5k9ZR8+MTdGC0zH13ToUxzRGP2d3vzNOAFUbzuKnJA6NdndsTb+CzzoBPR0n3pPuknIUI7u0V5rEc8x7D1pg1lALpB7TFi5y5di3vmUCz6iNk1oyj/9xqNmUHpJg8BY=',
      config: getConfig(), //getDislogConfig(),
    );
  }

  print(result);

  runApp(MyApp());
}

3. 设置系统状态栏样式

SystemUiOverlayStyle systemUiOverlayStyle =
    SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

4. 配置回调函数

在 initState 方法中设置登录监听器，处理登录成功和失败的回调。

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()
          ],
        ),
      ),
    );
  }
}

更多关于Flutter单点登录插件one_login的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter单点登录插件one_login的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


one_login 是一个 Flutter 插件，用于实现单点登录（SSO）功能。它通常用于与第三方身份验证服务集成，例如通过一键登录的方式快速获取用户手机号码等。以下是如何在 Flutter 项目中使用 one_login 插件的基本步骤：

1. 添加依赖

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

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

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

2. 配置 Android 和 iOS 项目

Android 配置

在 android/app/build.gradle 文件中，确保 minSdkVersion 至少为 16：

android {
    ...
    defaultConfig {
        minSdkVersion 16
        ...
    }
    ...
}

iOS 配置

在 ios/Podfile 文件中，确保 platform :ios 至少为 9.0：

platform :ios, '9.0'

3. 初始化 one_login

在 Flutter 应用的入口文件（通常是 main.dart）中，初始化 one_login：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 one_login
  await OneLogin.init(
    appId: 'your_app_id',  // 替换为你的 App ID
  );
  
  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(),
    );
  }
}

4. 实现单点登录功能

在需要使用单点登录的页面中，调用 OneLogin 的相关方法来实现登录功能。例如，使用一键登录获取用户手机号码：

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

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

class _MyHomePageState extends State<MyHomePage> {
  String _phoneNumber = '';

  Future<void> _login() async {
    try {
      final result = await OneLogin.login();
      setState(() {
        _phoneNumber = result.phoneNumber ?? 'Unknown';
      });
    } catch (e) {
      print('Login failed: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OneLogin Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Phone Number: $_phoneNumber'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _login,
              child: Text('Login with OneLogin'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部