Firebase 구글 로그인 연동하기 - (Flutter)
1. 사이트 접속
2. 로그인 및 시작하기
3. 프로젝트 만들기
- 프로젝트 만들기 클릭
- 프로젝트 이름 정하고 계속 클릭
- 계속 클릭
- 계정 선택 후 프로젝트 만들기 클릭
- Dault Account for Firebase
- 프로젝트가 생성되면 아래처럼 화면이 나옵니다
- 앱 등록을 해야 하는데 여기서는 안드로이드만 진행해 보겠습니다.
- 앱 정보 입력
- Android 패키지 이름은 프로젝트 폴더에
- android\app 폴더에 있는 build.gradle에서 확인하시면 됩니다.
- 디버그 서명 인증서 SHA-1은 선택사항이라서 안 했는데
- 뒤에서 구글 로그인 계정 연동하려면 필수로 해야 한다네요.
- AndroidStudio - 터미널에서 gradlew가 있는 android 폴더에서 아래 명령어 실행
- ./gradlew signingReport
- 빌드가 성공하면 SHA1의 값을 인증서 지문에 넣고 진행하시면 됩니다.
- google-services.json 을 다운로드합니다.
- 다운로드 한 파일을 android\app 폴더에 넣습니다.
- 다음은 Firebase SDK를 추가하는 과정입니다.
- 본인 Android Studio에 맞게 플러그인을 설정하면 됩니다.
- 저는 build.gradle을 사용하기에 선택하고 저 코드를 프로젝트에 넣으면 됩니다.
- 코드를 복사해서 android 폴더에 있는 build.gradle 파일에 붙여 넣습니다.
- 코드를 복사해서 android\app 폴더에 있는 build.gradle 파일에 붙여 넣습니다.
- 콘솔로 이동 클릭
4. Authentication 활성화
- 콘솔에서 Authentication 클릭
- 로그인 방법 설정 클릭
- Google 클릭
- 사용 체크
- 음 SHA-1출시
- 완료 클릭
5. 코드 작성
- pubspec.yaml 파일에 depndencies에 아래 3개 추가
- main.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'login.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(); // Firebase 초기화
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Google Login Example',
theme: ThemeData(fontFamily: 'Poppins'),
home: LoginPage(),
);
}
}
- login.dart
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'face_evaluate.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
bool _isLoading = false;
Future<User?> _signInWithGoogle() async {
setState(() {
_isLoading = true;
});
try {
// 구글 로그인
final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
if (googleUser == null) {
// 로그인 취소
setState(() {
_isLoading = false;
});
return null;
}
final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
// Firebase로 인증
final OAuthCredential credential = GoogleAuthProvider.credential(
accessToken: googleAuth.accessToken,
idToken: googleAuth.idToken,
);
UserCredential userCredential =
await FirebaseAuth.instance.signInWithCredential(credential);
setState(() {
_isLoading = false;
});
return userCredential.user;
} catch (e) {
print('Google Sign-In Error: $e');
setState(() {
_isLoading = false;
});
return null;
}
}
void _login() async {
final user = await _signInWithGoogle();
if (user != null) {
// 로그인 성공 시 메인 화면으로 이동
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => ImageUploadPage()),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue.shade300, Colors.purple.shade300],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
SafeArea(
child: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Google 로그인',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 20),
GestureDetector(
onTap: _login,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.pinkAccent, Colors.orangeAccent],
),
borderRadius: BorderRadius.circular(16),
),
padding: EdgeInsets.all(16),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.login, color: Colors.white),
SizedBox(width: 8),
Text(
'Google 계정으로 로그인',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
],
),
),
),
if (_isLoading)
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: CircularProgressIndicator(),
),
],
),
),
),
),
],
),
);
}
}
- 위 코드로 실행해 보면 Google 계정으로 로그인이 생깁니다.
- 눌러서 클릭하면 구글 계정 입력하고 넘어가면 됩니다.
- 로그인이 완료되면 제가 세팅한 화면이 나옵니다.
- 안드로이드 스투디오를 종료하고 다시 실행해 보니
- 구글 로그인 버튼을 누르면, 구글 로그인 계정을 입력하지 않아도 로그인 후 화면으로 넘어가더라고요. GPT에게 물어보니 아래처럼 답해주었습니다.
로그인 세션 유지
- Firebase Auth와 Google Sign-In은 세션을 관리합니다.
- 사용자가 처음 로그인하면, FirebaseAuth.instance.currentUser를 통해 로그인된 사용자를 유지합니다.
- 다음번 앱 실행 시, FirebaseAuth는 이미 로그인된 사용자가 있는지 확인하고 currentUser를 반환합니다.
- 그래서 로그인 버튼을 다시 눌러도 Google 계정 선택 화면이 뜨지 않고, 바로 사용자가 인증된 상태로 넘어가는 것입니다.
Firebase의 사용자 판별 방식
- Google 로그인의 경우, Google에서 발급한 idToken과 accessToken을 Firebase에 전달하여 사용자 정보를 확인합니다.
- Firebase에서 성공적으로 인증된 후, 사용자 정보는 FirebaseAuth.instance.currentUser에 저장됩니다. 여기에는 다음 정보가 포함됩니다:
- UID: Firebase에서 발급하는 고유 사용자 ID.
- 이메일: Google 계정 이메일.
- 표시 이름, 프로필 사진 URL 등.
- 인증 후 Firebase는 이 데이터를 관리하며, 사용자는 앱 재실행 시 FirebaseAuth.instance.currentUser를 통해 바로 확인 가능합니다.
마무리
- 구글 로그인 연동은 생각보다는 쉽다고 느껴지네요.
- 세션 관리를 자동으로 해주니까 더 편하기도 하네요.
'IT > Flutter' 카테고리의 다른 글
| 앱광고 넣기 (Admob) (3) | 2024.12.07 |
|---|---|
| 플러터 앱 다국어 기능 설정하는법 (2) | 2024.12.05 |
| Visual Studio Code에서 Flutter 설치(Window) (2) | 2024.11.14 |