Flutter谷歌一键登录插件inkbook_googleonetapsignin的使用

Flutter谷歌一键登录插件inkbook_googleonetapsignin的使用

本项目是一个新的Flutter插件项目。该插件包括适用于Android和/或iOS的平台特定实现代码。

开始使用

安装插件

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

dependencies:
  googleonetapsignin: ^x.x.x

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

配置客户端ID

在初始化插件之前，你需要设置客户端ID。客户端ID可以在Google Cloud Console中找到。

初始化插件

在你的主应用类中初始化插件并设置配置：

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

import 'package:flutter/services.dart';
import 'package:googleonetapsignin/googleonetapsignin.dart';
import 'package:googleonetapsignin/user_data_stream.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final _googleonetapsigninPlugin = Googleonetapsignin();
  Map<String, dynamic> userData = {};

  @override
  void initState() {
    super.initState();
    _googleonetapsigninPlugin.setConfig("YourClientId"); // 替换为你的客户端ID
    initPlatformState();
  }

  // 平台消息是异步的，因此我们在异步方法中进行初始化。
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能会失败，所以我们使用try/catch来处理PlatformException。
    // 我们还处理了消息可能返回null的情况。
    try {
      platformVersion =
          await _googleonetapsigninPlugin.getPlatformVersion() ?? 'Unknown platform version';
      _googleonetapsigninPlugin.getOneTapLogin(); // 启动一键登录流程

      // 监听用户数据流
      UserDataStream.userDataStream.listen((userData) {
        setState(() {
          this.userData = userData;
        });
      });

    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // 如果小部件在异步平台消息仍在飞行时从树中移除，则我们希望丢弃回复而不是调用setState来更新我们的不存在的外观。
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Text(
            '运行于: $_platformVersion\n EMAIL: ${userData['email'] ?? ''} NAME: ${userData['name'] ?? ''}'
          ),
        ),
      ),
    );
  }
}

运行示例

确保你已经安装了Flutter SDK，并且配置好了开发环境。然后运行以下命令启动示例应用：

flutter run

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

1 回复

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


inkbook_googleonetapsignin 是一个用于在 Flutter 应用中实现 Google 一键登录的插件。这个插件可以帮助开发者快速集成 Google 登录功能，让用户能够方便地使用他们的 Google 账户登录应用。

以下是如何在 Flutter 项目中使用 inkbook_googleonetapsignin 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 inkbook_googleonetapsignin 插件的依赖。

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

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

2. 配置 Google API 控制台

在使用 Google 登录之前，你需要在 Google API 控制台 中创建一个项目并配置 OAuth 2.0 客户端 ID。

  1. 打开 Google API 控制台。
  2. 创建一个新项目或选择一个现有项目。
  3. 导航到 Credentials 页面。
  4. 点击 Create Credentials，然后选择 OAuth client ID。
  5. 选择 Android 或 iOS 作为应用类型，并填写相关信息。
  6. 获取 Client ID，稍后会在 Flutter 项目中用到。

3. 配置 Android 和 iOS 项目

Android 配置

  1. 打开 android/app/src/main/AndroidManifest.xml 文件。
  2. 在 <application> 标签内添加以下内容：
<meta-data
    android:name="com.google.android.gms.auth.api.signin.GoogleSignInOptionsClientId"
    android:value="@string/default_web_client_id" />
  1. 在 android/app/src/main/res/values/strings.xml 文件中添加 default_web_client_id：
<resources>
    <string name="default_web_client_id">YOUR_CLIENT_ID</string>
</resources>

iOS 配置

  1. 打开 ios/Runner/Info.plist 文件。
  2. 添加以下内容：
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>
<key>GoogleSignInClientID</key>
<string>YOUR_CLIENT_ID</string>

4. 在 Flutter 中使用插件

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

class GoogleSignInPage extends StatefulWidget {
  @override
  _GoogleSignInPageState createState() => _GoogleSignInPageState();
}

class _GoogleSignInPageState extends State<GoogleSignInPage> {
  String _userInfo = '';

  Future<void> _signInWithGoogle() async {
    try {
      final GoogleSignInAccount? googleUser = await InkbookGoogleOneTapSignIn.signIn();
      if (googleUser != null) {
        setState(() {
          _userInfo = 'User: ${googleUser.displayName}\nEmail: ${googleUser.email}';
        });
      }
    } catch (e) {
      setState(() {
        _userInfo = 'Error: $e';
      });
    }
  }

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

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

5. 运行应用

现在你可以运行你的 Flutter 应用，点击 “Sign in with Google” 按钮，用户将能够使用他们的 Google 账户登录。

6. 处理登出

如果需要处理登出，可以调用 InkbookGoogleOneTapSignIn.signOut() 方法。

Future<void> _signOut() async {
  await InkbookGoogleOneTapSignIn.signOut();
  setState(() {
    _userInfo = '';
  });
}
回到顶部