[flutter] flutter 소셜 로그인(1. google + firebase)

현재 하고 있는 flutter 프로젝트에서 소셜로그인을 시도해보기로 했다

구글, 카카오를 진행해보려고 했지만 카카오는 무지 많은 단계를 거쳐야 했고..(firebase auth에서 지원하지 않음)
우선 구글 로그인을 진행해보기로 했다.

firebase를 이용하여 구글 로그인을 하게 되면 firebase에서 제공하는 authentication을 이용할 수 있게 되고, 해당 서비스는 따로 서버를 만들지 않아도 authentication에서 데이터 관리를 할 수 있다.
또한 로그인을 쉽게 구현할 수있는 api 및 SDK가 제공되어 비교적 간편한 로그인 구현이 가능해진다.

자체 서버관리를 해야 하는 카카오 로그인은 난이도가 갑자기 수직 상승한다...ㅠㅠ

먼저 로그인을 할 때는 firebase Authentication 초기 설정이 필요하다

sign-in method에서 아래처럼 제공업체를 추가해준다.

google 로그인 서비스를 사용하려면 앱에 OAuth2 클라이언트 및 API 키를 만들 수 있도록 서명인증서의 SHA-1을 제공해야 한다.
인증서 디지털 지문을 가지고 오려면 터미널에 하단의 명령어를 입력한 뒤 기본 비밀번호 "android"를 입력한다

//MAC

keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

이렇게 발급받은 지문을 firebase 왼쪽 상단의 프로젝트 개요 -> 프로젝트 설정으로 들어가 입력해준다

입력한 후에 확인할 수 있는 GOOGLE_APP_ID를 GoogleService-Info.plist에 입력해줘야 하는데, 이 때 정확한 곳에 입력해줘야 한다.
잘못 입력하면 빌드가 안되는 오류가 생길 수도 있다..

오류를 줄이기 위해 xcode에서 입력하는 것도 방법이다.

완료 됐으면 pubspec.yaml에 사용할 패키지를 설치해준다

dependencies: 
...
  firebase_auth: ^4.6.0
  google_sign_in: ^6.1.4

나는 getx 라이브러리를 함께 사용하고 있기 때문에 controller에 로직을 입력했다.

view에 만들어져 있는 google Login 버튼을 누르면 controller에 있는 signInWithGoogle 함수가 실행된다.

Future<UserCredential> signInWithGoogle() async {
    // Trigger the authentication flow
    final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

    // Obtain the auth details from the request
    final GoogleSignInAuthentication? googleAuth =
        await googleUser?.authentication;

    // Create a new credential
    final credential = GoogleAuthProvider.credential(
      accessToken: googleAuth?.accessToken,
      idToken: googleAuth?.idToken,
    );
    // Once signed in, return the UserCredential
    return await FirebaseAuth.instance.signInWithCredential(credential);
  }

빌드를 시킨 뒤 실행했을 때 구글 로그인을 허용하고 로그인 창이 정상적으로 실행됐다.

로그인이 완료되면 firebase에 이렇게 로그인 기록이 남는다

로그아웃의 경우 아래처럼 GoogleSignIn().signOut()을 이용해서 구현했다.

InkWell(
              onTap: () => {
                GoogleSignIn().signOut(), // 로그아웃
                Get.toNamed(Routes.LOGIN), // 로그아웃 후 로그인 페이지로 전환
              },
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: const [
                    Icon(
                      Icons.logout,
                      size: 25,
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Text(
                      '로그아웃',
                      style: TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                    Spacer(),
                    Icon(Icons.navigate_next),
                  ],
                ),
              ),
            )

---

참고

https://pub.dev/packages/google_sign_in

https://firebase.google.com/docs/auth/flutter/federated-auth?hl=ko 

https://developers.google.com/android/guides/client-auth?hl=ko 

https://velog.io/@tygerhwang/Flutter-Firebase-Authentication-%EC%82%AC%EC%9A%A9%ED%95%B4-%EB%B3%B4%EA%B8%B0-1%ED%8E%B8