[firebase] 로그인 구현하기

구성 UI

이번에는 기능 구현이 더 중요하다고 생각해 따로 디자인을 하지 않고 vuetify를 사용해 적당한 ui를 만들었다.

기간

: 2022.03.06 ~ 2022.03.09

구현한 기능

깃허브 소스 보기

• 회원가입
• 구글 및 이메일 로그인

구현 스토리

우선 firebase에 test-web으로 새로운 프로젝트를 생성했다.
생성하는 방법은 firebase로 로그인 구현하기 이분을 많이 참고했다. 설명이 친절하게 잘 되어있다.

그런 다음 SDK 설정 및 구성에 가보면 이렇게 나와있을 것이다.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

그런데 다른 예시를 참고하면서 작성했던 나는 위와 다른 점을 하나 발견하게 된다.

import firebase from "firebase";

바로 요것.
예전에는 firebase 하나만 import해서 모든 기능을 사용했던 반면 현재는 각각의 기능들을 꺼내서 사용하도록 바뀌었기 때문에 위와 같이 import하면 다음과 같이 에러창이 나올 것이다.

이것 때문에 좀 애먹었다.
자세한 내용은 nuxt.js에서 Firebase가 This dependency was not found로 변해 막힌 이야기를 참고하면 좋을 것이다.

바뀐 버전은 공식 문서를 참고해서 작성했다.
나와 같이 갓 프론트에 입문한 사람도 볼 수 있게 잘 나와있다.
웹사이트에서 Firebase 인증 시작하기

이렇게 모든 기능을 구현한 뒤에 로그인 하면 다음과 같이 나타난다.

후기

• 생각보다 쉽다(?)
• 가입 절차를 더 까다롭게 해서 만들어보고 싶다.
• 아직은 회원가입과 로그인 기능이 전부이지만 회원탈퇴랑 소셜로그인과 이메일 연동기능을 만들어보고 싶다.
• nuxt의 _id.vue를 사용해서 uid를 보여줘야 하는지 좀 헷갈린다...