Vue로 PWA 개발, 프론트엔드 공부 my-pwa-app의 회원 등록

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

 

회원 가입, 로그인 등의 폼을 my-pwa-app에 추가하도록 합시다. 앱에 기능을 하나씩 붙여가는 것입니다.
Firebase Authentication을 사용하기 위하여 firebase 초기화 설정에서 firebase.auth()를 추가합니다.
그리고 Firebase Authentication의 이메일, 비밀번호 인증으로 회원 가입을 하겠습니다.

createUserWithEmailAndPassword

createUserWithEmailAndPassword는 Firebase Authentication에서 제공하는 메서드로, 사용자의 이메일과 비밀번호를 사용해 회원가입을 처리하는 기능입니다. 이 메서드를 호출하면 Firebase에서 사용자를 인증하고, 데이터베이스에 새로운 사용자 계정을 생성합니다.

UserCredential 객체

createUserWithEmailAndPassword 호출 후 반환되는 UserCredential 객체는 다음과 같은 정보를 포함합니다:

{
  user: { ... },        // 생성된 사용자의 Firebase User 객체
  credential: null,     // 이메일/비밀번호 인증의 경우 null
  additionalUserInfo: { // 추가 사용자 정보
    isNewUser: true,    // 새 사용자 여부
    profile: null,      // 소셜 로그인 사용 시 제공되는 프로필
  },
  operationType: "signIn", // 회원가입 후 자동 로그인
}

에러 처리

createUserWithEmailAndPassword를 호출할 때, 아래와 같은 에러가 발생할 수 있습니다.

• auth/email-already-in-use : 입력한 이메일 주소가 이미 다른 계정에서 사용 중입니다.
• auth/invalid-email: 이메일 형식이 유효하지 않습니다.
• auth/operation-not-allowed: Firebase 프로젝트에서 이메일/비밀번호 인증이 비활성화 상태입니다.
• auth/weak-password: 비밀번호가 너무 짧거나 안전하지 않습니다.

회원 등록

 

이메일과 비밀번호를 입력한 후 회원가입을 누르면
입력한 이메일과 비밀번호로 store의 actions 함수 register()를 호출하고
store의 actions register() 함수는 createUserWithEmailAndPassword()를 통하여 구글에 계정을 등록합니다.

RegisterForm.vue

<!-- src/views/RegisterForm.vue -->
<template>
  <v-card>
    <v-card-title>회원 등록</v-card-title>
    <v-card-text>
      <v-form @submit.prevent="doRegister">
        <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">회원 가입</v-btn>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<script>
import { mapActions } from "vuex";

export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },

  methods: {
    ...mapActions('auth', ['register']),

    async doRegister() {
      this.register({email:this.email, password: this.password});
    },
  },
};
</script>

store - auth.js

// src/store/modules/auth.js

  // -- 계정 만들기
  async register({ commit }, { email, password }) {
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      // 로그인 설정
      commit("setUser", userCredential.user);    
      router.push("/");   // home으로
    } catch (error) {
      alert("register : " + error.message);
      commit("setUser", null); 
    }
  },

 

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