@nuxtjs/firebase 소셜 인증

요약: https://github.com/rodrigopv/nuxt-firebase-social-auth-demo

먼저 Nuxt.js 프로젝트를 설정합니다. 제 경우에는 Nuxt getting started page에 표시된 대로 yarn create nuxt-app를 사용했습니다.



그런 다음 getting started guide을 따라 @nuxtjs/firebase를 설치합니다.

다음 매개변수와 함께 Firebase 키(프로젝트에 웹 앱을 등록한 후 Firebase 콘솔에서 가져옴)를 nuxt.config.js에 추가하여 인증 모듈을 활성화해야 합니다.

nuxt.config.js:

  modules: [
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: 'FILL_THIS',
          authDomain: 'FILL_THIS',
          databaseURL: 'FILL_THIS',
          projectId: 'FILL_THIS',
          storageBucket: 'FILL_THIS',
          messagingSenderId: 'FILL_THIS',
          appId: 'FILL_THIS',
          measurementId: 'FILL_THIS'
        },
        services: {
          auth: {
            initialize: {
              onAuthStateChangedAction: 'onAuthStateChanged',
            },
            ssr: true,
          },
        }
      }
    ]
  ],

이제 파일은 다음과 같아야 합니다.


Nuxt가 서버 측에서 로그인한 사용자의 유효성을 검사하도록 허용하려면(SSR을 중단하지 않도록) 서비스 작업자도 활성화해야 합니다.yarn add --dev @nuxtjs/pwa

in nuxt.config.js add a 'pwa' key:

  pwa: {
    workbox: {
      importScripts: ['/firebase-auth-sw.js'],
      // by default the workbox module will not install the service worker in dev environment to avoid conflicts with HMR
      // only set this true for testing and remember to always clear your browser cache in development
      dev: process.env.NODE_ENV === 'development',
    },
  }

이제 Vuex 스토어를 사용하여 인증된 사용자 데이터를 관리합니다.

create store/actions.js

export default {
  async nuxtServerInit({ dispatch }, ctx) {
    if (this.$fire.auth === null) {
      throw 'nuxtServerInit Example not working - this.$fire.auth cannot be accessed.'
    }

    if (ctx.$fire.auth === null) {
      throw 'nuxtServerInit Example not working - ctx.$fire.auth cannot be accessed.'
    }

    if (ctx.app.$fire.auth === null) {
      throw 'nuxtServerInit Example not working - ctx.$fire.auth cannot be accessed.'
    }

    // INFO -> Nuxt-fire Objects can be accessed in nuxtServerInit action via this.$fire___, ctx.$fire___ and ctx.app.$fire___'

    /** Get the VERIFIED authUser from the server */
    if (ctx.res && ctx.res.locals && ctx.res.locals.user) {
      const { allClaims: claims, ...authUser } = ctx.res.locals.user

      console.info(
        'Auth User verified on server-side. User: ',
        authUser,
        'Claims:',
        claims
      )

      await dispatch('onAuthStateChanged', {
        authUser,
        claims,
      })
    }
  },

  onAuthStateChanged({ commit }, { authUser, claims }) {
    if (!authUser) {
      commit('RESET_STORE')
      return
    }
    console.log('AuthStateChangedAction', authUser)
    commit('SET_AUTH_USER', authUser)
  },
}

create store/getters.js

export default {
  isLoggedIn: (state) => {
    try {
      return state.authUser.id !== null
    } catch {
      return false
    }
  }
}

create store/index.js

export default {
  onAuthStateChanged({ commit }, authUser ) {
    if (!authUser) {
      commit('RESET_STORE')
      return
    }
    commit('SET_AUTH_USER', authUser)
  },
}

create store/mutations.js

import initialState from './state'

export default {
  RESET_STORE: (state) => {
    Object.assign(state, initialState())
  },

  SET_AUTH_USER: (state, authUser) => {
    state.authUser = {
      uid: authUser.uid,
      email: authUser.email
    }
  }
}

create store/state.js

export default () => ({
  authUser: null
})

이제 Vuex 스토어는 사용자가 로그인했는지 여부를 다른 구성 요소에 알릴 준비가 되어 있어야 합니다.

예제 앱의 몇 가지 기본 페이지를 만들어 보겠습니다.

기본 페이지: 누구나 액세스할 수 있음

로그인 페이지

사용자 패널

메인 페이지

예제 프로젝트에서 멋진 Vuetify를 사용한 것은 없습니다.

로그인 페이지

기본 페이지와 동일하지만 이제 Google 버튼으로 로그인:


이제 버튼이 실제로 작동하도록 만드는 중요한 메서드를 추가합니다.

On pages/login.vue:
First, implement the method that will do the login logic:

methods: {
      async signInWithGoogle() {
        var provider = new this.$fireModule.auth.GoogleAuthProvider();
       // You can add or remove more scopes here provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
        let authData = await this.$fire.auth.signInWithPopup(provider)
        this.$router.push('/profile')
      }
}

그런 다음 버튼 클릭 이벤트에서 이 메서드를 호출하는지 확인합니다.

 <v-btn @click="signInWithGoogle" color="primary" class="ma-2">Sign in with Google</v-btn>

이제 버튼이 작동하고 Google 로그인 팝업이 열릴 것입니다🤩.

이제 위에서 지정한/profile 경로를 구현해야 합니다. 이 경로는 이미 로그인한 사용자만 사용할 수 있습니다.

방금 기본 페이지를 복사했지만 로그인한 사용자 이메일을 검색하기 위해 Vuex getter를 추가했습니다.



로그아웃 기능을 구현하기 위해 프로필 보기 페이지에 다음 메서드를 추가합니다.

  methods: {
    async logout() {
      await this.$fire.auth.signOut()
      this.$router.push('/login')
    }
  }

버튼을 바인딩하여 사용합니다.

<v-btn @click="logout">Logout</v-btn>

이제 로그인 없이 페이지에 액세스하지 못하도록 보호하기 위해 미들웨어를 만듭니다.

in middleware/auth.js:

export default function ({ store, redirect }) {
  if (!store.getters['isLoggedIn']) {
    return redirect('/login')
  }
}

그런 다음 추가하여 사용자 프로필 페이지를 보호합니다.

 export default {
    middleware: 'auth',

로그인한 사용자 전용으로 만들고 싶은 각 페이지에.

지금 무엇

방금 Google과 소셜 로그인을 달성했습니다. Firebase는 몇 가지 추가 단계를 구성해야 할 수 있는 다른 많은 소셜 공급자를 지원하지만 훌륭하고 쉽게 작동합니다.

SSR 소개

서버 측 렌더링은 Vuex 서버 측을 저장하고 페이지가 새로고침될 때마다 클라이언트에 전달합니다.

클라이언트 측에서 사용하도록 설계된 Firebase 라이브러리이기 때문에 SSR과 함께 vuexfire와 같은 더 많은 기능을 사용하는 것이 아직 파악하지 못한 주요 과제일 수 있습니다.

SSR을 사용하고 싶지 않다면?

이 자습서는 제대로 작동하며 PWA/Service 작업자 부분을 생략할 수 있습니다.

피드백

나는 firebase 전문가가 아니며 Nuxt와 함께 사용하는 방법에 대해 더 많이 발견하고 있습니다. 이 가이드에 대한 의견이나 개선 사항이 있으시면 언제든지 말씀해 주십시오.

레포 예

최종 결과를 복제하려는 경우를 대비하여 이 예제를 github에 업로드했습니다.

Github 레포: https://github.com/rodrigopv/nuxt-firebase-social-auth-demo

더 많은 정보

@nuxtjs/firebase에서 작업한 lupas(https://www.github.com/lupas/)와 사용 방법에 대해 알아야 할 거의 모든 것이 포함된 데모https://github.com/lupas/nuxt-firebase-demo에 큰 감사를 드립니다.