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
更多关于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。
希望这个代码案例对你有帮助!

