Flutter로 Firebase Auth를 활용한 Google 로그인 구현하기

continue with google

Flutter에서 Firebase를 사용하면 인증, 데이터베이스, 스토리지, 분석 등 다양한 기능을 쉽게 구현할 수 있어요. 이 중에서도 Firebase Auth를 사용하면 사용자 인증을 간편하게 구현할 수 있어요. 이번 글에서는 Firebase Auth를 사용하여 Google 로그인을 구현하는 방법에 대해 자세히 알아볼게요.

1. Firebase 프로젝트 생성 및 설정 Firebase Console에서 새로운 프로젝트를 생성하고, 해당 프로젝트에서 Google 로그인 인증 방법을 사용하도록 설정해줘요.
2. Flutter 프로젝트 설정 Flutter 프로젝트에서 pubspec.yaml에서 pub.dev에 있는 라이브러리 Firebase Auth와 Google Sign-In 패키지를 추가해줘요.
3. Google 로그인 버튼 추가 Google 로그인 버튼을 Flutter 앱에 추가해줘요. 이때, Google Sign-In 패키지에서 제공하는 SignInButton 위젯을 사용하면 간편하게 구현할 수 있어요.
4. Google 로그인 처리 Google 로그인 버튼을 누르면 Firebase Auth를 사용하여 Google 로그인 처리를 해줘요. 이때, Google 로그인을 위해 Google Sign-In 패키지에서 제공하는 GoogleSignIn 클래스를 사용해요.
5. 로그인 성공 후 처리 Google 로그인이 성공하면 Firebase Auth에서 제공하는 currentUser() 메소드를 사용하여 로그인한 사용자 정보를 가져올 수 있어요. 이후, 해당 사용자 정보를 사용하여 앱에서 필요한 작업을 처리해줘요.

Flutter 코드 (main.dart):

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase Auth with Google Sign-In',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Firebase Auth with Google Sign-In'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  Future<UserCredential?> _signInWithGoogle() async {
    // Google 로그인 버튼을 누르면 실행되는 함수
    final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
    final GoogleSignInAuthentication googleAuth =
        await googleUser!.authentication;
    final credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    return await _auth.signInWithCredential(credential);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 18, vertical: 9),
                child: ElevatedButton.icon(
                  onPressed: () {
                    ref
                        .watch(authControllerProvider.notifier)
                        .signInWithGoogle(context);
                  },
                  icon: Image.asset(
                    'assets/google.png',
                    width: 35,
                  ),
                  label: const Text(
                    'Google로 로그인',
                    style: TextStyle(fontSize: 18, color: Colors.black),
                  ),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.grey[100],
                    minimumSize: const Size(double.infinity, 50),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                  ),
                ),
              ),
      ),
    );
  }
}

제가 만든 SNS로그인인 '구글로 로그인' 버튼입니다! 흰색 버튼이고 깔끔해요!!

위 코드는 Google 로그인 버튼을 누르면 Firebase Auth를 사용하여 Google 로그인 처리를 하는 기능을 구현한 예제에요.

1. 보안과 유지보수성 고려 Firebase Auth를 사용할 때는 보안과 유지보수성을 고려해야해요. 이를 위해, Firebase에서 제공하는 보안 권장사항을 따르고, 에러 핸들링과 로깅을 신경써서 코드를 작성해야해요.

이번 글에서는 Firebase Auth를 사용하여 Google 로그인을 구현하는 방법에 대해 알아봤어요. Firebase Auth를 사용하면 간편하게 사용자 인증을 구현할 수 있어요. 이제 여러분도 Firebase Auth를 사용하여 안전하고 편리한 앱을 만들 수 있습니다~!