파이어베이스 인증 마스터하기: 이메일부터 소셜 로그인까지
안녕하세요, 개발자 여러분! 오늘은 파이어베이스 인증에 대해 깊이 있게 알아보겠습니다. 여러분, 알고 계셨나요? 전 세계 모바일 앱의 약 30%가 파이어베이스를 사용하고 있다는 사실을! 그만큼 파이어베이스는 강력하고 유용한 도구인데요, 특히 인증 시스템은 개발자들에게 큰 도움이 됩니다.
"좋은 인증 시스템은 사용자 경험의 시작점이자, 앱 보안의 기초입니다."
- 구글 개발자 컨퍼런스 2023
이 글에서는 파이어베이스 인증의 다양한 방법을 상세히 살펴보고, 실제 구현 방법까지 함께 알아보겠습니다. 자, 그럼 시작해볼까요?
2.1 이메일/비밀번호 인증 구현
이메일/비밀번호 인증은 가장 기본적이면서도 널리 사용되는 인증 방식입니다. 파이어베이스에서는 이를 쉽게 구현할 수 있도록 도와줍니다.
설정하기
먼저, 파이어베이스 콘솔에서 이메일/비밀번호 인증을 활성화해야 합니다:
- 파이어베이스 콘솔에 로그인합니다.
- 프로젝트를 선택하고 '인증' 섹션으로 이동합니다.
- '로그인 방법' 탭에서 '이메일/비밀번호'를 찾아 활성화합니다.
코드 구현
이제 실제 코드를 통해 이메일/비밀번호 인증을 구현해봅시다:
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
// 회원가입
function signUp(email, password) {
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// 회원가입 성공
const user = userCredential.user;
console.log("회원가입 성공:", user);
})
.catch((error) => {
// 회원가입 실패
const errorCode = error.code;
const errorMessage = error.message;
console.error("회원가입 실패:", errorCode, errorMessage);
});
}
// 로그인
function signIn(email, password) {
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// 로그인 성공
const user = userCredential.user;
console.log("로그인 성공:", user);
})
.catch((error) => {
// 로그인 실패
const errorCode = error.code;
const errorMessage = error.message;
console.error("로그인 실패:", errorCode, errorMessage);
});
}
이 코드를 사용하면 간단하게 회원가입과 로그인 기능을 구현할 수 있습니다. 사용자 입력을 받아 signUp과 signIn 함수를 호출하면 됩니다.
보안 강화 팁
- 강력한 비밀번호 정책을 설정하세요. (최소 8자, 대소문자, 숫자, 특수문자 포함)
- 이메일 인증을 활성화하여 실제 사용자인지 확인하세요.
- 로그인 시도 횟수를 제한하여 무차별 대입 공격을 방지하세요.
2.2 소셜 로그인 (Google, Facebook) 연동
소셜 로그인은 사용자에게 편리한 로그인 경험을 제공합니다. 파이어베이스를 통해 Google, Facebook 등의 소셜 로그인을 쉽게 구현할 수 있습니다.
Google 로그인 구현
Google 로그인을 구현하는 과정을 살펴보겠습니다:
- 파이어베이스 콘솔에서 Google 로그인을 활성화합니다.
- 필요한 SDK를 import합니다.
- Google 로그인 함수를 구현합니다.
import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
const auth = getAuth();
const provider = new GoogleAuthProvider();
function signInWithGoogle() {
signInWithPopup(auth, provider)
.then((result) => {
// Google 로그인 성공
const user = result.user;
console.log("Google 로그인 성공:", user);
}).catch((error) => {
// Google 로그인 실패
const errorCode = error.code;
const errorMessage = error.message;
console.error("Google 로그인 실패:", errorCode, errorMessage);
});
}이 코드를 사용하면 Google 로그인 버튼 클릭 시 팝업 창이 열리고, 사용자가 Google 계정으로 로그인할 수 있습니다.
Facebook 로그인 구현
Facebook 로그인도 비슷한 방식으로 구현할 수 있습니다:
import { getAuth, FacebookAuthProvider, signInWithPopup } from "firebase/auth";
const auth = getAuth();
const provider = new FacebookAuthProvider();
function signInWithFacebook() {
signInWithPopup(auth, provider)
.then((result) => {
// Facebook 로그인 성공
const user = result.user;
console.log("Facebook 로그인 성공:", user);
}).catch((error) => {
// Facebook 로그인 실패
const errorCode = error.code;
const errorMessage = error.message;
console.error("Facebook 로그인 실패:", errorCode, errorMessage);
});
}
소셜 로그인을 구현할 때는 각 플랫폼의 개발자 콘솔에서 앱 ID와 시크릿 키를 발급받아야 합니다. 이 정보를 파이어베이스 콘솔에 등록해야 정상적으로 작동합니다.
2.3 전화번호 인증 구현
전화번호 인증은 사용자의 실제 연락처를 확인할 수 있는 좋은 방법입니다. 파이어베이스는 SMS를 통한 인증 코드 전송 기능을 제공합니다.
설정하기
- 파이어베이스 콘솔에서 전화번호 인증을 활성화합니다.
- 필요한 SDK를 import합니다.
- reCAPTCHA 설정을 합니다. (선택사항이지만 권장됩니다)
코드 구현
import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
const auth = getAuth();
// reCAPTCHA 설정
window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
onSignInSubmit();
}
}, auth);
function onSignInSubmit() {
const phoneNumber = "+821012345678"; // 사용자 입력 전화번호
const appVerifier = window.recaptchaVerifier;
signInWithPhoneNumber(auth, phoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS 전송 성공
window.confirmationResult = confirmationResult;
console.log("SMS 전송 성공");
}).catch((error) => {
// SMS 전송 실패
console.error("SMS 전송 실패:", error);
});
}
function verifyCode() {
const code = "123456"; // 사용자 입력 인증 코드
confirmationResult.confirm(code).then((result) => {
// 인증 성공
const user = result.user;
console.log("전화번호 인증 성공:", user);
}).catch((error) => {
// 인증 실패
console.error("전화번호 인증 실패:", error);
});
}
이 코드는 전화번호 입력, SMS 전송, 인증 코드 확인의 전체 흐름을 보여줍니다. 실제 구현 시에는 사용자 인터페이스와 연동하여 각 단계를 처리해야 합니다.
주의사항
- 국가별 전화번호 형식을 고려해야 합니다.
- SMS 전송 비용이 발생할 수 있으므로, 사용량을 모니터링해야 합니다.
- 보안을 위해 인증 코드의 유효 시간을 설정하는 것이 좋습니다.
2.4 사용자 프로필 관리
사용자 인증 후에는 프로필 정보를 관리하는 것이 중요합니다. 파이어베이스는 기본적인 프로필 정보 관리 기능을 제공합니다.
프로필 정보 업데이트
사용자의 표시 이름, 프로필 사진 URL 등을 업데이트할 수 있습니다:
import { getAuth, updateProfile } from "firebase/auth";
const auth = getAuth();
const user = auth.currentUser;
updateProfile(user, {
displayName: "Jane Q. User",
photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
// 프로필 업데이트 성공
console.log("프로필 업데이트 성공");
}).catch((error) => {
// 프로필 업데이트 실패
console.error("프로필 업데이트 실패:", error);
displayName: "Jane Q. User",
photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
// 프로필 업데이트 성공
console.log("프로필 업데이트 성공");
}).catch((error) => {
// 프로필 업데이트 실패
console.error("프로필 업데이트 실패:", error);
});