[Flutter] 구글로 로그인 (google_sign_in 7.x), 파이어베이스 Authentication

- 들어가며

이 글에서는

구글로 로그인(google_sign_in 7.1.0) 을 활용하고

파이어베이스 Authentication 도 사용해보겠습니다

 

- 파이어베이스 설정

파이어베이스 설정은 다루지 않습니다

파이어베이스에서 iOS, AOS 추가하고 SHA1 값 추가하는 등

google-services.json 설정 - AOS

info.plist 설정 - iOS

검색해보면 많이 나오기도 하고 좋은 글들이 많네요

 

- Flutter code

바로 플러터 코드 작성으로 넘어가겠습니다

우선 패키지를 추가해줍니다.

flutter pub add firebase_core
flutter pub add firebase_auth
flutter pub add google_sign_in

저의 경우 버전이 이렇게 추가되었습니다.

 

자 여기 이 부분이 제가 글을 작성하게 된 계기입니다

google_sign_in: ^7.1.0

 

google_sign_in 이 7번대로 올라가면서

기존에 작성하던 flutter 코드와는 조금 달라진 부분이 많아졌습니다.

 

그냥 이전 버전을 써도 됐으나 새버전이 나온이상 안써볼수 없죠

 

- main.dart

import 'package:dotori/widget/home.dart';
import 'package:dotori/widget/login/login.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(); // Firebase 초기화

  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]).then((
    fn,
  ) {
    runApp(const Dotori());
  });
}

class Dotori extends StatelessWidget {
  const Dotori({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dotori',
      initialRoute: '/login', // 앱 시작 경로
      routes: {
        '/login': (context) => Login(), // 로그인 페이지
        '/home': (context) => Home(), // 메인 페이지
      },
    );
  }
}

 

앱 시작 시, login 페이지로 보내고

login 성공 시, home 으로 랜딩할 예정입니다.

 

- login.dart

import 'package:dotori/widget/login/google_login.dart';
import 'package:flutter/material.dart';

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

  @override
  State<Login> createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GoogleLogin(),
            ],
          ),
        ),
      ),
    );
  }
}

 

로그인 랜딩 페이지 입니다.

구글로그인 뿐만 아니라 다른 소셜 로그인도 구현할 예정이라서 분기처리하였습니다.

 

 

- google_login.dart

import 'package:dotori/widget/home.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

class GoogleLogin extends StatefulWidget {
  @override
  _GoogleLoginState createState() => _GoogleLoginState();
}

class _GoogleLoginState extends State<GoogleLogin> {
  final _googleSignIn = GoogleSignIn.instance;
  bool _isGoogleSignInInitialized = false;

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

  Future<void> _initializeGoogleSignIn() async {
    if (!_isGoogleSignInInitialized) {
        try {
          await _googleSignIn.initialize();
          _isGoogleSignInInitialized = true;
          print('Google Sign-In initialized successfully');
        } catch (e) {
          print('Failed to initialize Google Sign-In: $e');
        }
    }
  }

  Future<void> signInWithGoogleFirebase() async {
    await _initializeGoogleSignIn();

    try {
      // google user 정보
      final GoogleSignInAccount googleUser = await _googleSignIn.authenticate(
        scopeHint: ['email'], // Specify required scopes
      );
      final authClient = _googleSignIn.authorizationClient;
      final authorization = await authClient.authorizationForScopes(['email']);

      final googleAuth = googleUser.authentication;

      final credential = GoogleAuthProvider.credential(
        accessToken: authorization?.accessToken,
        idToken: googleAuth.idToken,
      );

	  // firebase user 정보
      final userCredential = await FirebaseAuth.instance.signInWithCredential(
        credential,
      );
	  
      // print('googleUser : ${googleUser}');
      // print('userCredential : ${userCredential}');
      // 이 부분에서 googleUser, userCredential 을 활용하면 된다.

      Navigator.pushReplacement(
        context,
        MaterialPageRoute(
          builder: (context) => Home(),
        ),
      );

    } on GoogleSignInException catch (e) {
      var errorMessage = googleSignInExceptionToMessage(e);
      print(
        'Google Sign In error: code: ${e.code.name} description:${e.description} details:${e.details}',
      );

      rethrow;
    } catch (error) {
      print('Unexpected Google Sign-In error: $error');
      rethrow;
    }
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: signInWithGoogleFirebase,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Image.asset('assets/images/login/google_login.png', width: 250),
      ),
    );
  }
}

 

최대한 쓸데없는? 부분들은 제외하고 작성하였습니다

 

기본적으로 화면 랜딩 시

_initializeGoogleSignIn를 호출하여

GoogleSignIn.instance를 initialize 해줍니다.

그리고 로그인 버튼을 누를때마다 initialize 되었는지 한번 체크해줍니다.

 

이후에는 코드를 보시는바와 같습니다

구글 로고 tap 하여 signInWithGoogleFirebase 를 호출하고

googleUser 의 정보를 얻어내고,

해당 정보를 이용해서 credential 을 파이어베이스쪽으로 보내줍니다.

 

코드에도 써있듯이

googleUser와 userCredential을 활용하여

DB insert 라던가 state 관리라던가

원하시는 작업을 하시면 됩니다.

 

 

- 마치며

막상 글로 작성하고나니까 굉장히 별거 없지만

업그레이드 된지 얼마 안되어서 참고자료들이 적기도 했었고

저처럼 헤매일 분들이 계실까봐 작성하게 됐습니다.

 

 

- 참고자료

https://pub.dev/packages/google_sign_in

https://isaacadariku.medium.com/google-sign-in-flutter-migration-guide-pre-7-0-versions-to-v7-version-cdc9efd7f182