seong

3. Flutter Web 프로젝트 Firebase + Google OAuth 연결하기 3단계 본문

Flutter/Flutter

3. Flutter Web 프로젝트 Firebase + Google OAuth 연결하기 3단계

hyeonseong 2023. 7. 20. 17:18

Button을 만들고 로그인 까지 테스트 해보기

1. 먼저 버튼을 만들어준다.

ElevatedButton.icon(
                    onPressed: () {
                    },
                    icon: FaIcon(FontAwesomeIcons.google),
                    label: Text("Google login"),
                  )

2. google_sign_provider 작성

final googleSignProvider = Provider<GoogleSignProvider>((ref) {
  return GoogleSignProvider(ref);
});

class GoogleSignProvider {
  final Ref _ref;
  GoogleSignProvider(this._ref);

  final googleSignIn = GoogleSignIn();

  // 로그인한 사용자를 저장할 변수
  User? _user;
  User get user => _user!;

  Future<void> googleLogin() async {
    try {
      // 구글 로그인시도 
      final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
      if (googleUser == null) {
        // 사용자가 로그인을 취소한 경우
        return;
      }

      // Firebase Authentication에 사용자 정보 추가
      final GoogleSignInAuthentication googleAuth =
          await googleUser.authentication;
      final googleAuthCredential = GoogleAuthProvider.credential(
        accessToken: googleAuth.accessToken,
        idToken: googleAuth.idToken,
      );
      final userCredential = await FirebaseAuth.instance
          .signInWithCredential(googleAuthCredential);
          
      //로그인한 사용자 정보 저장
      _user = userCredential.user;
      
    } catch (error) {
      Logger().d('Google 로그인 에러: $error');
    }
  }
}

3. Login Page에서 Provider 함수 호출

build 아래 부분에 Provider를 선언해준다.

Button의 onPressed에 함수 호출


결과 

로그인까지 테스트 해보면 아래 처럼 로그에 정상적으로 보이게 된다.