Flutter跨平台Google登录插件google_sign_in_all_platforms_desktop的使用

Flutter跨平台Google登录插件google_sign_in_all_platforms_desktop的使用

google_sign_in_all_platforms_desktop

google_sign_in_all_platforms_desktop 是 google_sign_in_all_platforms 包的桌面端实现。它允许在桌面平台上使用 Google 登录功能。

使用步骤

以下是一个完整的示例，展示如何在 Flutter 桌面应用中使用 google_sign_in_all_platforms_desktop 插件进行 Google 登录。

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  google_sign_in_all_platforms: ^0.0.3

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

2. 配置 Google API

在 Google Cloud Console 中创建一个新的项目，并启用 Google+ API 或 Google Identity Platform。获取客户端 ID 和客户端密钥，并将其配置到应用中。

3. 示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 桌面应用中使用 google_sign_in_all_platforms_desktop 进行 Google 登录。

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:google_sign_in_all_platforms/google_sign_in_all_platforms.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google 登录示例',
      theme: ThemeData.dark(useMaterial3: true),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _googleUserEmail = '';
  String _googleAccessToken = '';

  // 初始化 Google 登录
  Future<void> _handleSignIn() async {
    final GoogleSignInAllPlatforms googleSignIn =
        GoogleSignInAllPlatforms(scopes: ['email']);

    try {
      // 尝试登录
      final GoogleSignInAuthentication googleSignInAccount =
          await googleSignIn.signIn();

      // 获取用户信息
      final Map<String, dynamic> userData = {
        'id': googleSignInAccount.id,
        'email': googleSignInAccount.email,
        'displayName': googleSignInAccount.displayName,
        'photoUrl': googleSignInAccount.photoUrl,
      };

      setState(() {
        _googleUserEmail = userData['email'];
        _googleAccessToken = googleSignInAccount.accessToken;
      });
    } catch (error) {
      print('登录失败: $error');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google 登录示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _handleSignIn,
              child: const Text('登录 Google'),
            ),
            const SizedBox(height: 20),
            if (_googleUserEmail.isNotEmpty)
              Text('已登录用户: $_googleUserEmail'),
            if (_googleAccessToken.isNotEmpty)
              Text('访问令牌: $_googleAccessToken'),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


google_sign_in_all_platforms_desktop 是一个Flutter插件，旨在为桌面平台（如Windows、macOS和Linux）提供Google登录功能的支持。这个插件是对 google_sign_in 插件的扩展，因为 google_sign_in 默认只支持移动平台（Android和iOS）。通过使用 google_sign_in_all_platforms_desktop，你可以在桌面应用中实现Google登录功能。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 google_sign_in_all_platforms_desktop 插件的依赖项：

dependencies:
  flutter:
    sdk: flutter
  google_sign_in_all_platforms_desktop: ^1.0.0

然后运行 flutter pub get 来获取依赖。

2. 配置 Google API 控制台

要使用Google登录功能，你需要在 Google API 控制台 中创建一个项目并配置OAuth 2.0凭据。

  1. 创建一个新的项目或选择现有的项目。
  2. 导航到 API & Services > Credentials。
  3. 点击 Create Credentials 并选择 OAuth 2.0 Client IDs。
  4. 选择应用类型为 Desktop app，并设置名称。
  5. 创建完成后，你会获得一个 Client ID 和 Client Secret。

3. 配置桌面平台的OAuth 2.0

对于桌面平台，你需要配置OAuth 2.0的回调URI。通常，桌面应用的OAuth 2.0回调URI是 http://localhost:<port>，其中 <port> 是一个未被占用的端口号。

在Google API控制台中，你可以将回调URI设置为 http://localhost:<port>，例如 http://localhost:8080。

4. 初始化 Google Sign-In

在你的Flutter应用中，初始化 GoogleSignIn 并使用 google_sign_in_all_platforms_desktop 插件。

import 'package:flutter/material.dart';
import 'package:google_sign_in_all_platforms_desktop/google_sign_in_all_platforms_desktop.dart';
import 'package:google_sign_in/google_sign_in.dart';

class GoogleSignInExample extends StatefulWidget {
  @override
  _GoogleSignInExampleState createState() => _GoogleSignInExampleState();
}

class _GoogleSignInExampleState extends State<GoogleSignInExample> {
  GoogleSignIn _googleSignIn = GoogleSignIn(
    clientId: 'YOUR_CLIENT_ID', // 替换为你的Client ID
    scopes: [
      'email',
      'https://www.googleapis.com/auth/userinfo.profile',
    ],
  );

  Future<void> _handleSignIn() async {
    try {
      await _googleSignIn.signIn();
      print('Signed in: ${_googleSignIn.currentUser?.displayName}');
    } catch (error) {
      print('Error signing in: $error');
    }
  }

  Future<void> _handleSignOut() async {
    try {
      await _googleSignIn.signOut();
      print('Signed out');
    } catch (error) {
      print('Error signing out: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Sign-In Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _handleSignIn,
              child: Text('Sign in with Google'),
            ),
            ElevatedButton(
              onPressed: _handleSignOut,
              child: Text('Sign out'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: GoogleSignInExample(),
  ));
}

5. 处理 OAuth 2.0 回调

google_sign_in_all_platforms_desktop 插件会自动处理OAuth 2.0回调。你只需要确保在Google API控制台中正确配置了回调URI。

6. 运行应用

确保你已经配置好桌面平台的开发环境，然后运行应用：

flutter run -d windows

或

flutter run -d macos

或

flutter run -d linux
回到顶部