Flutter Web端身份认证插件google_identity_services_web的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter Web端身份认证插件 google_identity_services_web 的使用

google_identity_services_web 是一个用于在Flutter Web应用中实现与Google Identity服务交互的插件，主要提供对“Sign In With Google”功能的支持。下面将详细介绍该插件的使用方法，并给出完整的示例代码。

一、概述

google_identity_services_web 提供了与Google Identity的新版Sign In With Google SDK进行交互的能力。以下是其主要组成部分：

二、加载SDK

修改 index.html 文件（最高效）

在 web/index.html 文件中的 <head> 标签内添加如下脚本标签以直接引入SDK：

<head>
  <!-- 其他内容 -->
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>

这种方法是性能最优的选择，因为它允许页面加载时就准备好必要的JS库。

使用 loadWebSdk() 函数（按需加载）

如果希望按需加载SDK，则可以在项目入口文件 main.dart 中调用 loadWebSdk() 方法：

import 'package:google_identity_services_web/loader.dart' as gis;

void main() async {
  await gis.loadWebSdk(); // 加载GIS SDK
  runApp(MyApp());
}

注意：此方法仅适用于Web平台，对于跨平台应用程序需要通过条件编译来控制是否调用该函数。

三、使用SDK

当SDK成功加载后，可以通过导入相应的库来进行操作：

  • 对于认证（如登录），请使用：
    import 'package:google_identity_services_web/id.dart';
  • 对于授权，请使用：
    import 'package:google_identity_services_web/oauth2.dart';

每个库都会暴露一个对应的JS对象，例如 id 绑定到 google.accounts.id，oauth2 绑定到 google.accounts.oauth2。

四、完整示例代码

以下是一个完整的示例程序，展示了如何配置和使用 google_identity_services_web 插件进行Google登录：

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';
import 'package:google_identity_services_web/id.dart';
import 'package:google_identity_services_web/loader.dart' as gis;
import 'src/jwt.dart' as jwt; // 假设有一个解析JWT的工具类

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await gis.loadWebSdk(); // 加载GIS SDK
  id.setLogLevel('debug');

  final IdConfiguration config = IdConfiguration(
    client_id: 'your-google-client-id-goes-here.apps.googleusercontent.com',
    callback: onCredentialResponse,
    use_fedcm_for_prompt: true,
  );

  id.initialize(config);
  id.prompt(onPromptMoment);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Google Sign-In Example')),
        body: Center(child: Text('Please sign in with Google.')),
      ),
    );
  }
}

/// 处理从One Tap提示框返回的身份凭证响应
void onCredentialResponse(CredentialResponse o) {
  final Map<String, dynamic>? payload = jwt.decodePayload(o.credential);
  if (payload != null) {
    print('Hello, ${payload["name"]}');
    print(o.select_by);
    print(payload);
  } else {
    print('Could not decode ${o.credential}');
  }
}

/// 处理Prompt UI状态通知
void onPromptMoment(PromptMomentNotification o) {
  final MomentType type = o.getMomentType();
  print(type.runtimeType);
  print(type);
  print(type.index);
  print(o.getDismissedReason());
  print(o.getNotDisplayedReason());
  print(o.getSkippedReason());
}

五、常见问题及解决办法

在开发过程中可能会遇到一些问题，比如“给定的源不允许给定的客户端ID”。这通常是因为你在本地测试时没有正确设置授权JavaScript源。解决方案包括但不限于：

  • 确保已将 http://localhost 和 http://localhost:<port_number> 添加到OAuth同意屏幕下的“授权JavaScript源”列表中。
  • 设置HTTP响应头 Referrer-Policy 为 no-referrer-when-downgrade。

更多详细信息可以参阅官方文档。

六、浏览器兼容性

新的SDK引入了一些正在标准化的概念，因此可能不完全支持旧版本浏览器。关于最新浏览器兼容性的具体信息，请查阅官方文档。

七、测试

为了确保插件的功能正常工作，可以通过运行单元测试来进行验证：

dart test -p chrome

以上就是关于 google_identity_services_web 插件的基本介绍和使用指南。希望这些信息能帮助您顺利集成Google登录功能到您的Flutter Web项目中。如果有任何疑问或需要进一步的帮助，请随时提问！


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter Web端使用google_identity_services_web插件进行身份认证的代码示例。这个插件允许你通过Google Identity Services（GIDS）在Flutter Web应用中实现Google登录。

首先，你需要在你的pubspec.yaml文件中添加google_identity_services_web依赖：

dependencies:
  flutter:
    sdk: flutter
  google_identity_services_web: ^x.y.z  # 请替换为最新版本号

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

接下来，在你的Flutter项目中，你需要进行以下步骤来配置和实现Google登录：

  1. 配置web/index.html：

确保你的web/index.html文件中包含Google Identity Services所需的meta标签和脚本。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flutter Web Google Login</title>
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
  <script>
    window.flutterWebRenderer = 'canvaskit';
  </script>
  <script src="main.dart.js" defer></script>
</body>
</html>
  1. 在Dart代码中实现Google登录：

在你的Flutter Web应用中，你可以使用google_identity_services_web插件来初始化Google登录客户端并处理登录流程。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GoogleLoginPage(),
    );
  }
}

class GoogleLoginPage extends StatefulWidget {
  @override
  _GoogleLoginPageState createState() => _GoogleLoginPageState();
}

class _GoogleLoginPageState extends State<GoogleLoginPage> {
  final GoogleIdentityService _googleIdentityService = GoogleIdentityService();
  String? _userEmail;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Login Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'User Email: $_userEmail',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                try {
                  final GoogleUserCredential credential = await _googleIdentityService.signIn();
                  setState(() {
                    _userEmail = credential.email;
                  });
                } catch (e) {
                  print('Google sign-in failed: $e');
                }
              },
              child: Text('Sign in with Google'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮用于触发Google登录。当用户点击按钮时，_googleIdentityService.signIn()方法会被调用，如果用户成功登录，他们的电子邮件地址将被显示在屏幕上。

注意：

  • 在实际部署中，你需要配置Google Cloud Console以获取正确的客户端ID，并将其传递给GoogleIdentityService的初始化方法（如果插件支持这种配置）。
  • 由于google_identity_services_web插件的具体API可能会随着版本更新而变化，请参考最新的官方文档和插件源代码来获取最准确的使用方法和配置信息。

希望这个示例能帮助你在Flutter Web应用中实现Google身份认证。

回到顶部