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

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

支持浏览器

lazy_sign_in_extension 自动检测浏览器并相应地使用API。

安装

flutter pub add lazy_sign_in_extension

使用

import 'package:lazy_sign_in_extension/lazy_sign_in_extension.dart' as lazy;

const String clientId = '你的Google OAuth客户端ID';
final lazy.SignInBase globalLazySignIn = lazy.SignInExt(clientId: clientId);

单一接口/API

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

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

Web/App

使用lazy_sign_in_google

import 'package:lazy_sign_in_google/lazy_sign_in_google.dart' as lazy;
final lazy.SignIn globalLazySignIn = lazy.SignInGoogle(clientId: clientId);

示例

• 示例文件夹
• 完整仓库: https://github.com/J-Siu/flutter_lazy/example/lazy_sign_in_example/

你需要提供自己的clientId。

import 'package:flutter/material.dart';

// 为Chrome/Firefox扩展取消注释
import 'package:lazy_sign_in_extension/lazy_sign_in_extension.dart' as lazy;

// 为Chrome扩展取消注释
final globalLazySignIn = lazy.SignInExtChrome(clientId: clientId);

// 为Firefox扩展取消注释
// final globalLazySignIn = lazy.SignInExtMoz(clientId: clientId);

// // 为Web/App取消注释
// import 'package:lazy_sign_in_google/lazy_sign_in_google.dart' as lazy;
// final lazy.SignIn globalLazySignIn = lazy.SignInGoogle(clientId: clientId);

/// - Chrome 扩展
///   - 使用Google OAuth **Chrome应用**客户端ID。
///   - 更新OAuth凭证应用程序ID为扩展ID。
/// - Firefox 扩展
///   - 使用Google OAuth **Web应用**客户端ID。
///   - 更新OAuth凭证授权重定向URI。
///     这可以通过[redirectUrl]获得。
/// - Web
///   - 使用Google OAuth **Web应用**客户端ID。
///   - 更新OAuth凭证授权JavaScript源。
/// - 独立App
///   - 使用Google OAuth **Chrome应用**客户端ID。
///   - 更新OAuth凭证应用程序ID。
const String clientId = '你的Google OAuth客户端ID';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  final String title = 'LazySignIn 示例';
  [@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: [
            buttonSignIn,
            buttonSignOut,
            avatar(),
          ],
        ),
      ),
    );
  }

  // 当令牌变化时触发此函数
  _signInHandler() {
    setState(() {
      _photoUrl = globalLazySignIn.photoUrl;
    });
  }
}