Vue로 PWA 개발, ChatGPT에게 프론트엔드 앱에 사용할 수 있는 사용자 인증 기능을 물었습니다.

Vue로 PWA 개발 - 그랜파 개발자.

 

사용자 인증 기능을 구현해 봅시다.
Firebase Authentication의 이메일, 비밀번호 인증으로 회원 가입하는 기능과 로그인, 로그아웃, 자동 로그인 기능을 구현하고 합니다. 이들 기능을 my-pwa-app에 계정 만들기, 로그인, 로그아웃 등의 기능으로 추가할 것입니다.

 

ChatGPT에게 물었습니다.

Firebase Authentication의 이메일, 비밀번호 인증으로 회원 가입하는 기능과 로그인, 로그아웃, 자동 로그인을 구현해줘.

ChatGPT

다음은 Firebase Authentication의 이메일 및 비밀번호 인증을 사용하여 회원 가입, 로그인, 로그아웃, 자동 로그인을 구현하는 Vue 2.x 프로젝트 코드입니다.

1. Firebase 설정

Firebase 프로젝트를 생성하고 이메일/비밀번호 인증을 활성화한 후, Firebase 초기 설정을 추가합니다.

Firebase 초기화 파일 (firebase.js)

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
};

firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();

2. Vue 컴포넌트 작성

App.vue

<template>
  <v-app>
    <v-container>
      <h1>Firebase Authentication Example</h1>
      <div v-if="user">
        <p>Welcome, {{ user.email }}</p>
        <v-btn color="primary" @click="logout">Logout</v-btn>
      </div>
      <div v-else>
        <login-form @user-logged-in="setUser" />
        <register-form @user-registered="setUser" />
      </div>
    </v-container>
  </v-app>
</template>

<script>
import { auth } from './firebase';
import LoginForm from './components/LoginForm.vue';
import RegisterForm from './components/RegisterForm.vue';

export default {
  components: {
    LoginForm,
    RegisterForm,
  },
  data() {
    return {
      user: null,
    };
  },
  created() {
    auth.onAuthStateChanged((user) => {
      this.user = user; // 자동 로그인 처리
    });
  },
  methods: {
    setUser(user) {
      this.user = user;
    },
    logout() {
      auth.signOut();
    },
  },
};
</script>

LoginForm.vue

<template>
  <v-card>
    <v-card-title>Login</v-card-title>
    <v-card-text>
      <v-form @submit.prevent="login">
        <v-text-field
          v-model="email"
          label="Email"
          type="email"
          required
        ></v-text-field>
        <v-text-field
          v-model="password"
          label="Password"
          type="password"
          required
        ></v-text-field>
        <v-btn type="submit" color="primary">Login</v-btn>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<script>
import { auth } from '../firebase';

export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    async login() {
      try {
        const userCredential = await auth.signInWithEmailAndPassword(this.email, this.password);
        this.$emit('user-logged-in', userCredential.user);
      } catch (error) {
        alert(error.message);
      }
    },
  },
};
</script>

RegisterForm.vue

<template>
  <v-card>
    <v-card-title>Register</v-card-title>
    <v-card-text>
      <v-form @submit.prevent="register">
        <v-text-field
          v-model="email"
          label="Email"
          type="email"
          required
        ></v-text-field>
        <v-text-field
          v-model="password"
          label="Password"
          type="password"
          required
        ></v-text-field>
        <v-btn type="submit" color="primary">Register</v-btn>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<script>
import { auth } from '../firebase';

export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    async register() {
      try {
        const userCredential = await auth.createUserWithEmailAndPassword(this.email, this.password);
        this.$emit('user-registered', userCredential.user);
      } catch (error) {
        alert(error.message);
      }
    },
  },
};
</script>

3. Vuetify 설정

Vuetify를 사용하려면 프로젝트에 Vuetify를 설치하고 설정해야 합니다.

Vuetify 설치

npm install vuetify

Vuetify 초기화

main.js에서 Vuetify를 설정합니다.

import Vue from 'vue';
import Vuetify from 'vuetify';
import App from './App.vue';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

new Vue({
  vuetify: new Vuetify(),
  render: (h) => h(App),
}).$mount('#app');

4. 결과

• 회원가입: RegisterForm에서 이메일과 비밀번호를 입력하여 회원가입.
• 로그인: LoginForm에서 등록한 사용자로 로그인.
• 로그아웃: 로그인 후, Logout 버튼으로 로그아웃.
• 자동 로그인: 새로고침하면 auth.onAuthStateChanged를 통해 로그인 상태가 유지됨.

이 프로젝트를 실행하면 이메일과 비밀번호 인증을 사용한 Firebase Authentication 기능이 완벽히 동작할 것입니다. 추가 질문이 있다면 알려주세요! 😊

 

Vue 프로젝트 Beta Test : mylog, 일상의 기록