Firebase 인증 및 데이터베이스를 사용하여 Vue 설문조사 앱을 빌드하는 방법

게시 됨: 2022-03-10

빠른 요약 ↬ 이 튜토리얼에서는 Vue.js 및 Firebase를 사용하여 기능적 설문조사 앱을 빌드하기 위한 단계별 가이드를 안내합니다. Vuelidate를 통한 사용자 데이터 검증부터 인증, 사용자 데이터 저장, 경로 보호, Firebase 서버로 데이터 전송까지. 튜토리얼에 사용된 모든 단계는 실용적이며 사용자 정의 백엔드가 있는 경우에도 실제 프로젝트에서 재현할 수 있습니다.

이 튜토리얼에서는 사용자 양식 데이터를 검증하고, Vue에서 인증을 구현하고, Vue 및 Firebase(BaaS 플랫폼)를 사용하여 설문조사 데이터를 수신할 수 있는 방법을 배울 설문조사 앱을 빌드합니다.

이 앱을 빌드하면서 사용자가 가입 중에 양식을 제출하기 전에도 백엔드에 연락하여 이메일이 이미 수신되었는지 확인하는 것을 포함하여 다양한 종류의 데이터에 대한 양식 유효성 검사를 처리하는 방법을 배웁니다.

또한 앱은 restful API를 사용하여 사용자의 로그인을 처리합니다. Vue 라우터의 Authguard를 사용하여 로그인하지 않은 사용자가 설문 조사 양식에 액세스하는 것을 방지하고 로그인한 사용자의 설문 데이터를 안전한 데이터베이스로 성공적으로 보냅니다.

같은 페이지에 있으므로 Firebase가 무엇이며 이 튜토리얼에서 무엇을 할 것인지 명확히 합시다. Firebase는 "앱 구축, 개선 및 성장"을 위한 도구 모음으로, 개발자가 일반적으로 스스로 구축해야 하지만 실제로 구축하고 싶지 않은 서비스의 상당 부분에 대한 액세스를 제공합니다. 앱 경험 자체에 집중하세요. 여기에는 분석, 인증, 데이터베이스, 파일 스토리지 등이 포함되며 목록은 계속됩니다.

이는 일반적으로 프론트엔드 및 백엔드 소프트웨어를 모두 작성하는 기존 앱 개발과 다릅니다. 프론트엔드 코드는 백엔드에 의해 노출된 API 끝점을 호출하고 백엔드 코드는 실제로 작업을 수행합니다. 그러나 Firebase 제품을 사용하면 기존 백엔드를 우회하여 작업을 클라이언트에 맡깁니다. 이것은 기술적으로 나 같은 프론트엔드 엔지니어가 프론트엔드 코드만 작성하는 풀 스택 애플리케이션을 구축할 수 있도록 합니다.

점프 후 더! 아래에서 계속 읽기 ↓

결론은 Firebase가 인증 및 데이터베이스 요구 사항을 모두 처리하는 데 필요한 API 엔드포인트를 제공하여 이 프로젝트에서 백엔드 역할을 한다는 것입니다. 결국 Vue+ Firebase를 사용하여 기능 설문조사 앱을 구축하게 됩니다. 그런 다음 사용자 지정 백엔드를 포함하여 동일한 프로세스를 사용하여 원하는 웹 앱을 빌드할 수 있습니다.

따라 하려면 컴퓨터에 Node 및 npm/yarn이 설치되어 있어야 합니다. 아직 수행하지 않았다면 이 빠른 가이드에 따라 컴퓨터에 yarn 또는 npm을 설치하십시오. 또한 이 튜토리얼에서는 Vue, Vuex 및 Vue 라우터 구문에 대한 기본적인 이해가 필요합니다.

이 튜토리얼의 시작 파일이 바로 여기에 있으며 여기에는 이 프로젝트의 기본 파일이 포함되어 있으며 완성된 데모의 리포지토리가 있습니다. 저장소를 복제하거나 다운로드하고 터미널에서 npm install 을 실행할 수 있습니다.

스타터 파일을 설치하면 가입 및 로그인 옵션이 있는 시작 페이지가 표시됩니다. 로그인하면 설문조사에 액세스할 수 있습니다.

이 프로젝트를 완전히 독자적으로 구축하려는 경우 자유롭게 새 프로젝트를 생성하십시오. Vue 프로젝트에 Vuex, Vue 라우터, Vuelidate 및 axios를 설치해야 합니다. 그럼 바로 들어가 보겠습니다.

먼저 이 프로젝트를 설정하려면 Firebase 계정이 필요합니다. 이는 앱용 컨테이너를 생성하고 데이터베이스, 다양한 인증 수단, 호스팅 등에 대한 액세스 권한을 제공하는 것과 매우 유사합니다. 일단 설정하면 간단합니다. Firebase 사이트에 있습니다.

이제 프로젝트가 생겼으므로 Firebase에서 인증 시스템과 데이터베이스(실시간 데이터베이스)를 모두 설정해야 합니다.

• "인증"옵션을 클릭하십시오.
• 우리가 원하는 "로그인 방법"(이 경우 이메일/비밀번호)을 설정합니다.

• "데이터베이스"를 클릭하십시오.
• "실시간 데이터베이스"를 선택하고 맨 위에 있는 이 링크를 복사하십시오.

Firebase 데이터베이스에 데이터를 보낼 때 API 엔드포인트로 매우 유용합니다.

이 API를 데이터베이스 API라고 합니다. 그것을 사용하려면 보낼 때 선택한 데이터베이스의 이름을 추가해야 합니다. 예를 들어, user라는 데이터베이스에 전송합니다. 끝에 user.json 을 추가하기만 하면 됩니다.

 {databaseAPI}/user.json

그런 다음 Firebase auth rest API 문서로 이동하여 가입 및 로그인 API 엔드포인트를 얻습니다. 이러한 끝점 내에는 프로젝트 설정에서 찾을 수 있는 프로젝트의 API 키가 필요합니다.

확인

코드로 돌아가서 사용자가 적절한 정보를 보내고 있는지 확인하기 위해 서버로 보내기 전에 가입 데이터의 유효성 검사가 있습니다. Vue에서 유효성 검사를 더 쉽게 해주는 멋진 라이브러리인 Vuelidate를 사용할 것입니다. 먼저 Vuelidate를 프로젝트에 설치합니다.

 npm i vuelidate

src/components/auth/signup.vue 로 이동하고 스크립트 태그 내에서 vuelidate 및 아래 표시된 대로 라이브러리에서 필요한 모든 필요한 이벤트를 가져옵니다.

참고 : 라이브러리 및 사용 가능한 모든 이벤트에 대한 전체 개요는 문서를 확인할 수 있습니다.

 import { required, email, numeric, minValue, minLength, sameAs } from 'vuelidate/lib/validators'

빠른 설명:

설명

값
required	값은 필수입니다.
email	값은 이메일이어야 합니다.
numeric	숫자여야 합니다.
minValue	사용자가 입력할 수 있는 최소 숫자 값입니다.
sameAs	동일한지 확인하기 위해 두 값을 비교하는 데 사용됩니다.

 import axios from 'axios'

 "read" = "true"

 "write" = "auth" !== null

 "Users" = { "onIndex" : ["email"] }

 validations : { email: { required, email, unique: val => { if (val === '') return true return axios.get('https://vue-journal.firebaseio.com/users.json?orderBy="email"&equalTo="' + val + '"') .then(res => { return Object.keys(res.data).length === 0 }) } } }

 age: { required, numeric, minVal: minValue(18) }

 password: { required, minLen: minLength(6) }

 confirmPassword: { sameAs: sameAs(vm => { return vm.password }) }

 <div class="input" :class="{invalid: $v.email.$error}"> <h6 v-if="!$v.email.email">Please provide a valid email address.</h6> <h6 v-if="!$v.email.unique">This email address has been taken.</h6> <input type="email" placeholder="Email" @blur="$v.email.$touch()" v-model="email"> </div>

 <button type="submit" :disabled="$v.$invalid">create</button>

 state: { idToken: null, userId: null, user: null }

 mutations: { authUser (state, userData) { state.idToken = userData.token state.userId = userData.userId }, storeUser (state, user) { state.user = user }, clearAuthData (state) { state.idToken = null state.userId = null state.user = null } }

 signup ({commit, dispatch}, authData) { axios.post('https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=AIzaSyCFr-OMMzDGp4Mmr0t66w2cTGfNazYjptQ', { email: authData.email, password: authData.password, returnSecureToken: true }) .then(res => { console.log(res) commit('authUser', { token: res.data.idToken, userId: res.data.localId }) localStorage.setItem('token', res.data.idToken) localStorage.setItem('userId', res.data.localId) localStorage.setItem('email', res.data.email) dispatch('storeUser', authData) setTimeout(function () { router.push('/dashboard') }, 3000) }) .catch(error => console.log(error)) }

 login ({commit}, authData) { axios.post('https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=AIzaSyCFr-OMMzDGp4Mmr0t66w2cTGfNazYjptQ', { email: authData.email, password: authData.password, returnSecureToken: true }) .then(res => { console.log(res) localStorage.setItem('token', res.data.idToken) localStorage.setItem('userId', res.data.localId) localStorage.setItem('email', res.data.email) commit('authUser', { token: res.data.idToken, userId: res.data.localId }) router.push('/dashboard') }) .catch(error => console.log(error.message)) }

 storeUser ({ state}, userData) { if (!state.idToken) { return } axios.post('https://vue-journal.firebaseio.com/users.json' + '?auth=' + state.idToken, userData) .then(res => console.log(res)) .catch(error => console.log(error)) } }

 “write” = “auth” !== null

 methods : { onSubmit () { const signupData = { email : this.email, name : this.name, age : this.age, password : this.password, confirmPassword : this.co nfirmPassword } this.$store.dispatch('signup', signupData) } } }

 methods : { onSubmit = { const formData = { email : this.email, password : this.password } this.$store.dispatch('login', {email: formData.email, password: formData.password}) } }

 import store from './store'

 const routes = [ { path: '/', component: WelcomePage }, { path: '/signup', component: SignupPage }, { path: '/signin', component: SigninPage }, { path: '/dashboard', component: DashboardPage, beforeEnter (to, from, next) { if (store.state.idToken) { next() } else { next('/signin') } } } ]

 actions: { logout ({commit}) { commit('clearAuth') localStorage.removeItem('token') localStorage.removeItem('userId') router.replace('/') } }

 methods: { onLogout() { this.$store.dispatch('logout') } }

 <ul @click="onLogout">Log Out</ul>

 getters: { isAuthenticated (state) { return state.idToken !== null } }

 computed: { auth () { return this.$store.getters.ifAuthenticated } }

 <li v-if='auth'> <router-link to="/dashboard">Dashboard</router-link> </li> <li v-if='!auth'> <router-link to="/signup">Register</router-link> </li> <li v-if='!auth'> <router-link to="/signin">Log In</router-link> </li>

자동 로그인

앱을 다시 로드하면 데이터가 손실되고 로그아웃되어 처음부터 다시 시작해야 합니다. 이는 우리의 토큰과 ID가 자바스크립트인 Vuex에 저장되기 때문이며, 이는 앱을 새로 고칠 때 브라우저와 함께 앱이 다시 로드된다는 것을 의미합니다.

마지막으로 우리가 할 일은 로컬 저장소에서 토큰을 검색하는 것입니다. 이렇게 하면 창을 새로 고침할 때와 상관없이 브라우저에 사용자의 토큰을 가질 수 있고 토큰이 아직 유효한 한 사용자가 자동으로 로그인하는 방법을 사용할 수 있습니다.

AutoLogin 이라는 새로운 actions 메서드가 생성됩니다. 여기서 로컬 저장소에서 토큰과 userId 를 가져오고 변형에서 authUser 메서드에 데이터를 커밋합니다.

 actions : { AutoLogin ({commit}) { const token = localStorage.getItem('token') if (!token) { return } const userId = localStorage.getItem('userId') const token = localStorage.getItem('token') commit('authUser', { idToken: token, userId: userId }) } }

그런 다음 App.vue로 이동하여 created 메서드를 작성합니다. 이 메서드는 앱이 로드될 때마다 스토어에서 autoLogin 을 전달합니다.

 created () { this.$store.dispatch('AutoLogin') }

Fetch_User_Data

사용자 이름을 표시하여 대시보드에서 사용자를 환영하고 싶습니다. 따라서 fetchUser 라는 또 다른 작업이 생성되어 평소와 같이 토큰이 있는지 먼저 확인합니다. 그런 다음, 로컬 저장소에서 이메일을 가져오고 이메일 유효성 검사에서 이전에 수행한 것처럼 데이터베이스를 쿼리합니다.

이것은 가입 중에 처음 제출된 사용자 데이터를 포함하는 개체를 반환합니다. 그런 다음 이 객체를 배열로 변환하고 처음에 생성된 storeUser 변형에 커밋합니다.

 fetchUser ({ commit, state}) { if (!state.idToken) { return } const email = localStorage.getItem('email') axios.get('https://vue-journal.firebaseio.com/users.json?orderBy="email"&equalTo="' + email + '"') .then(res => { console.log(res) // const users = [] console.log(res.data) const data = res.data const users = [] for (let key in data) { const user = data[key] user.id = key users.push(user) console.log(users) } commit('storeUser', users[0]) }) .catch(error => console.log(error)) }

그런 다음 storeUser 를 통해 이미 커밋된 state.user 를 반환하는 user 라는 또 다른 getter를 storeUser .

 getters: { user (state) { return state.user }, isAuthenticated (state) { return state.idToken !== null } }

대시보드로 돌아가서 사용자가 있는 경우에만 state.user.name 을 반환하는 name 이라는 새 계산 메서드를 만듭니다.

 computed: { name () { return !this.$store.getters.user ? false : this.$store.getters.user.name } }, created () { this.$store.dispatch('fetchUser') } }

그리고 페이지가 로드되면 fetchUser 작업을 전달하기 위해 created 계산 속성도 추가합니다. 그런 다음 이름이 존재하는 경우 이름을 표시하기 위해 HTML에서 v-if 를 사용합니다.

 <p v-if="name">Welcome, {{ name }} </p>

Send_설문조사

설문 조사를 보내기 위해 사용자가 로그인한 서버를 표시하는 토큰과 함께 데이터베이스 API를 사용하여 데이터베이스에 데이터를 보내는 postData 작업을 만듭니다.

 postData ({state}, surveyData) { if (!state.idToken) { return } axios.post('https://vue-journal.firebaseio.com/survey.json' + '?auth=' + state.idToken , surveyData) .then(res => { console.log(res) }) .catch(error => console.log(error)) }

대시보드 구성 요소로 돌아가서 스토어의 postData 작업에 데이터를 전달합니다.

 methods : { onSubmit () { const postData = { price: this.price, long: this.long, comment: this.comment } console.log(postData) this.$store.dispatch('postData', postData) } }

Firebase 서버와 통신하는 동안 데모 애플리케이션에 구현된 유용한 기능이 많이 있습니다. 이러한 강력한 기능은 오늘날 최신 웹 앱을 구축하는 데 매우 중요하므로 다음 프로젝트에서 이 강력한 기능을 사용하기를 바랍니다.

질문이 있는 경우 댓글 섹션에 남겨주시면 하나하나 답변해 드리겠습니다!

• 튜토리얼의 데모는 여기에서 볼 수 있습니다.

유용할 수 있는 기타 리소스는 다음과 같습니다.

• Firebase 및 Firebase가 제공하는 기타 서비스에 대해 자세히 알아보려면 Chris Esplin의 기사 "Firebase란 무엇입니까?"를 확인하세요.
• Vuelidate는 정말 파헤쳐야 할 정말 멋진 라이브러리입니다. 완전한 통찰력을 얻으려면 설명서를 읽어야 합니다.https://vuelidate.js.org/.
• 특히 더 큰 프로젝트에서 사용하려는 경우 자체적으로 axios를 탐색할 수도 있습니다.