Capstone#1. Firebase Authentication 사용해서 나만의 어플 만들기

 

안녕하세요!

저는 요즘 졸업을 위해.. 졸업작품을 제작하고 있는데요!

서버구현으로 firebase를 선택해 사용하고 있습니다!

 

처음에 Firebase를 선택한 이유는 

실시간 데이터 기능, 손쉬운 통합, 간편한 사용자 인증 등 

다양한 기능을 Firebase에서 자체 제공하기 때문입니다!

또한 푸시 알림, 오프라인 기능 및 기타 다양한 기능을 지원하므로 

복잡성을 최소화하면서 서버를 구축하는 데 적은 시간을 들일 수 있을 것 같아

선택하게 되었어요!

 

우선 어떤 내용먼저 다루어 볼까 하다가 

사용자 정보를 다루는 부분이 우선인 것 같아서

 

Firebase auth로 로그인/회원가입 구현 부분을 먼저 소개해 드릴게요!

 

 

 

firebase auth

 

 

firebase auth에서는 자체적으로 회원가입 및 로그인, 로그아웃, 사용자 정보 수정 등을 위한 

다양한 인증 관련 메서드를 제공하고 있어요!

 

우선, firebase/auth에 필요한 메서드를 import 해야겠죠?

 

https://www.npmjs.com/package/@firebase/auth

 

요렇게 설치해 주시고

 

import { getAuth } from 'firebase/auth';

 

이렇게 import 해주세요!

 

이렇게 하면 현재 접속한 사용자 인증 정보를 가져올 수 있다고 해요!

 

물론 로그인을 한 뒤에 사용가능하겠죠?

 

const auth = getAuth();
const user = auth.currentUser;

console.log(user.photoURL);  // 프로필 사진 URL
console.log(user.phoneNumber);  // 휴대폰 번호
console.log(user.metadata);  // 사용자 메타데이터(createdAt, creationTime, lastLoginAt, lastSignInTime)
console.log(user.email);  // 이메일
console.log(user.displayName);  // 표시 이름
console.log(user.emailVerified);  // 이메일 인증 여부(boolean)
console.log(user.isAnonymous);  // 익명 여부(boolean)

 

 

이런 식으로 로그인한 사용자의 가져올 수 있는 프로필 요소입니다!

 

혹은 로그인 oauth google facebook 등으로부터 프로필 정보를 가져올 수도 있다고 해요!

 

신규 사용자 가입

 

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

 

 

이런 형태로 사용자가 양식을 작성하면

사용자가 입력한 이메일 주소와 유효성을 검사한 후 

createUserWithEmailAndPassword에 전달하게 됩니다.

 

 

기존 사용자 로그인

 

 

signInWithEmailAndPassword

 

요걸 사용하면 되는데요!

 

      await firebase.auth().signInWithEmailAndPassword(email, password);

 

저도 제 프로젝트 내에 요런 식으로 사용해 주었습니다!

 

 

사용자 프로필 업데이트

 

updateProfile

 

import { getAuth, updateProfile } from "firebase/auth";
const auth = getAuth();
updateProfile(auth.currentUser, {
  displayName: "Jane Q. User", photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
  // Profile updated!
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});

 

비밀번호 변경

 

updatePassword

 

 

해당 메서드를 사용하여 변경할 수 있습니다!

 

import { getAuth, updatePassword } from "firebase/auth";

const auth = getAuth();

const user = auth.currentUser;
const newPassword = getASecureRandomPassword();

updatePassword(user, newPassword).then(() => {
  // Update successful.
}).catch((error) => {
  // An error ocurred
  // ...
});

 

 

 

사실 해당 내용들은

 

https://firebase.google.com/docs/auth?hl=ko

Firebase Authentication

 

해당 공식문서를 참고하였습니다!

 

제가 위에 소개해드린 것 말고도...

정말 좋은 기능들이 많더라고요....

 

제가 해당 내용을 다 담는 것보다 이런 메서드 등을 프로젝트에서 사용가능하니!

꼼꼼하게 읽어봐라.. 

이런 취지의 글입니다ㅏ...ㅎㅎㅎ

 

꼭꼭 읽어보시고

필요한 기능 쏙쏙 뽑아 내 프로젝트에 넣는

프론트엔드 개발자가 됩시다!!

 

 

 

 

 

 

다 오픈할 수는 없지만..

대충 회원가입 및 시작 화면 보여드릴게요 ㅎㅎ

 

저희는 firebase의 내장 메서드 등을 사용한 것도 있고

따로 api 만들어서 사용한 것들도 있어요!

 

 

다음 글에선 프론트엔드는 어떻게 구현하였는지, 

firebase realtime DB 등등 다양한 정보에 대해서 가져올게요~~

 

 

 

 

Firebase를 잠깐 사용해 보고 느낀 점은

기존의 crud 방식을 사용하려면 POST, GET등과 같은

엔드포인트를 정의하고 호출해야 하며, 

이로 인해 서버 측 구현도 프론트 단 구현도 되게 되게 복잡해지잖아요!

 

그런데 firebase에서 이렇게 간단하게 만들어주시니 정말 감사하면서도..

나는 앞으로 이 진화하는 개발 시장에서 어떻게 살아남아야 하나...

그런 생각도 드네요...

 

뭐.. 그럼에도 불구하고 열심히 하는 자만이 살아남겠죠?

ㅠㅠ

그럼 안녕!