Vue(x) + Firebase를 사용한 인증

본문의 배경과 최종 코드

주: 내 배경 이야기를 할 시간이 없나?문제 없어!show me the code부분의 코드로 바로 넘어가서 나쁜 느낌 없을 거예요, 친구!
최근에 나는 체육과 관련된 와족 단체에 가입했다.그들은 관점, 최신 소식, 경기 일정, 그리고 나의 주의를 가장 끄는 일, 즉 한 팀의 득점에 대한 예측을 공유했다.
점수 예측을 공유하기 위해 모든 사람이 템플릿 메시지를 복사하고 붙여서 새로운 소식으로 한다!!!우리가 채팅에서 이야기한 사람은 50명인데, 당신은 경기일 며칠 전의 정보량을 상상할 수 있습니까?나는 상상하지 못한다. 나는 일주일에 한 번 본다.
처음으로 세 가지 메시지를 보낸 후에 나는 이런 모델을 이해했고 나는 정말로 자신의 삶을 더욱 가볍게 하겠다고 약속했다. (스팸메일을 잿더미로 만들었다).그래서 저는 작은 사이트를 만들고 모든 사람이 하나의 개인 자료를 가지고 현재 유행하는'복제+붙여넣기'방법이 아니라 자신의 예측을 집중적으로 설정할 수 있도록 하려고 합니다.
만약 네가 나를 참을 수 있다면, 고마워!나는 네가 비슷한 문제에 부딪히지 않도록 아래의 코드를 보아야 한다고 생각한다. (나는 네가 머리를 다치지 않기를 바란다.) 또는 몇 줄의 코드에서 다른 프로젝트에 대한 신분 검증을 만들기만 하면 된다. 나는 다음 절차를 발표하여 상술한 문제의 모든 해결 방안을 보여줄 것이다.

목표가 뭐예요?

Dell의 목표는 다음과 같이 사용자에 대한 인증 로그인, 등록 및 암호 복구 옵션을 제공하는 것입니다.

비밀번호 보여주세요.

면책 성명: Firebase와 그것을 어떻게 설정하는지에 대한 게시물이 많습니다. 이 코드를 사용하기 위해서는 플랫폼에 대한 기본적인 이해가 있어야 합니다. 적어도 하나의 항목과 API 키를 사용할 수 있습니다.
Github 코드here를 공유하면 로컬에서 프로그램을 실행하는 요구를 찾을 수 있습니다.아직 초기 단계이기 때문에 아직 현장 시연이 없다.
주의: 이제 코드가 생겼는데 설명이 필요합니까?가자!너 자신을 What The Code구역으로 전송하면 너는 매우 즐겁게 놀 수 있을 거야!

비밀번호가 뭐예요?

방금 본 코드가 뭐예요?,알겠습니다. 이것은 당신을 위해 만든 환매 협의입니다. 당신은 VueJs와 Firebase를 사용하여 로그인을 만들고 싶습니다. 이것은 현명한 선택입니다.
여기서는 애플리케이션에 액세스할 수 있는 신규/구형 사용자의 인증 프로세스를 위해 발버둥칠 수 있는 비계를 제공합니다.

루트 파일 이해하기

화력 기지.js
이것은 Firebase의 입구점입니다. 당신package.json 파일에서 사용하는 의존항은 여기에 사용됩니다.이것은 아주 좋은 방법이 될 것이다. 참고는 이 파일에만 있을 것이다. 그리고 새로운 모듈이 반드시 포함되어야 한다면, 너는 단지 한 군데만 이렇게 할 것이라고 확신할 수 있다.
이 파일의 주요 부분은 keys입니다. 이 파일을 추가하면 Firebase 인스턴스가 활성화됩니다.

// firebase init
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
  measurementId: 'YOUR_MEASUREMENT_ID',
};

firebase.initializeApp(firebaseConfig);

이 아이템을 채우는 값은 Firebase's 프로젝트 컨트롤러에서 찾을 수 있습니다. 이 아이템들은 모두 다른 용도로 사용되며 한 번 또는 프로젝트 요구에 따라 하나씩 추가할 수 있습니다.
파일의 끝에 3 const 을 내보내고 있습니다. 다음 모듈에서 이 Firebase 실례를 사용하기 위해서입니다.

const db = firebase.firestore();
const auth = firebase.auth();

const usersCollection = db.collection('users');

export { db, auth, usersCollection };

매인.jsFirebase 모듈을 정의했기 때문에 main.js를 가져옵니다firebase. 프로그램이 Vue에 필요한 가져오기와 스타일 밖으로 유도할 때 Vue 실례에서도 사용할 수 있습니다.주의해야 할 것은 onAuthStateChanged 응용 프로그램 등록은 사용자가 습관적으로 할 수 있는 등록과 조금 다르다는 것입니다. 이것은 우리가 createdobserver를 구독하고 있기 때문입니다. 이것은 응용 프로그램에 새로운 변경 사항이 발생하지 않도록 개방된 다리를 유지할 것입니다.

const unsubscribe = auth.onAuthStateChanged(firebaseUser => {
  new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App),
    created() {
      if (firebaseUser) {
        store.dispatch('fetchUserProfile', firebaseUser);
      }
    },
  });
  unsubscribe();
});

또 하나는 Firebase 갈고리입니다. 여기서 사용자 정보를 얻기 위해 (우리가 사용하는 것은 Vuex이기 때문에) 동작을 조정하고, 사용자가 응용 프로그램에 도착할 때 오버를 통해 수동으로 로그인해서 재검증하는 것을 피합니다.이 방법이 어떻게 이루어지는지 알고 싶으면, 문서에 따라, 긴 말 toggle 은 기본적으로 인덱스 DB에 로컬 지속성을 설정합니다.

Indicates that the state will be persisted even when the browser window is closed or the activity is destroyed in React Native. An explicit sign out is needed to clear that state. Note that Firebase Auth web sessions are single host origin and will be persisted for a single domain only.

만약 네가 그것을 읽고 싶다면 할 수 있다here

너의 관점을 이해하다

네?vue
이것은 우리 응용 프로그램의 주요 보기입니다. 여기에는 서로 다른 구성 요소가 있습니다. 이 구성 요소들은 하나의 전체로 통합되어 인증 옵션을 제공합니다.
3개의 구성 요소만 가져오고 상호 배타적입니다. 즉, 여기서 찾은 함수는 DOM 2에서만 추가/삭제됩니다.

import LoginForm from '@/components/LoginForm';
import SignUpForm from '@/components/SignUpForm';
import PasswordReset from '@/components/PasswordReset';

우리는 조건문, css와 데이터 도구를 조회할 수 있다.그러나 이 관점의 가장 중요한 부분은 async/await표시된 방법이다.

  ...
  async login(data) {
    await this.$store.dispatch('login', {
      email: data.email,
      password: data.password,
    })
  },
  ...

우리는 왜 스케줄을 기다려야 합니까?만약에 우리가 국가로부터 정보를 전달해야 한다면 집행체인의 일부로서 우리는 밑바닥에서 발생하는 모든 일을 기다려야 하기 때문이다.예를 들어, 등록을 시도할 때 예상되는 트래픽은 다음과 같습니다.

등록 신청서 제출

BE

에서 응답 받기

응답을 받았는데 이제 어떡하지?

   3.1) 사용자가 등록됨 => 새 자격 증명을 사용하여 로그인으로 이동
   3.2) 사용자 설정 형식이 잘못된 전자 메일 => 문제가 있음을 알리고 수정 및 재시도할 수 있도록 보관
좀 아시겠어요?우리가 즐거움의 길을 처리하지 않을 때, 선택할 수 있는 절차가 있다. then (여기는 구멍을 가리킨다). 다음 단계에 들어가기 전에 우리는 기다려야 한다.

당신의 가게를 알아보다

색인js
이 파일은 저장의 핵심으로 상태의 주요 속성은 여기에 있어야 한다.하나의 주요 장점은 필요에 따라 다른 상태 모듈(예를 들어 authentication.js을 가져와 응용 프로그램에 노출시키는 동시에 주state, getters, mutations를 낮은 모듈에 사용할 수 있다는 것이다.
이 예는 상태 도구를 각 상태에서 사용할 수 있도록 하는 것이기 때문에 Vue와 Firebase 간의 상호작용 과정에서 오류나 정보 메시지가 발생하면 상태가 알림과 변경을 받을 수 있다.
인증js
이것은 하나의 모듈로 인증 과정과 관련된 모든 것을 책임진다.로그인, 로그아웃, 등록, 비밀번호 복구, 심지어 성공적으로 로그인했을 때 사용자 정보를 찾습니다.
보시다시피 상태는 매우 간단합니다. userProfile 아이템 하나만 있고 조작 결과에 따라 설정/획득;로그인 작업에 대해 살펴보겠습니다.

  ...
  async login({ commit, dispatch }, payload) {
    commit('setLoading', true);
    await fb.auth.signInWithEmailAndPassword(payload.email, payload.password)
      .then(firebaseData => {
        dispatch('fetchUserProfile', firebaseData.user);
        commit('setLoading', false);
        commit('setError', null);
      })
      .catch(error => {
        commit('setLoading', false);
        commit('setError', { login: error });
      });
  },
  ...

여기에서 발생한 일은 Firebase Emailand Password 방법으로 비동기 로그인을 공개했다. 전자메일과 비밀번호만 있으면 되고 이 작업이 해결될 때 우리는 사용자의 데이터(유효한 로그인이라면)를 가져와 다른 곳으로 이동해야 한다. 예를 들어 로그인 페이지와 같다.
취소하면 어떡하지?,더 간단해!,공개된 비동기 서명 방법은 우리가 이렇게 하는 것을 의미한다. 이 예에서 서명한 후에 사용자의 프로필을 무효화시키는 데 사용되는 제출이 있고 사용자는 /auth 보기로 바뀐다.

  ...
  async logout({ commit }) {
    await fb.auth.signOut()
    commit('setUserProfile', {})
    router.currentRoute.path !== '/auth' && router.push('/auth');
  },
  ...

내가 너에게 가장 까다로운 것을 보여 주겠다. 나는 등록과 공개하는 방법을 가리킨다.createUserWith EmailAndPassword. 사용자에게 힌트를 제공할 준비가 되어 있느냐?

  ...
  async signup({ commit }, payload) {
    commit('setLoading', true);
    await fb.auth.createUserWithEmailAndPassword(payload.email, payload.password)
      .then(firebaseData => {
        fb.usersCollection.doc(firebaseData.user.uid).set({
          nickname: payload.nickname,
          name: payload.name,
          email: payload.email,
          enable: true
        })
          .then(_ => {
            commit('setLoading', false);
            commit('setInformation', { signUp: { code: 'Success', message: `User created!, use your new credentials` } });
            commit('setError', null);
          })
      })
      .catch(error => {
        commit('setLoading', false);
        commit('setInformation', null);
        commit('setError', { signUp: error });
      });
  },
  ...

쌍인실then을 알아본 게 확실해. 왜?,때때로 사용자와 관련된 기본 프로필을 만드는 것 외에 새로운 사용자와 관련된 맞춤형 도구가 필요할 수도 있습니다.이왕 이렇게 된 이상 창설 과정의 결과를 기다리는 것입니다. usersCollection 새 프로필과 관련된 유일한 사용자 ID로 새 기록을 추가합니다. 예를 들어porpuses. nickname, name, email, enable 새 문서 집합에만 저장되며, 필요에 따라 임의의 기록을 추가할 수 있습니다.
비밀번호 알고 싶으세요?또 다른 공개 방법:sendPasswordResetetEmail, 준비됐습니다!우편물을 보내면 됩니다.

  ...
  async resetPassword({ commit }, payload) {
    commit('setLoading', true);
    await fb.auth
      .sendPasswordResetEmail(payload.email)
      .then((_) => {
        commit('setLoading', false);
        commit('setInformation', { resetPassword: { code: 'Success', message: 'Success!, check your email for the password reset link' } });
        commit('setError', null);
      })
      .catch((error) => {
        commit('setLoading', false);
        commit('setInformation', null);
        commit('setError', { resetPassword: error });
      })
  }
  ...

setInformation이 제출한 것을 알 수 있습니다. 댓글의 앞부분을 기억하십니까?모듈 간 공유 상태의 장점을 언급할 때?,그래, 그중의 일부야!하나의 속성을 루트 상태로 하여 알림(store/index.js/information을 저장하고 각 모듈에 해당하는 정보를 제공하도록 할 수 있다(store/modules/authentication.js/resetPassword. 필요하면 구독자 구성 요소에 이 점을 알릴 수 있다(views/Auth.vue => getters.얼마나 좋은 일련의 행운 사건인가!

라우터 이해

색인js
우리는 보기가 있다. 우리는 상태가 있다. 우리는 구성 요소가 있다(components/LoginForm-PasswordReset-SignUpForm. 나는 그것들을 심사하지 않을 것이다. 그들은 가상 구성 요소이고 입력 도구, 검증과 발송 이벤트가 있다). 그러나 우리는 어떻게 그것을 안전하게 할 것인가?어떻게 하면 로그인하지 않은 사용자가 응용 프로그램에 들어가는 것을 피할 수 있습니까?
루트를 정의할 때 사용자 정의 도구가 있는 원 속성을 추가할 수 있습니다. 이 예requiresAuth에서 이 원 로고가 있는 모든 루트는 최종적으로 사용자가 페이지에 접근할 권리가 있는지 확인할 수 있습니다.

  ...
  const routerOptions = [
    { path: '/', component: 'Landing', meta: { requiresAuth: true } },
    { path: '/auth', component: 'Auth' },
    { path: '/landing', component: 'Landing', meta: { requiresAuth: true } },
    { path: '*', component: 'Auth' }
  ]
  const routes = routerOptions.map(route => {
    return {
      ...route,
      component: () => import( /* webpackChunkName: "{{route.component}}" */ `../views/${route.component}.vue`)
    }
  })
  Vue.use(Router)
  ...

따라서 실례화Router할 때beforeach 방법은 앞에서 언급한 메타데이터 속성을 검사하는 부분이다.이를 위해authconst의Firebase의 단일 실례를 폭로하여currentUser 속성에 접근할 수 있도록 하기 때문에 사용자가 방문하고자 하는 페이지가 필요하고authenticationcurrentUser가 인증되지 않거나 존재하지 않으면 /auth 루트로 다시 지정한다Auth.vue고도 부른다.

  ...
  const router = new Router({
    mode: 'history',
    routes
  });
  router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    const isAuthenticated = auth.currentUser;
    if (requiresAuth && !isAuthenticated) {
      next('/auth');
    } else {
      next();
    }
  });
  ...

결론

보시다시피 서로 다른 기술을 함께 놓으면 간단한 로그인으로 완성할 수 있습니다!
코드나 해석에 도움이 되었으면 합니다. 어떤 생각이나 건의가 있습니까?다음 댓글 하나 주세요!
읽어주셔서 감사합니다!