[flutter + firebase auth] 플러터 + 파이어베이스 로그인 연동 <구글로그인> part-2

지난 포스팅내용에 이어서 이제 로그인 페이지를 만들어 보자.

구글 로그인 설정

구글 로그인 구현을 위해 다시 파이어베이스 콘솔로 가보자

왼쪽 메뉴의 Authentication 에서 시작하기를 클릭해주자.

그렇다면 로그인 제공업체 목록이 보일 것이다.

그중에서 구글을 찾아 우측의 구성 수정 아이콘을 클릭하자

위와 같이 이름<이름은 원하는 이름을 정하면 된다. 해당 내용은 사용자들에게 보여질 이름이다.>과

이메일 설정하고 저장을 눌러주자.

<이메일 설정은 아마 하나만 나올 테니 어려움 없이 선택해주자.>

 

---

이제 소스 코드 작성만 남았다.

우선 가장먼저 라이브러리 부터 임포트를 해주자.

 

작성 기준으로 google_sign_in 최신 버전은 4.5.9입니다.

google_sign_in | Flutter Package

google_sign_in: ^4.5.9

이제 로그인 이벤트를 처리 해주기 위해 login.dart 파일로 이동하자 

기본적인 파일 구조는 설정편에서 확인할 수 있다.

[flutter + firebase auth] 플러터 + 파이어베이스 로그인 연동 <설정편> part-1

 

구글 로그인 버튼배치하고 버튼 클릭 이벤트 발생시 아래의 코드를 실행시켜주면 끝이다.

Future<UserCredential> signInWithGoogle() async {
    final GoogleSignInAccount googleUser = await GoogleSignIn().signIn();
    final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
    final GoogleAuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    return await FirebaseAuth.instance.signInWithCredential(credential);
  }

login.dart 파일의 build 소스는 다음과 같다.

return Scaffold(
      appBar: AppBar(
        title: Text("SNS Login"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlatButton(
              color: Colors.grey.withOpacity(0.3),
              onPressed: signInWithGoogle,
              child: Text("Google Login"),
            ),
          ],
        ),
      ),
    );

이제 각 디바이스로 돌려서 확인해주면 완료가 된다.

 

다음번엔 페이스북 로그인을 처리해보자.