Flutter谷歌登录插件google_login的使用

Flutter谷歌登录插件google_login的使用

Google Login

一个用于通过Firebase进行Google登录的Flutter包。

特性

  • 使用Firebase实现Google登录功能

使用

该包通过调用此包中的authService.signInWithGoogle()方法来实现Google登录。首先,你需要将你的Flutter应用与Firebase关联,并添加运行此包所需的依赖项。

开始使用

AuthServiceForGoogle()

导入

import 'package:google_login/google_login_module.dart';

// 实例化AuthServiceForGoogle

final authService = AuthServiceForGoogle();

// 调用signInWithGoogle方法以启动Google登录过程

authService.signInWithGoogle()

依赖项

为了实现Google登录,该包在yaml文件中包含以下依赖项,未来可能需要升级这些依赖项。

dependencies:
  firebase_auth: ^4.15.2
  google_sign_in: ^6.2.0

安装

要在项目中使用该包进行Google登录,请在pubspec.yaml文件中添加以下内容:

dependencies:
  google_login: ^1.0.3

完整示例代码

以下是一个完整的示例代码,展示如何在Flutter应用中集成Google登录功能:

import 'package:flutter/material.dart';
import 'package:google_login/google_login_module.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Login Example'),
        ),
        body: Center(
          child: GoogleLoginButton(),
        ),
      ),
    );
  }
}

class GoogleLoginButton extends StatefulWidget {
  [@override](/user/override)
  _GoogleLoginButtonState createState() => _GoogleLoginButtonState();
}

class _GoogleLoginButtonState extends State<GoogleLoginButton> {
  final AuthServiceForGoogle authService = AuthServiceForGoogle();
  
  Future<void> _handleSignIn() async {
    try {
      // 调用signInWithGoogle方法以启动Google登录过程
      await authService.signInWithGoogle();
      print("Google Sign In Successful");
    } catch (error) {
      print("Error signing in with Google: $error");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _handleSignIn,
      child: Text('Sign in with Google'),
    );
  }
}

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

1 回复

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


在Flutter中使用Google登录功能,可以通过google_sign_in插件来实现。google_sign_in是官方提供的一个插件,用于在Flutter应用中集成Google登录功能。以下是使用google_sign_in插件的详细步骤:

1. 添加依赖

首先,在pubspec.yaml文件中添加google_sign_in依赖:

dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^5.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. 选择应用类型为Web applicationAndroid,并填写必要的信息。

  6. 对于Android应用,你需要提供SHA-1指纹和包名。可以使用以下命令获取SHA-1指纹:

    keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
    
  7. 创建OAuth客户端ID后,你会得到Client ID,稍后会在Flutter应用中使用。

3. 配置Android项目

android/app/src/main/AndroidManifest.xml文件中添加以下内容:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <application
        android:label="Your App"
        android:icon="@mipmap/ic_launcher">
        <!-- Add the following meta-data tag -->
        <meta-data
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|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>
        </activity>
    </application>
</manifest>

4. 配置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>GoogleClientID</key>
<string>YOUR_CLIENT_ID</string>

5. 编写Flutter代码

接下来,你可以在Flutter应用中使用google_sign_in插件来实现Google登录功能。

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

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

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

class GoogleSignInDemo extends StatefulWidget {
  @override
  _GoogleSignInDemoState createState() => _GoogleSignInDemoState();
}

class _GoogleSignInDemoState extends State<GoogleSignInDemo> {
  GoogleSignIn _googleSignIn = GoogleSignIn(scopes: ['email']);

  Future<void> _handleSignIn() async {
    try {
      GoogleSignInAccount? account = await _googleSignIn.signIn();
      if (account != null) {
        print("User signed in: ${account.displayName}");
      }
    } catch (error) {
      print("Error signing in: $error");
    }
  }

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

  @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: _handleSignIn,
              child: Text('Sign in with Google'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _handleSignOut,
              child: Text('Sign out'),
            ),
          ],
        ),
      ),
    );
  }
}

6. 运行应用

现在你可以运行应用并测试Google登录功能。点击“Sign in with Google”按钮会弹出Google登录界面,登录成功后会在控制台输出用户信息。

7. 处理用户信息

登录成功后,你可以通过GoogleSignInAccount对象获取用户的详细信息,如displayNameemailphotoUrl等。

GoogleSignInAccount? account = await _googleSignIn.signIn();
if (account != null) {
  print("User signed in: ${account.displayName}");
  print("Email: ${account.email}");
  print("Photo URL: ${account.photoUrl}");
}

8. 处理注销

你还可以通过调用_googleSignIn.signOut()方法来注销用户。

await _googleSignIn.signOut();
print("User signed out");
回到顶部