Flutter一键登录插件google_one_tap_sign_in的使用

Flutter一键登录插件google_one_tap_sign_in的使用

Google One Tap Sign In (Android)

一个用于实现Google一键登录功能的Flutter插件。

开始使用

要使用Google一键登录功能,你需要确保已经注册了你的应用程序。

1. 添加依赖到pubspec.yaml文件

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

dependencies:  
  google_one_tap_sign_in: [any]

2. 添加Google服务

在项目根目录下的android/build.gradle文件中添加以下内容:

classpath 'com.google.gms:google-services:[x.x.x]'

3. 导入插件

在需要使用的Dart文件中导入插件:

import 'package:google_one_tap_sign_in/google_one_tap_sign_in.dart';

4. 处理简单方法

定义一个方法来启动Google一键登录:

// Your Web Client Id  
final String _webClientId = "[YOUR-WEB-CLIENT-ID]";

void _onSignIn() async {
  var data = await GoogleOneTapSignIn.startSignIn(webClientId: _webClientId);
  if (data != null) {
    // 处理返回的数据
    print("Id Token : ${data.idToken ?? "-"}");
    print("ID : ${data.id ?? "-"}");
  }
}

5. 处理带条件的方法

定义一个方法来处理带条件的登录过程:

// Your Web Client Id  
final String _webClientId = "[YOUR-WEB-CLIENT-ID]";

void _onSignInWithHandle() async {
  var result = await GoogleOneTapSignIn.handleSignIn(webClientId: _webClientId);

  if (result.isTemporaryBlock) {
    // 告诉用户当前状态为临时阻塞
    print("Temporary BLOCK");
  }

  if (result.isCanceled) {
    // 告诉用户登录已取消
    print("Canceled");
  }

  if (result.isFail) {
    // 告诉用户登录失败
  }

  if (result.isOk) {
    // 处理登录成功后的数据
    print("OK");
    print("Id Token : ${result.data?.idToken ?? "-"}");
    print("Email : ${result.data?.username ?? "-"}");
  }
}

示例代码

以下是一个完整的示例代码,展示了如何在Flutter应用中使用google_one_tap_sign_in插件:

/// createdby Daewu Bintara
/// Tuesday, 04/01/22 18:29
/// Enjoy coding ☕

import 'dart:io';

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  // Your Web Client Id
  final String _webClientId = "[YOUR-WEB-CLIENT-ID]";

  File? _image;

  [@override](/user/override)
  void initState() {
    super.initState();
    print("INIT STATE");
  }

  void _onSignIn() async {
    var data = await GoogleOneTapSignIn.startSignIn(webClientId: _webClientId);
    if (data != null) {
      /// 处理返回的数据
      print("Id Token : ${data.idToken ?? "-"}");
      print("ID : ${data.id ?? "-"}");
    }
  }

  void _onSignInWithHandle() async {
    var result = await GoogleOneTapSignIn.handleSignIn(webClientId: _webClientId);

    if (result.isTemporaryBlock) {
      // 告诉用户当前状态为临时阻塞
      print("Temporary BLOCK");
    }

    if (result.isCanceled) {
      // 告诉用户登录已取消
      print("Canceled");
    }

    if (result.isFail) {
      // 告诉用户登录失败
    }

    if (result.isOk) {
      // 处理登录成功后的数据
      print("OK");
      print("Id Token : ${result.data?.idToken ?? "-"}");
      print("Email : ${result.data?.username ?? "-"}");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Google One Tap Sign In'),
        ),
        body: Center(
          child: ListView(
            shrinkWrap: true,
            children: [
              TextButton(
                child: const Text("Sign In"),
                onPressed: () => _onSignIn(),
              ),
              TextButton(
                child: const Text("Sign In With Handle"),
                onPressed: () => _onSignInWithHandle(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是一个关于如何在Flutter项目中集成和使用google_one_tap_sign_in插件来实现一键登录功能的代码案例。

首先,确保你已经在pubspec.yaml文件中添加了google_one_tap_sign_in依赖:

dependencies:
  flutter:
    sdk: flutter
  google_one_tap_sign_in: ^版本号  # 请替换为最新版本号

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

接下来,你需要配置Google的OAuth 2.0客户端ID。在你的android/app/src/main/AndroidManifest.xml文件中,确保你已经有以下配置(替换YOUR_CLIENT_ID为你的实际客户端ID):

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    <intent-filter>
        <action android:name="com.google.android.gms.auth.api.signin.GOOGLE_SIGN_IN" />
    </intent-filter>
    <meta-data
        android:name="com.google.android.gms.client.measurement.app_id"
        android:value="YOUR_APP_ID" />
    <meta-data
        android:name="com.google.android.gms.auth.api.signin.GOOGLE_LOGIN_ENABLED"
        android:value="true" />
    <meta-data
        android:name="com.google.android.gms.auth.api.signin.GOOGLE_CLIENT_ID"
        android:value="YOUR_CLIENT_ID.apps.googleusercontent.com" />
</activity>

对于iOS,你需要在ios/Runner/Info.plist文件中添加以下配置:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>
<key>GOOGLE_APP_ID</key>
<string>YOUR_APP_ID</string>
<key>GCLIENT_ID</key>
<string>YOUR_CLIENT_ID.apps.googleusercontent.com</string>
<key>GADApplicationIdentifier</key>
<string>YOUR_ADMOB_APP_ID</string>  <!-- 如果使用AdMob,则添加此行 -->

然后,在你的Flutter项目中,你可以按照以下方式使用google_one_tap_sign_in插件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google One Tap Sign In Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GoogleOneTapSignIn? _googleOneTapSignIn;
  GoogleUser? _user;

  @override
  void initState() {
    super.initState();
    _googleOneTapSignIn = GoogleOneTapSignIn(
      clientId: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
      scopes: [
        'email',
        'profile',
      ],
    );

    _googleOneTapSignIn!.onUserSignedIn.listen((user) {
      setState(() {
        _user = user;
      });
      print('User signed in: ${user.email}');
    });

    _googleOneTapSignIn!.onUserSignedOut.listen((_) {
      setState(() {
        _user = null;
      });
      print('User signed out');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google One Tap Sign In Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _user != null ? 'Welcome, ${_user!.displayName}!' : 'Sign in with Google',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                try {
                  await _googleOneTapSignIn!.signIn();
                } catch (e) {
                  print('Sign in error: $e');
                }
              },
              child: Text('Sign In'),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何初始化GoogleOneTapSignIn实例,监听用户登录和登出事件,并在UI中提供一个按钮来触发一键登录流程。请确保替换YOUR_CLIENT_ID为你在Google Cloud Console中创建的OAuth 2.0客户端ID。

希望这个代码案例对你有帮助!

回到顶部