Flutter Google身份验证插件 serverpod_auth_google_flutter 的使用

简介

serverpod_auth_google_flutter 是 Serverpod 框架的一部分，用于在 Flutter 应用中实现 Google 身份验证。Serverpod 是一个开源、可扩展的应用服务器，专为 Flutter 社区设计。更多文档可以访问 Serverpod 官方文档。

安装

首先，确保你已经安装了 serverpod_auth_google_flutter 插件。在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  serverpod_client: ^x.x.x
  serverpod_auth_google_flutter: ^x.x.x

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

配置

1. 创建 Google OAuth 2.0 凭证

1. 访问 Google Cloud Console。
2. 选择或创建一个新的项目。
3. 在左侧导航栏中，选择 “APIs & Services” -> “Credentials”。
4. 点击 “Create credentials” -> “OAuth client ID”。
5. 选择 “Desktop app”（或根据你的应用类型选择合适的选项）。
6. 输入名称并创建客户端 ID 和客户端密钥。

2. 配置 serverpod_auth_google_flutter

在你的 Flutter 项目中，创建一个配置文件来存储你的 Google OAuth 凭证。例如，在 lib/config.dart 中：

class Config {
  static const String googleClientId = 'YOUR_GOOGLE_CLIENT_ID';
  static const String googleClientSecret = 'YOUR_GOOGLE_CLIENT_SECRET';
  static const String serverUrl = 'https://your-server-url.com';
}

使用示例

1. 初始化 Serverpod 客户端

在你的主文件 main.dart 中初始化 Serverpod 客户端：

import 'package:flutter/material.dart';
import 'package:serverpod_client/serverpod_client.dart';
import 'package:serverpod_auth_google_flutter/serverpod_auth_google_flutter.dart';
import 'config.dart';

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

  // 初始化 Serverpod 客户端
  final client = Client(Config.serverUrl)
    ..addModule(AuthGoogleFlutter(
      clientId: Config.googleClientId,
      clientSecret: Config.googleClientSecret,
    ));

  runApp(MyApp(client: client));
}

class MyApp extends StatelessWidget {
  final Client client;

  MyApp({required this.client});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Serverpod Google Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(client: client),
    );
  }
}

2. 创建登录页面

创建一个简单的登录页面，允许用户通过 Google 登录：

import 'package:flutter/material.dart';
import 'package:serverpod_client/serverpod_client.dart';
import 'package:serverpod_auth_google_flutter/serverpod_auth_google_flutter.dart';

class HomeScreen extends StatefulWidget {
  final Client client;

  HomeScreen({required this.client});

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _isAuthenticated = false;
  String _userName = '';

  Future<void> _signInWithGoogle() async {
    try {
      final authResult = await widget.client.authGoogle.signIn();
      if (authResult.isAuthenticated) {
        setState(() {
          _isAuthenticated = true;
          _userName = authResult.user?.name ?? '';
        });
      }
    } catch (e) {
      print('Error signing in with Google: $e');
    }
  }

  Future<void> _signOut() async {
    await widget.client.authGoogle.signOut();
    setState(() {
      _isAuthenticated = false;
      _userName = '';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Serverpod Google Auth Demo'),
      ),
      body: Center(
        child: _isAuthenticated
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Welcome, $_userName!'),
                  ElevatedButton(
                    onPressed: _signOut,
                    child: Text('Sign Out'),
                  ),
                ],
              )
            : ElevatedButton(
                onPressed: _signInWithGoogle,
                child: Text('Sign In with Google'),
              ),
      ),
    );
  }
}

总结

通过以上步骤，你可以在 Flutter 应用中使用 serverpod_auth_google_flutter 插件实现 Google 身份验证。希望这个示例对你有所帮助！如果你有任何问题，欢迎访问 Serverpod 官方文档 或在 GitHub 上提交 issue。

参考链接

• Serverpod 官方网站
• Serverpod 官方文档
• serverpod_auth_google_flutter GitHub 仓库