Flutter - 구글 로그인 초기, 구현, 로그아웃

1. 구글로그인 초기 세팅

firebase 프로젝트에서 Authentication에서 sign-in method 에서 google를 활성화 시켜준다. 그 후 프로젝트 설정으로 들어가서 하단에 SHA certificate fingerprints 부분이 입력 되어 있어야 한다. 이 부분을 확인하기 위해 android studio 에서 terminal로 간 후 cd android 폴더로 변경해준다. 그 후 ./gradlew signingReport를 입력해주면 무언가 쭉 뜬다.  그러면 testing 중이라면  variang가 debug 인것 에서 sha1을 입력해주면 된다. sha-256도 업력해주면 된다. 그러나 출시 하려는 앱이라면 variant가 release 부분을 입력 해주면 된다. 하지만 현재는 config가 debug인데 store의 keystore를 해주면 release로 바뀌기 때문에 그때 해주면 된다. 하지만 맥에서만  ./gradlew signingReport 이게 정상 작동하는거 같아서 gradlew signingReport 로 실행했더니 정상작동함을 알 수 있었다.

이로써 세팅은 끝이다.

 

2. 로그인 구현

auth_page의 google 버튼을 찾아서 onPressed를 지워주고 하단에 _signInWithGoogle 메소드를 만들어준다.

---

  void _signInWithGoogle() {
    print("google");
  }

---

현재 잘 작동하나 확인하기 위한 메소드이다. 

그리고 pub.dev에서 google_sign_in 을 찾아서 dependencies에 넣어준다. 5.0.0이상은 null safety 적용된 버전이라 강의와 맞추기 위해  4.5.9를 해준다. 나중에 바꾸자.

google 로그인을 위해 다음과 같이 메소드를 변경 해준다.

---

  Future<UserCredential> _signInWithGoogle() async {
    final GoogleSignInAccount googleUser = await GoogleSignIn().signIn(); //유저가 버튼 클릭시 구글 로그인 팝업 창이 뜨고 로그인 하는 부분
    final GoogleSignInAuthentication googleAuth = await googleUser.authentication; // 받아온 정보를 저장

    final GoogleAuthCredential credential = GoogleAuthProvider.credential( //firebase에 로그인 하기위해 credential을 불러와서 저장
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );

    final UserCredential userCredential = await FirebaseAuth.instance.signInWithCredential(credential); // firebase에서 로그인함

    return userCredential;
  }

---

구글 정보를 받아와 firebase에 맞게 변경하고 가입과 로그인을 하는 부분이다. onPress 부분은 _signInWithGoogle 로만 작성 하면 정상적으로 동작한다.

여기서 에뮬레이터가 google play store가 없으면 로그인이 안되므로 플레이스토어가 있는 에뮬레이터로 실행해준다.

그 결과 정상 작동 함을 알 수 있었다.

 

3.IOS 구글 로그인은 IOS 관련 개발을 할 수 없는 관계로 넘어간다.

 

4. 로그아웃

my_home에서는 firebase부분만 로그아웃 됨. 구글 로그인은 sign in  상태이므로 로그아웃 시켜줘야함. page_notifier에서 하도록 작성. 현재 로그인 상태에 대한 부분이 저장되있으므로 찾아서 그에 해당하는 로그아웃을 해줌

---

enum SignInMethodFlag{
  email,google,facebook,apple
}

---

페이지의 가장 하단에 위 코드를 작성해 로그인에 관련된 부분을 불러 오면 됨.

최고 상단에

---

SignInMethodFlag _signInMethodFlag = SignInMethodFlag.email;

---

기본 상태를 이메일로 지정해둠.

---

String providerId = user.providerData.length >0? user.providerData[0].providerId:"";
        switch(providerId){
          case "google.com":
            _signInMethodFlag = SignInMethodFlag.google;
            break;
          case "facebook.com":
            _signInMethodFlag = SignInMethodFlag.facebook;
            break;
          case "apple.com":
            _signInMethodFlag = SignInMethodFlag.apple;
            break;
          default:
            _signInMethodFlag = SignInMethodFlag.email;
            break;
        }

---

PageNotifier 부분의 else 부분(로그인 되었을때)에 위 코드를 작성해서 providerId 부분에 들어가 있는 값이 무엇인지 가져와서 _signInMethodFlag 부분을 변경 시켜줌. 

---

        switch(_signInMethodFlag){
          case SignInMethodFlag.google:
            GoogleSignIn().signOut();
            break;
          case SignInMethodFlag.facebook:
            // todo: 페이스북 로그아웃
            break;
          case SignInMethodFlag.apple:
            // todo: 애플 로그아웃
            break;
          default:
            break;
        }

---

위코드는 if 부분에 넣는 것으로 로그아웃을 해서 user가 null 이되면 소셜 로그인도 로그아웃 시켜주는 부분임.

 

정확히 위에 코드들을 잘 넣으면 정상 로그인이 되고 로그아웃 후 다시 구글 로그인을 불러오는것을 알 수 있음.