본문 바로가기
Flutter/Flutter Programming

플러터에서 Google 로그인 구현하기

by Maccrey 2024. 5. 24.
반응형
 

플러터에서 Google 로그인 구현하기: 단계별 가이드

플러터는 Google 로그인을 포함한 다양한 인증 방법을 손쉽게 구현할 수 있도록 지원합니다. 이 블로그 게시물에서는 플러터 앱에 Google 로그인을 통합하는 단계별 가이드를 제공합니다.

 

1. 프로젝트 설정

  1. Flutter 프로젝트를 생성하거나 기존 프로젝트를 엽니다.
  2. pubspec.yaml 파일에 다음 종속성을 추가합니다:
 
dependencies:
  firebase_auth: ^3.1.1
  google_sign_in: ^5.2.1
 
  1. 프로젝트 루트 디렉토리에서 다음 명령을 실행하여 종속성을 설치합니다:
flutter pub get
 

2. Firebase 설정

  1. Firebase 콘솔에 이동하여 새 프로젝트를 만들거나 기존 프로젝트를 선택합니다.
  2. Authentication 탭으로 이동하여 Sign-in methods를 선택합니다.
  3. Google을 선택하고 Enable을 클릭합니다.
  4. OAuth client ID를 복사하여 나중에 사용할 수 있도록 저장합니다.

3. Google 로그인 버튼 추가

  1. 앱의 UI 레이아웃에 Google 로그인 버튼을 추가합니다. 예를 들어, 다음 코드를 사용하여 버튼을 추가할 수 있습니다:
ElevatedButton(
  onPressed: () => _signInWithGoogle(),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Image.asset('assets/images/google_logo.png', width: 20, height: 20),
      const SizedBox(width: 10),
      const Text('Google로 로그인'),
    ],
  ),
),
 

4. Google 로그인 처리

  1. _signInWithGoogle 함수를 만들고 다음 코드를 추가합니다:
Future<void> _signInWithGoogle() async {
  // Google 로그인 클라이언트를 생성합니다.
  final googleSignIn = GoogleSignIn(
    scopes: [
      'email',
      'profile',
    ],
  );

  // Google 로그인을 시작합니다.
  final GoogleSignInAccount? googleUser = await googleSignIn.signIn();

  // Google 로그인이 성공하면 Firebase 인증을 시작합니다.
  if (googleUser != null) {
    final GoogleSignInAuthentication? googleSignInAuthentication =
        await googleUser.getAuthentication();

    final AuthCredential credential = GoogleAuthProvider.credential(
      idToken: googleSignInAuthentication.idToken,
      accessToken: googleSignInAuthentication.accessToken,
    );

    // Firebase 사용자 인증을 사용하여 로그인합니다.
    await FirebaseAuth.instance.signInWithCredential(credential);
  }
}
 

5. 사용자 정보 처리

  1. Firebase 사용자 인증이 성공하면 사용자 정보를 처리할 수 있습니다. 예를 들어, 다음 코드를 사용하여 사용자 이름과 이메일을 가져올 수 있습니다
final User? user = FirebaseAuth.instance.currentUser;

if (user != null) {
  final String displayName = user.displayName ?? '';
  final String email = user.email ?? '';

  // 사용자 정보를 처리합니다.
  print('사용자 이름: $displayName');
  print('이메일: $email');
}
 

6. 로그아웃

  1. 사용자가 로그아웃을 원하는 경우 다음 코드를 사용하여 로그아웃할 수 있습니다:
await FirebaseAuth.instance.signOut();
 

7. 완료!

 

이 단계를 따르면 Flutter 앱에 Google 로그인 기능을 성공적으로 구현할 수 있습니다.

 

참고:

  • 이 가이드는 기본적인 구현 방법을 제공하며, 실제 상황에 따라 코드를 수정해야 할 수 있습니다.
  • Firebase 및 Google 로그인 API의 최신 변경 사항을 확인하세요.
  • 보안을 위해 항상 최신 버전의 종속성을 사용하십시오.

도움이 되었기를 바랍니다!

반응형