Flutter – Google 登录 UI 和身份验证

Flutter是一种流行的跨平台移动应用开发框架，可以帮助开发者轻松开发高质量的移动应用。Google登录UI和身份验证是一个重要的功能，可以让用户使用他们的Google账号登录应用程序。本文将介绍如何使用Flutter实现Google登录UI和身份验证功能。

步骤1：配置Flutter插件

要使用Google登录UI和身份验证，需要在Flutter项目中安装Google Sign-In插件。在pubspec.yaml文件中添加以下依赖项

google_sign_in: ^4.5.1

步骤2：创建Google登录按钮

创建一个按钮来触发Google登录:

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

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  GoogleSignIn _googleSignIn = GoogleSignIn(
    scopes: [
      'email',
    ]
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Login'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            _handleSignIn();
          },
          child: Text('Login with Google'),
        ),
      ),
    );
  }

  void _handleSignIn() async {
    try {
      await _googleSignIn.signIn();
      // Login Successful
    } catch (error) {
      print(error);
    }
  }
}

当用户点击登录按钮时，_handleSignIn()方法会被调用。该方法使用Google Sign-In插件进行身份验证。如果登录成功，await _googleSignIn.signIn();方法将返回用户的详细信息。

步骤3：显示用户详细信息

登录成功后，将显示用户的详细信息。以下是如何显示用户详细信息:

GoogleSignInAccount _currentUser;

@override
void initState() {
  super.initState();
  _googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount account) {
    setState(() {
      _currentUser = account;
    });
  });
  _googleSignIn.signInSilently();
}

// Display User Info
body: Center(
  child: _currentUser != null
      ? Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.network(_currentUser.photoUrl),
          Text(_currentUser.displayName),
          Text(_currentUser.email),
          RaisedButton(
            onPressed: () {
              _googleSignIn.signOut();
            },
            child: Text('Logout'),
          ),
        ],
      )
      : RaisedButton(
        onPressed: () {
          _handleSignIn();
        },
        child: Text('Login with Google'),
      ),
),

在initState()生命周期方法中，使用_googleSignIn.onCurrentUserChanged监听器获取当前用户的详细信息。通过显示_currentUser中包含的用户信息来显示用户详细信息。

如果要注销用户，只需调用_googleSignIn.signOut()方法即可。

结论

使用Flutter实现Google登录UI和身份验证功能非常容易。只需简单的配置Flutter插件，创建一个按钮来触发Google登录，获取用户详细信息并显示，就可以让用户使用他们的Google账号登录应用程序了。