Flutter Google认证插件djangoflow_auth_google的使用

DjangoFlow Auth Google Package Logo

🔑 DjangoFlow Auth Google Package 🔑

djangoflow_auth_googledjangoflow_auth 的 Google 身份验证提供程序。它允许您的 Flutter 应用程序无缝集成 Google 登录功能。使用 Google 签入功能安全地管理用户身份验证。简单有效! 🔒

🚀 特性 🚀

  • djangoflow_auth 集成 Google 签入。
  • 为您的 Flutter 应用程序提供易于使用的 Google 身份验证 API。
  • 注销功能以安全断开 Google 签入。

📦 安装 📦

在您的 `pubspec.yaml` 文件中添加 `djangoflow_auth_google` 包: ```yaml dependencies: djangoflow_auth: <latest_version> djangoflow_auth_google: <latest_version> google_sign_in: <latest_version> # 添加适当的 google_sign_in 版本 ``` 运行 `flutter pub get` 来获取包。

注意:请遵循 google_sign_in 包进行平台相关的配置。

🔧 使用 🔧

要使用 `djangoflow_auth_google` 执行 Google 身份验证,可以使用 `GoogleSocialLogin` 类: ```dart import 'package:djangoflow_auth/djangoflow_auth.dart'; import 'package:djangoflow_auth_google/djangoflow_auth_google.dart'; import 'package:google_sign_in/google_sign_in.dart';

void main() async { final googleSignIn = GoogleSignIn(scopes: [‘email’]); // 设置 Google 签入范围 final googleSocialLogin = GoogleSocialLogin(googleSignIn: googleSignIn);

// 执行 Google 签入
final googleAccount = await googleSocialLogin.login();

// 处理 Google 账户或执行进一步操作
if (googleAccount != null) {
  // 成功使用 Google 登录
  // 处理用户账户或继续您的应用程序
} else {
  // Google 签入失败
  // 处理错误
}

// 断开 Google 签入
await googleSocialLogin.logout();

}


<p>有关如何使用 <code>djangoflow_auth</code> 的详细示例,请参阅: <a href="https://pub.dev/packages/djangoflow_auth#setting-up-authcubit">https://pub.dev/packages/djangoflow_auth#setting-up-authcubit</a></p>

<h2>🌐 Google 签入按钮变体 🌐</h2>
`djangoflow_auth_google` 包提供了基于平台的不同按钮实现:
<ul>
  <li><strong>Web</strong>: <strong>GoogleSignInWebButton</strong> - 自动处理 Web 平台上的 Google 签入,遵循 GSI API。(底层使用 <code>GoogleSignInButton</code>)</li>
  <li><strong>移动(iOS/Android)</strong>: <strong>GoogleSignInButton</strong> - 一个可自定义的 Flutter 按钮,用于在移动平台上进行 Google 签入。</li>
</ul>

<h2>🛠️ 配置和自定义 🛠️</h2>
要在 **Web** 上自定义 Google 签入按钮的外观,您可以使用提供的 `GSIButtonConfigWrapper` 类:
```dart
import 'package:djangoflow_auth_google/djangoflow_auth_google.dart';

final config = GSIButtonConfigWrapper(
  type: GSIWrapperButtonType.standard,
  theme: GSIWrapperButtonTheme.filledBlue,
  size: GSIWrapperButtonSize.large,
  text: GSIWrapperButtonText.signinWith,
);

// 将配置传递给 Google 签入按钮
final googleSignInButton = GoogleSignInButton(
  configurationWrapper: config,
  onPressed: () {
    // 处理按钮按下事件
  },
);

您可以自定义按钮类型、主题、大小、文本、形状、徽标对齐方式、区域设置和最小宽度。

🌐 Web 上的 Google 签入按钮 🌐

对于 Web 平台,您可以使用 `GoogleSignInWebButton` 组件,该组件会检测当前用户的授权状态,并有条件地显示 Google 签入按钮或占位符。`enableSilentLogin` 参数可用于启用 Web 上的静默登录。 ```dart import 'package:djangoflow_auth_google/djangoflow_auth_google.dart'; // 使用 BlocProvider 可以这样写 final googleSignIn = (context .read<AuthCubit>() .socialLogins .getSocialLoginByProvider( ProviderEnum.googleOauth2, ) as GoogleSocialLogin) .googleSignIn;

GoogleSignInWebButton( googleSignIn: googleSignIn, enableSilentLogin: true, onSignIn: (GoogleSignInAccount? googleSignInAccount) { // 处理成功的 Google 签入 }, )


<h2>🌟 示例 🌟</h2>
[示例](https://github.com/djangoflow/djangoflow-examples/tree/main/simple_auth)

<h2>👏 贡献和问题 👏</h2>
欢迎贡献、报告错误和提出功能请求!请随时提交拉取请求或在 <a href="https://github.com/djangoflow/flutter-djangoflow" rel="ugc">GitHub仓库</a> 上打开一个问题。
</section>

更多关于Flutter Google认证插件djangoflow_auth_google的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Google认证插件djangoflow_auth_google的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


djangoflow_auth_google 是一个用于在 Flutter 应用中集成 Google 认证的插件。它简化了与 Google 认证的集成过程,并提供了便捷的 API 来处理用户登录和认证。

安装

首先,你需要在 pubspec.yaml 文件中添加 djangoflow_auth_google 依赖:

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

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

配置

1. 配置 Google Cloud 项目

  1. 前往 Google Cloud Console.
  2. 创建一个新的项目或选择一个现有的项目。
  3. 在左侧菜单中选择 API & Services > Credentials.
  4. 点击 Create Credentials 并选择 OAuth client ID.
  5. 选择应用类型为 AndroidiOS,并填写相应的包名和 SHA-1 指纹(对于 Android)。
  6. 记下生成的 Client IDClient Secret,稍后会在 Flutter 应用中使用。

2. 配置 Flutter 项目

Android
  1. android/app/build.gradle 文件中,确保 minSdkVersion 至少为 21。
  2. android/app/src/main/AndroidManifest.xml 文件中,添加以下内容:
<application
    android:label="YourAppName"
    android:icon="@mipmap/ic_launcher">
    <meta-data
        android:name="com.google.android.gms.auth.api.signin.GoogleSignInOptions"
        android:value="@string/default_web_client_id" />
    <activity
        android:name="com.google.android.gms.auth.api.signin.GoogleSignInActivity"
        android:exported="true" />
</application>
iOS
  1. 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>LSApplicationQueriesSchemes</key>
<array>
    <string>googlechrome</string>
    <string>comgooglechrome</string>
</array>

使用

初始化

main.dart 文件中初始化 djangoflow_auth_google

import 'package:djangoflow_auth_google/djangoflow_auth_google.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await DjangoflowAuthGoogle().initialize(
    webClientId: 'YOUR_WEB_CLIENT_ID',
    iosClientId: 'YOUR_IOS_CLIENT_ID',
    androidClientId: 'YOUR_ANDROID_CLIENT_ID',
  );

  runApp(MyApp());
}

登录

使用 DjangoflowAuthGoogle().signIn() 来启动 Google 登录流程:

import 'package:djangoflow_auth_google/djangoflow_auth_google.dart';

void signIn() async {
  try {
    final googleUser = await DjangoflowAuthGoogle().signIn();
    print('User: ${googleUser.displayName}');
    print('Email: ${googleUser.email}');
    print('Id: ${googleUser.id}');
  } catch (e) {
    print('Error: $e');
  }
}

登出

使用 DjangoflowAuthGoogle().signOut() 来登出用户:

void signOut() async {
  await DjangoflowAuthGoogle().signOut();
  print('User signed out');
}

获取当前用户

你可以通过 DjangoflowAuthGoogle().currentUser 获取当前登录的用户:

void checkUser() {
  final currentUser = DjangoflowAuthGoogle().currentUser;
  if (currentUser != null) {
    print('User is signed in: ${currentUser.displayName}');
  } else {
    print('No user is signed in');
  }
}

处理认证状态

你可以使用 DjangoflowAuthGoogle().authStateChanges() 来监听用户的认证状态变化:

void listenAuthState() {
  DjangoflowAuthGoogle().authStateChanges().listen((user) {
    if (user != null) {
      print('User is signed in: ${user.displayName}');
    } else {
      print('No user is signed in');
    }
  });
}
回到顶部