플러터:인증(Firebase 인증) - 편집 역사

2025년 12월 2일 (화) 01:28에 Sam님의 편집

2025-12-02T01:28:38Z

← 이전 판		2025년 12월 2일 (화) 01:28 판
459번째 줄:		459번째 줄:
	</syntaxhighlight>		</syntaxhighlight>

	== 상태 관리 ==		=== 보안 ===
			기본적으로 자동 처리로, 어차피 승인된 도메인에서만 작동하기에 key 값들도 그냥 공개해버려도 되는데, Firebase Security Rules 정도만 만져주면 될 듯하다. 여기서 권한을 주니까. 이건 나중의 이야기...

			=== 상태 관리 ===
	로그인 상태를 다른 화면에서도 사용하기 위해 Provider/Riverpod 사용 권장.		로그인 상태를 다른 화면에서도 사용하기 위해 Provider/Riverpod 사용 권장.
	<syntaxhighlight lang="dart">		<syntaxhighlight lang="dart">

Sam: /* 팁 */

2025-12-02T01:19:56Z

팁

← 이전 판		2025년 12월 2일 (화) 01:19 판
436번째 줄:		436번째 줄:

	= 팁 =		= 팁 =
	~~= 실무 코드 구조 (권장) =~~

	== 파일 분리 ==		=== User 객체 ===
			Firebase가 로그인 성공 시 반환하는 사용자 정보

			* uid: Firebase 고유 ID (변하지 않음, DB 키로 사용)
			* email: 이메일 주소
			* displayName: 표시 이름
			* photoURL: 프로필 사진 URL

			=== 실무 코드 구조 (권장) 파일 분리 ===
	학습용은 한 파일에 다 넣어도 되지만, 실무에서는 분리:		학습용은 한 파일에 다 넣어도 되지만, 실무에서는 분리:

453번째 줄:		460번째 줄:

	== 상태 관리 ==		== 상태 관리 ==
	~~StreamBuilder 대신~~ Provider/Riverpod 사용 권장:		로그인 상태를 다른 화면에서도 사용하기 위해 Provider/Riverpod 사용 권장.
	<syntaxhighlight lang="dart">		<syntaxhighlight lang="dart">
	// Provider 예시		// Provider 예시

Sam: /* 팁 */

2025-12-02T01:18:04Z

팁

← 이전 판		2025년 12월 2일 (화) 01:18 판
436번째 줄:		436번째 줄:

	= 팁 =		= 팁 =
			= 실무 코드 구조 (권장) =

			== 파일 분리 ==
			학습용은 한 파일에 다 넣어도 되지만, 실무에서는 분리:

			<syntaxhighlight lang="text">
			lib/
			├── main.dart
			├── services/
			│ └── auth_service.dart # 로그인/로그아웃 로직만
			├── screens/
			│ └── login_screen.dart # UI만
			└── models/
			└── user_model.dart # 데이터 구조
			</syntaxhighlight>

			== 상태 관리 ==
			StreamBuilder 대신 Provider/Riverpod 사용 권장:
			<syntaxhighlight lang="dart">
			// Provider 예시
			final authProvider = StreamProvider<User?>((ref) {
			return FirebaseAuth.instance.authStateChanges();
			});
			</syntaxhighlight>

Sam: /* 사전 준비 */

2025-12-02T01:17:51Z

사전 준비

← 이전 판		2025년 12월 2일 (화) 01:17 판
151번째 줄:		151번째 줄:
	* 또는 Google Cloud Console → '''API 및 서비스''' → '''라이브러리'''		* 또는 Google Cloud Console → '''API 및 서비스''' → '''라이브러리'''
	\|		\|
	* ~~안드로이드의~~ 경우 거의 작업 없이 진행됨.		* 안드로이드 Ios의 경우 거의 작업 없이 진행됨.
	\|-		\|-
	\|Firebase CLI 설치		\|Firebase CLI 설치
435번째 줄:		435번째 줄:
	</syntaxhighlight>		</syntaxhighlight>

	*		= 팁 =

Sam: /* 사전 준비 */

2025-12-02T01:16:03Z

사전 준비

차이 보기

Sam: 새 문서: {{플러터}} = 개요 = Flutter에서 Firebase Authentication을 이용해 앱에 로그인 기능을 구현하는 방법을 정리한 문서. === 특징 === * 쉽다: Firebase는 이메일/비밀번호, 구글, 애플, 전화번호 등 다양한 인증 방식을 제공하며, 별도의 백엔드 없이도 안정적인 인증 시스템을 구축할 수 있다. * Firebase가 제공하는 인증 서비스(공식지원) * 서버 없이 사용자 계정 관리 가능(백엔드...

2025-12-01T07:15:21Z

새 문서: {{플러터}} = 개요 = Flutter에서 Firebase Authentication을 이용해 앱에 로그인 기능을 구현하는 방법을 정리한 문서. === 특징 === * 쉽다: Firebase는 이메일/비밀번호, 구글, 애플, 전화번호 등 다양한 인증 방식을 제공하며, 별도의 백엔드 없이도 안정적인 인증 시스템을 구축할 수 있다. * Firebase가 제공하는 인증 서비스(공식지원) * 서버 없이 사용자 계정 관리 가능(백엔드...

새 문서

{{플러터}}

= 개요 =
Flutter에서 Firebase Authentication을 이용해 앱에 로그인 기능을 구현하는 방법을 정리한 문서.

=== 특징 ===

* 쉽다: Firebase는 이메일/비밀번호, 구글, 애플, 전화번호 등 다양한 인증 방식을 제공하며, 별도의 백엔드 없이도 안정적인 인증 시스템을 구축할 수 있다.
* Firebase가 제공하는 인증 서비스(공식지원)
* 서버 없이 사용자 계정 관리 가능(백엔드 필요 없음)
* 소셜 로그인(Google/Apple/GitHub/Microsoft) 지원
* 인증 상태(로그인 여부) 자동 유지
* 토큰/세션 관리 자동 처리

=== 한계 ===

* 기본적으로 제공하는 소셜로그인 외의 OAuth2 등 인증은 따로 구현하는 편이 더 간편하다.

= Firebase 인증 개념 =

== 인증 흐름 ==

# 앱에서 FirebaseAuth API 호출
# Firebase가 사용자 인증 처리
# 성공 시 User 객체 반환
# authStateChanges() 스트림을 통한 로그인 상태 전달

= 사전 준비 =
{| class="wikitable"
|+
!단계
!설명
!비고
|-
|Firebase CLI 설치
|<syntaxhighlight lang="bash">
npm install -g firebase-tools
</syntaxhighlight>
|
|-
|FlutterFire CLI 설치
|<syntaxhighlight lang="bash">
dart pub global activate flutterfire_cli
</syntaxhighlight>
|
|-
|Firebase 프로젝트 연동
|<syntaxhighlight lang="bash">
flutterfire configure
</syntaxhighlight>→ Android/iOS 설정 파일 자동 생성
|
|-
|pubspec.yaml 설정
|<syntaxhighlight lang="yaml">
dependencies:
firebase_core: ^3.0.0
firebase_auth: ^5.0.0
google_sign_in: ^6.1.0
</syntaxhighlight>
|
|}

= 기본 인증 (Email/Password) =

== main.dart ==
<syntaxhighlight lang="dart">
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
}
</syntaxhighlight>

== 회원가입 ==
<syntaxhighlight lang="dart">
await FirebaseAuth.instance.createUserWithEmailAndPassword(
email: email,
password: password,
);
</syntaxhighlight>

== 로그인 ==
<syntaxhighlight lang="dart">
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: email,
password: password,
);
</syntaxhighlight>

== 로그아웃 ==
<syntaxhighlight lang="dart">
await FirebaseAuth.instance.signOut();
</syntaxhighlight>

= 로그인 상태 감지 =
FirebaseAuth는 로그인 상태를 Stream으로 감시할 수 있다.<syntaxhighlight lang="dart">
StreamBuilder(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return HomeScreen(); // 로그인됨
}
return LoginScreen(); // 로그인 안됨
},
)
</syntaxhighlight>

= 구글 로그인 =

=== Firebase 콘솔 설정 ===

* Authentication → Sign-in Method → Google 활성화

== 구현 코드 ==
<syntaxhighlight lang="dart">
Future<UserCredential> signInWithGoogle() async {
final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
final GoogleSignInAuthentication? googleAuth =
await googleUser?.authentication;

final credential = GoogleAuthProvider.credential(
accessToken: googleAuth?.accessToken,
idToken: googleAuth?.idToken,
);

return await FirebaseAuth.instance.signInWithCredential(credential);
}
</syntaxhighlight>

== 구글 로그인 버튼 ==
<syntaxhighlight lang="dart">
ElevatedButton(
onPressed: () => signInWithGoogle(),
child: Text("Google 로그인"),
)
</syntaxhighlight>

= 앱 전체 구조 예시 =

== 기본 구조 ==
<syntaxhighlight lang="text">
main.dart
└── StreamBuilder(authStateChanges)
├── HomeScreen (로그인됨)
└── LoginScreen (로그인 안됨)
</syntaxhighlight>

== LoginScreen 기능 ==

* 이메일 로그인
* 구글 로그인 버튼

== HomeScreen 기능 ==

* 사용자 정보 표시
* 로그아웃 버튼