Flutter简化登录流程插件lazy_sign_in的使用

Flutter简化登录流程插件lazy_sign_in的使用

lazy_sign_in 是一个用于简化Flutter应用中登录流程的插件，它支持多种登录方式，包括Google登录。以下是关于如何使用lazy_sign_in及其相关扩展包的详细介绍，并提供了一个完整的示例Demo。

功能介绍

安装与使用

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  lazy_sign_in: ^latest_version
  lazy_sign_in_extension: ^latest_version  # 如果你需要支持浏览器扩展
  lazy_sign_in_google: ^latest_version     # 如果你需要支持Google登录

2. 配置Google OAuth客户端ID

根据你的应用类型（Chrome扩展、Firefox扩展、Web或独立应用），选择合适的Google OAuth客户端ID：

• Chrome扩展：使用Google OAuth Chrome Application 客户端ID，并更新OAuth凭证的应用ID。
• Firefox扩展：使用Google OAuth Web Application 客户端ID，并更新OAuth凭证的授权重定向URI（可以通过redirectUrl获取）。
• Web：使用Google OAuth Web Application 客户端ID，并更新OAuth凭证的授权JavaScript来源。
• 独立应用：使用Google OAuth Chrome Application 客户端ID，并更新OAuth凭证的应用ID。

3. 示例代码

以下是一个完整的示例代码，展示了如何使用lazy_sign_in进行Google登录：

import 'package:flutter/material.dart';
import 'package:lazy_sign_in/lazy_sign_in.dart' as lazy;

// 根据需要取消注释以下代码
// import 'package:lazy_sign_in_extension/lazy_sign_in_extension.dart' as lazy;
// import 'package:lazy_sign_in_google/lazy_sign_in_google.dart' as lazy;

// 替换为你的Google OAuth客户端ID
const String clientId = 'Your Google OAuth client id';

// 创建全局的SignIn实例
final lazy.SignIn globalLazySignIn = lazy.SignInDummy(clientId: clientId);

// 如果是Chrome/Firefox扩展，使用以下代码
// final lazy.SignIn globalLazySignIn = lazy.SignInExt(clientId: clientId);

// 如果是Web或独立应用，使用以下代码
// final lazy.SignIn globalLazySignIn = lazy.SignInGoogle(clientId: clientId);

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  final String title = 'LazySignIn Example';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: MyHomePage(title: title),
    );
  }
}

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

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

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

  [@override](/user/override)
  void initState() {
    super.initState();
    // 监听登录状态的变化
    globalLazySignIn.isSignedIn.addListener(() => _signInHandler());
  }

  [@override](/user/override)
  void dispose() {
    // 移除监听器
    globalLazySignIn.isSignedIn.removeListener(() => _signInHandler());
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 构建用户头像
    Widget avatar() {
      if (_photoUrl.isNotEmpty) {
        return SizedBox(
          height: 60,
          width: 60,
          child: Image.network(_photoUrl),
        );
      } else {
        return const SizedBox();
      }
    }

    // 登录按钮
    Widget buttonSignIn = TextButton(
      onPressed: () => globalLazySignIn.signIn(),
      child: const Text('Sign-In'),
    );

    // 注销按钮
    Widget buttonSignOut = TextButton(
      onPressed: () => globalLazySignIn.signOut(),
      child: const Text('Sign-Out'),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            buttonSignIn,
            buttonSignOut,
            avatar(),
          ],
        ),
      ),
    );
  }

  // 当登录状态发生变化时触发
  void _signInHandler() {
    setState(() {
      _photoUrl = globalLazySignIn.photoUrl;
    });
  }
}