111. User Registration
npm create vue@latest
여기선 Firebase를 이용하여 사용자를 등록하는 방법을 설명합니다.
사용자 등록을 위해 Firebase의 인증 기능을 활성화하는 것이 첫번째 단계입니다.
인증 기능을 활성화하지 않으면 Firebase가 인증 시도를 거부합니다.
Firebase 콘솔에서 인증 설정
- 프로젝트의 Firebase 콘솔을 열고 사이드바에서 '인증'을 클릭합니다.
Firebase는 서버 사이드 코드 없이 다양한 제공자를 통해 사용자를 인증하고 간리할 수 있는 기능을 제공합니다.
- 프로젝트의 Firebase 콘솔을 열고 사이드바에서 '인증'을 클릭합니다.
다양한 인증 제공자
- Facebook, Twitter, Google과 같은 플랫폼은 다른 사이트에 사용자를 등록할 수 있도록 데이터를 전송하는 서비스를 제공합니다.
이러한 회사들은 Firebase에서 '제공자(provider)`로 언급됩니다.
- Facebook, Twitter, Google과 같은 플랫폼은 다른 사이트에 사용자를 등록할 수 있도록 데이터를 전송하는 서비스를 제공합니다.
인증 방법 선택
- Firebase는 다양한 플랫폼을 지원합니다.
이메일 방법을 선택하고 활성화하지만, 비밀번호 저장 옵션은 활성화하지 않습니다.
- Firebase는 다양한 플랫폼을 지원합니다.
Firebase API를 통한 사용자 추가
- 사용자는 Firebase의 API를 통해 애플리케이션에 추가됩니다.
등록 폼 컴포넌트 수정
- 편집기에서 등록 폼 컴포넌트를 열고 등록 함수를 스크롤합니다.
이 함수는 등록 제출을 처리합니다.
Firebase 인스턴스를 사용하여 데이터를 전송합니다.
- 편집기에서 등록 폼 컴포넌트를 열고 등록 함수를 스크롤합니다.
Firebase 인스턴스 가져오기
- 컴포넌트에 Firebase 인스턴스를 가져와야 합니다.
이전 강의에서 생성한 Firebase 파일을 import 해야하며, Firebase 모듈과 혼동하지 않도록 주의합니다.
- 컴포넌트에 Firebase 인스턴스를 가져와야 합니다.
사용자 등록 코드 작성
firebase.auth()
함수를 호출하여 인증 서비스와 통신할 수 있는 메소드와 속성을 반환받습니다.createUserWithEmailAndPassword
메소드를 사용하여 사용자의 이메일과 비밀번호로 새로운 사용자 계정을 생성합니다.
이 함수는 프로미스를 반환하며, 인증이 성공하면 사용자의 자격 증명을 포함하는 객체를 제공합니다.
계정 생성이 성공하면 Firebase는 자동으로 사용자를 로그인시킵니다.
응답 처리
async
와await
키워드를 사용하여createUserWithEmailAndPassword
함수를 비동기적으로 호출합니다.
이 함수는 제공된 정보로 Firebase에 요청을 보내고, 성공적이면 사용자의 자격 증명을 반환합니다.
이메일과 비밀번호 전달
- 이메일과 비밀번호는 등록 폼의 입력 필드에서 가져온 값을 사용하여 전달합니다.
이 과정을 통해 사용자는 시스템에 완전히 등록될 수 있으며, 다음 강의에서는 이에 대한 응답 처리 방법을 살펴볼 것입니다.
Firebase를 통한 사용자 등록 및 인증 프로세스는 서버 사이드 코드 없이도 다양한 인증 옵션을 제공하여 개발자들에게 유연성을 제공합니다.
src/includes/firebase.ts
import { initializeApp } from 'firebase/app'
const firebaseConfig = {
apiKey: 'AIzaSyA4X8qu0cS5CeKS9sExbwWgTP4mW9crP84',
authDomain: 'vue-guide-2.firebaseapp.com',
projectId: 'vue-guide-2',
storageBucket: 'vue-guide-2.appspot.com',
// messagingSenderId: '475228612189',
appId: '1:475228612189:web:ff548967df307e9a110fb4'
}
export default initializeApp(firebaseConfig)
src/components/RegisterForm.vue
<script setup lang="ts">
import { ref } from 'vue'
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'
const schema = ref({
name: 'required|min:3|max:100|alpha_spaces',
email: 'required|min:3|max:100|email',
age: 'required|min_value:18|max_value:100',
password: 'required|min:9|max:100|excluded:password', // password 단어를 입력하면 유효성 검사를 통과할 수 없다.
confirm_password: 'passwords_mismatch:@password', // 비밀번호 입력할 때, 비밀번호 재확인차 입력하는 필드 // 위의 password 부분과 일치하는지 확인함
country: 'required|country_excluded:Antarctica',
tos: 'required'
})
const userData = ref({
country: 'USA'
})
const reg_in_submission = ref(false)
const reg_show_alert = ref(false)
const reg_alert_variant = ref('bg-blue-500')
const reg_alert_msg = ref('Please wait! Your acount is being created.')
const register = async (values: {
age: number
confirm_password: string
country: string
email: string
name: string
password: string
tos: number
}) => {
// VeeForm 안에 VeeField의 모든 유효성 검사를 통과해야지 values 값이 들어온다.
// ex.
// {
// age: 31
// confirm_password: "asdf"
// country: "Germany"
// email: "sdf@sdf.com"
// name: "sfdf"
// password: "asdf"
// tos: "1"
// }
reg_show_alert.value = true
reg_in_submission.value = true
reg_alert_variant.value = 'bg-blue-500'
reg_alert_msg.value = 'Please wait! Your account is being created.'
const auth = getAuth()
const userCred = await createUserWithEmailAndPassword(auth, values.email, values.password)
reg_alert_variant.value = 'bg-green-500'
reg_alert_msg.value = 'Success! Your account has been created.'
console.log(values)
}
</script>
<template>
<!-- Registration Form -->
<div
class="text-white text-center font-bold p-4 rounded mb-4"
v-if="reg_show_alert"
:class="reg_alert_variant"
>
{{ reg_alert_msg }}
</div>
<VeeForm :validation-schema="schema" @submit="register" :initial-values="userData">
<!-- Name -->
<div class="mb-3">
<label class="inline-block mb-2">Name</label>
<VeeField
type="text"
name="name"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Enter Name"
/>
<ErrorMessage class="text-red-600" name="name" />
</div>
<!-- Email -->
<div class="mb-3">
<label class="inline-block mb-2">Email</label>
<VeeField
type="email"
name="email"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Enter Email"
/>
<ErrorMessage class="text-red-600" name="email" />
</div>
<!-- Age -->
<div class="mb-3">
<label class="inline-block mb-2">Age</label>
<VeeField
type="number"
name="age"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
/>
<ErrorMessage class="text-red-600" name="age" />
</div>
<!-- Password -->
<div class="mb-3">
<label class="inline-block mb-2">Password</label>
<VeeField name="password" :bails="false" #default="{ field, errors }">
<input
type="password"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="password"
v-bind="field"
/>
<div class="text-red-600" v-for="error in errors" :key="error">
{{ error }}
</div>
</VeeField>
</div>
<!-- Confirm Password -->
<div class="mb-3">
<label class="inline-block mb-2">Confirm Password</label>
<VeeField
type="password"
name="confirm_password"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Confirm Password"
/>
<ErrorMessage class="text-red-600" name="confirm_password" />
</div>
<!-- Country -->
<div class="mb-3">
<label class="inline-block mb-2">Country</label>
<VeeField
as="select"
name="country"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
>
<option value="USA">USA</option>
<option value="Mexico">Mexico</option>
<option value="Germany">Germany</option>
<option value="Antarctica">Antarctica</option>
</VeeField>
<ErrorMessage class="text-red-600" name="country" />
</div>
<!-- TOS -->
<div class="mb-3 pl-6">
<VeeField
type="checkbox"
name="tos"
value="1"
class="w-4 h-4 float-left -ml-6 mt-1 rounded"
/>
<label class="inline-block">Accept terms of service</label>
<ErrorMessage class="text-red-600 block" name="tos" />
</div>
<button
type="submit"
class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition hover:bg-purple-700"
:disabled="reg_in_submission"
>
Submit
</button>
</VeeForm>
</template>
<style scoped></style>