[Flutter web] Firebase 구글 로그인

[Flutter] 플러터 Web 개발하는 법

[플러터 web] 플러터 웹과 Firebase 연동하기

 

기본적인 플러터 웹의 Firebase 설정은 위의 포스팅들을 참고하길 바란다.

 

이번엔 Firebase와 플러터 웹을 이용해 구글 로그인을 구현 해보자.

 

패키지 추가

dependencies:
  flutter:
    sdk: flutter
    
  firebase_auth: ^3.2.0
  firebase_core_web: ^1.2.0
  google_sign_in: ^5.2.1

 

Index.html에 구문 추가

//Meta tag 영역에 아래를 추가한다.
    <meta
      name="google-signin-client_id"
      content="~~~~~~~~~~~.apps.googleusercontent.com"
    />


//Script tag 영역에 아래를 추가한다.
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>

 

구글 API 콘솔 설정하기

Google Cloud Platform

위의 구글 API 콘솔에서 간단한 설정을 해주어야한다.

 

위의 사용자 인증 정보 만들기에서 OAuth 클라이언트를 클릭한다.

웹 애플리케이션을 선택하고, 아래 처럼 입력한다.

 

포트번호는 임의로 입력해도 상관없으며, 추후 배포 후에는 배포된 URL이 이 곳에 입력되어야 동작한다.

저장 후 클라이언트 ID를 아까 index.html에 추가했던 meta 태그의 content에 입력해준다.

이 과정을 생략하게 되면 플랫폼 에러가 발생하게 된다.

 

 

호출 코드

 Future<User?> signInWithGoogle() async {
    try {
      final GoogleSignInAccount? googleUser = (await _googleSignIn.signIn());

      GoogleSignInAuthentication googleAuth;

      try {
        googleAuth = await googleUser!.authentication;
      } catch (e) {
        return false;
      }
      final AuthCredential credential = GoogleAuthProvider.credential(
          accessToken: googleAuth.accessToken, idToken: googleAuth.idToken);

      final User user = (await fAuth.signInWithCredential(credential)).user!;
      assert(user.email != null);
      final User currentUser = fAuth.currentUser!;
      assert(user.uid == currentUser.uid);
		
      return user; //유저를 return
    } on Exception catch (e) {
      try {
        print(e.toString()); //에러 출력
      } catch (e) {}
      return null;
    }
  }

호출 코드는 앱과 동일하기 때문에 원래의 프로젝트 것을 사용해도 무방하다.

 

 

실행

구글 API 콘솔에서 포트번호를 지정해줬기 때문에, 해당하는 포트번호로 열어야 구글 로그인이 동작한다.

F5 사용시 포트 번호가 랜덤으로 되기에 아래 구문을 통해 빌드 한다.

flutter run -d chrome --web-port=5555

 

 

잘 된다