目录

Flutter 应用实现 google 登录应用

Flutter 应用实现 google 登录应用

开通 google cloud api

配置 flutter

flutter pub add google_sign_in

web

修改 web/index.html,在 head 添加 web 端的 clientid

1
2
<meta name="google-signin-client_id"
    content="xxxx.apps.googleusercontent.com">

Android

./android/build.gradle add:

1
2
3
4
5
6
buildscript {
    dependencies {
        // Add this line
        classpath 'com.google.gms:google-services:4.3.10'
    }
}

./android/app/build.gradle :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

plugins {
  //添加
    id "com.google.gms.google-services"
}

//添加:
dependencies { 
    // Add this dependency
    implementation 'com.google.android.gms:play-services-auth:19.2.0'
}

./android/app/src/main/AndroidManifext.xml

1
2
3
4
5
6
7
 <application 
         android:usesCleartextTraffic="true"> 

         <meta-data
            android:name="com.google.android.gms.auth.api.signin.v2.API_KEY"
            android:value="xxxxxb.apps.googleusercontent.com" /> 
    </application>

iOS

TODO: 待补充

MacOS

TODO: 待补充

windows

TODO: 待补充

代码

main.dart

1
2
3
4

import 'package:google_sign_in/google_sign_in.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool _isLeftPanelOpen = true;

  GoogleSignInAccount? _currentUser;
  final GoogleSignIn _googleSignIn = GoogleSignIn( 
    scopes: [
      'email',
      'https://www.googleapis.com/auth/userinfo.profile',
      'https://www.googleapis.com/auth/userinfo.email',
      'https://www.googleapis.com/auth/user.phonenumbers.read',
      'https://www.googleapis.com/auth/user.gender.read',
      'https://www.googleapis.com/auth/user.addresses.read',
    ],
  );

  @override
  void initState() {
.....
    ```


    ```dart

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

  Future<void> _handleSignIn() async {
    try {
      GoogleSignInAccount? account = await _googleSignIn.signIn();
      GoogleSignInAuthentication authentication = await account!.authentication;
      String? idToken = authentication.idToken;

      // Send token to the server
      final response = await http.post(
        Uri.parse('https://your-server.com/api/auth/google'),
        headers: {'Content-Type': 'application/json'},
        body: jsonEncode({'token': idToken}),
      );

      if (response.statusCode == 200) {
        // Handle successful response
        final data = jsonDecode(response.body);
        print('Server response: $data');
      } else {
        // Handle error response
        print('Server error: ${response.statusCode}');
      }
    } catch (error) {
      print('Sign-In Error: $error');
    }
  }

  Future<void> _handleSignOut() async {
    await _googleSignIn.disconnect();
  }
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Widget _buildHeaderUserPanel(GoogleSignInAccount? user) {
  return Container(
    child: user != null
        ? Row(
            children: [
              RuiLoginStatusPanel(
                userName: user.displayName ?? "",
                // userPhone: user,
                userImage: user.photoUrl ?? "",
                userEmail: user.email,
              ),
              GoogleUserCircleAvatar(identity: user),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _handleSignOut,
                child: Text('Sign Out'),
              ),
            ],
          )
        : ElevatedButton(
            onPressed: _handleSignIn,
            child: Text('Sign In with Google'),
          ),
  );
}