Flutter谷歌账号登录插件google_sign_in的使用

插件介绍

google_sign_in 是一个用于Flutter应用集成Google登录功能的插件。它允许用户通过Google账户进行身份验证，从而简化了应用程序中的用户认证流程。该插件支持多个平台，包括Android、iOS、macOS和Web。

平台支持

平台集成

Android集成

要访问Google登录，您需要确保注册您的应用程序。除非您使用的是需要google-services.json文件的Google服务，否则不需要包含此文件。但您确实需要在Google Cloud Platform API管理器中启用所需的OAuth API。例如，如果您想模仿Google登录示例应用的行为，则需要启用Google People API。

请确保在控制台中填写所有必填字段以完成OAuth同意屏幕，否则可能会遇到APIException错误。

iOS集成

请参考Google Sign-In for iOS的集成说明。

从2020年6月30日起，提交到Apple App Store的应用程序如果使用登录服务，则也必须提供“使用Apple登录”选项。可以考虑使用来自pub.dev的Apple登录插件，如sign_in_with_apple。

macOS集成

请参考Google Sign-In for macOS的集成说明。

Web集成

新SDK已将身份验证与授权完全分离，因此signIn和signInSilently不再授权OAuthscopes。Flutter应用程序必须能够检测用户授予的权限范围，并确认这些授权是否仍然有效。有关详细信息，请参阅google_sign_in_web包。

使用方法

导入插件

要使用此插件，请按照插件安装说明操作。

使用插件

初始化GoogleSignIn时指定所需的权限范围：

const List<String> scopes = <String>[
  'email',
  'https://www.googleapis.com/auth/contacts.readonly',
];

GoogleSignIn _googleSignIn = GoogleSignIn(
  // 可选clientId
  // clientId: 'your-client_id.apps.googleusercontent.com',
  scopes: scopes,
);

完整的可用权限列表见这里。

现在可以在Dart代码中使用GoogleSignIn类进行身份验证：

Future<void> _handleSignIn() async {
  try {
    await _googleSignIn.signIn();
  } catch (error) {
    print(error);
  }
}

在Web端，建议使用Google登录按钮（而不是signIn方法），以确保用户身份验证包含有效的idToken。

处理权限范围和增量授权

检查是否授予了权限范围

用户可能不会授予应用程序请求的所有权限范围。特别是在Web端，signIn、silentSignIn或renderButton小部件不会再授予任何权限范围。应用程序必须能够：

• 检测经过身份验证的用户是否已授权所需权限。
• 确认几分钟前授予的权限是否仍然有效。

使用canAccessScopes方法可以实现上述检查：

bool isAuthorized = account != null;
if (kIsWeb && account != null) {
  isAuthorized = await _googleSignIn.canAccessScopes(scopes);
}

请求更多权限

如果应用程序确定用户尚未授予所需权限，应发起授权请求（记住，在Web平台上，此请求必须由用户交互触发，如按钮点击）：

Future<void> _handleAuthorizeScopes() async {
  final bool isAuthorized = await _googleSignIn.requestScopes(scopes);
  if (isAuthorized) {
    unawaited(_handleGetContact(_currentUser!));
  }
}

requestScopes返回一个布尔值，表示用户是否授予了所有请求的权限。

一旦应用程序确定当前用户isAuthorized可以访问所需的服务权限范围，就可以继续正常运行。

授权过期

在Web端，accessToken不再刷新，它会在3600秒（一小时）后过期，因此应用程序需要能够处理失败的REST请求，并更新UI以提示用户进行新的授权轮次。

示例代码

以下是完整的示例代码，展示了如何使用google_sign_in插件实现Google登录功能：

import 'dart:async';
import 'dart:convert' show json;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:http/http.dart' as http;

// The scopes required by this application.
const List<String> scopes = <String>[
  'email',
  'https://www.googleapis.com/auth/contacts.readonly',
];

GoogleSignIn _googleSignIn = GoogleSignIn(
  // Optional clientId
  // clientId: 'your-client_id.apps.googleusercontent.com',
  scopes: scopes,
);

void main() {
  runApp(
    const MaterialApp(
      title: 'Google Sign In',
      home: SignInDemo(),
    ),
  );
}

class SignInDemo extends StatefulWidget {
  const SignInDemo({super.key});

  @override
  State createState() => _SignInDemoState();
}

class _SignInDemoState extends State<SignInDemo> {
  GoogleSignInAccount? _currentUser;
  bool _isAuthorized = false; // has granted permissions?
  String _contactText = '';

  @override
  void initState() {
    super.initState();

    _googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount? account) async {
      bool isAuthorized = account != null;
      if (kIsWeb && account != null) {
        isAuthorized = await _googleSignIn.canAccessScopes(scopes);
      }

      setState(() {
        _currentUser = account;
        _isAuthorized = isAuthorized;
      });

      if (isAuthorized) {
        unawaited(_handleGetContact(account!));
      }
    });

    _googleSignIn.signInSilently();
  }

  Future<void> _handleGetContact(GoogleSignInAccount user) async {
    setState(() {
      _contactText = 'Loading contact info...';
    });
    final http.Response response = await http.get(
      Uri.parse('https://people.googleapis.com/v1/people/me/connections'
          '?requestMask.includeField=person.names'),
      headers: await user.authHeaders,
    );
    if (response.statusCode != 200) {
      setState(() {
        _contactText = 'People API gave a ${response.statusCode} '
            'response. Check logs for details.';
      });
      print('People API ${response.statusCode} response: ${response.body}');
      return;
    }
    final Map<String, dynamic> data = json.decode(response.body) as Map<String, dynamic>;
    final String? namedContact = _pickFirstNamedContact(data);
    setState(() {
      if (namedContact != null) {
        _contactText = 'I see you know $namedContact!';
      } else {
        _contactText = 'No contacts to display.';
      }
    });
  }

  String? _pickFirstNamedContact(Map<String, dynamic> data) {
    final List<dynamic>? connections = data['connections'] as List<dynamic>?;
    final Map<String, dynamic>? contact = connections?.firstWhere(
      (dynamic contact) => (contact as Map<Object?, dynamic>)['names'] != null,
      orElse: () => null,
    ) as Map<String, dynamic>?;
    if (contact != null) {
      final List<dynamic> names = contact['names'] as List<dynamic>;
      final Map<String, dynamic>? name = names.firstWhere(
        (dynamic name) => (name as Map<Object?, dynamic>)['displayName'] != null,
        orElse: () => null,
      ) as Map<String, dynamic>?;
      if (name != null) {
        return name['displayName'] as String?;
      }
    }
    return null;
  }

  Future<void> _handleSignIn() async {
    try {
      await _googleSignIn.signIn();
    } catch (error) {
      print(error);
    }
  }

  Future<void> _handleAuthorizeScopes() async {
    final bool isAuthorized = await _googleSignIn.requestScopes(scopes);
    setState(() {
      _isAuthorized = isAuthorized;
    });
    if (isAuthorized) {
      unawaited(_handleGetContact(_currentUser!));
    }
  }

  Future<void> _handleSignOut() => _googleSignIn.disconnect();

  Widget _buildBody() {
    final GoogleSignInAccount? user = _currentUser;
    if (user != null) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          ListTile(
            leading: GoogleUserCircleAvatar(
              identity: user,
            ),
            title: Text(user.displayName ?? ''),
            subtitle: Text(user.email),
          ),
          const Text('Signed in successfully.'),
          if (_isAuthorized) ...<Widget>[
            Text(_contactText),
            ElevatedButton(
              child: const Text('REFRESH'),
              onPressed: () => _handleGetContact(user),
            ),
          ],
          if (!_isAuthorized) ...<Widget>[
            const Text('Additional permissions needed to read your contacts.'),
            ElevatedButton(
              onPressed: _handleAuthorizeScopes,
              child: const Text('REQUEST PERMISSIONS'),
            ),
          ],
          ElevatedButton(
            onPressed: _handleSignOut,
            child: const Text('SIGN OUT'),
          ),
        ],
      );
    } else {
      return Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          const Text('You are not currently signed in.'),
          buildSignInButton(
            onPressed: _handleSignIn,
          ),
        ],
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Sign In'),
      ),
      body: ConstrainedBox(
        constraints: const BoxConstraints.expand(),
        child: _buildBody(),
      ),
    );
  }
}

这个示例代码展示了如何使用google_sign_in插件实现Google登录功能，并获取用户的联系人信息。希望这对您有所帮助！