LoginSignup
26

More than 5 years have passed since last update.

VueとFirebase Authenticationを使用してGoogleログインを試す

Last updated at Posted at 2019-03-01

1.Firebaseでプロジェクトを作成

  • firebaseコンソールにログインしてプロジェクトを作成する
  • 作成したプロジェクトのAuthentication->ユーザーを選択し、ログインを行うテストユーザーを作成する
  • ログイン方法を選択し、メール/パスワードとGoogleのステータスを有効にする
  • ウェブ設定を選択すると、コードが表示される(後で使用する)

2.ローカルに開発環境を作成

  • 下記のコマンドを実行する
npm i vue -g
vue create <プロジェクト名>
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
cd <プロジェクト名>
vue add router
npm i vue bootstrap-vue -s
npm i firebase -s

3.ソースコード

  • ライブラリとFirebaseの設定
プロジェクト名/src/main.js
import Vue from 'vue'
import VueHead from 'vue-head'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import firebase from 'firebase/app'
import 'firebase/auth'
import router from './router'

Vue.use(BootstrapVue)
Vue.use(VueHead)

Vue.config.productionTip = false

// 1.Firebase側の設定のウェブ設定で表示したコードをコピペする
const firebaseConfig = {
    apiKey: "***",
    authDomain: "***",
    databaseURL: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "***"
};

firebase.initializeApp(firebaseConfig);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
  • ルーターを作成
プロジェクト名/src/router.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/Login.vue'
import Success from './views/Success.vue'
import firebase from 'firebase/app'

Vue.use(Router)

const router =  new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/success',
      name: 'success',
      component: Success
    },
    {
      path: '*',
      name: 'login',
      component: Login
    }
  ]
})

// 未認証の場合はログイン画面へ
router.beforeResolve((to, from, next) => {
  console.log(to)
  if (to.path == '/') {
    next()
  } else {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        console.log('認証中')
        next()
      } else {
        console.log('未認証')
        next({path: '/'})
      }
    })
  }
})

export default router
  • ログイン画面の作成
プロジェクト名/src/views/Login.vue
<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>ログイン画面</h2>
        <div class="mt-2"><b-form-input v-model="email" type="text" placeholder="メールアドレス" /></div>
        <div class="mt-2"><b-form-input v-model="password" type="text" placeholder="パスワード" /></div>
        <div class="mt-2"><b-button block variant="primary" @click="emailLogin">ログイン</b-button></div>
        <div class="mt-2"><b-button block variant="primary" @click="googleLogin">Google ログイン</b-button></div>
        <div class="mt-2"><b-alert v-model="showError" dismissible variant="danger">{{ errorMessage }}</b-alert></div>
      </div>
    </div>
  </div>
</template>
<style>
.mt-2 {
  margin-top: 2px;
}
</style>

<script>
import firebase from 'firebase/app'
import router from '../router'

export default {
  name: 'login',
  data() {
    return {
      email: '',
      password: '',
      errorMessage: '',
      showError: false
    }
  },
  methods: {
    emailLogin() {
      firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(result => {
        console.log(result)
        router.push('/success')
      }).catch(error => {
        console.log(error)
        this.errorMessage = error.message
        this.showError = true
      })
    },
    googleLogin() {
      const provider = new firebase.auth.GoogleAuthProvider()

      firebase.auth().signInWithPopup(provider).then(result => {
        console.log(result.user)
        router.push('/success')
      }).catch(error => {
        console.log(error)
        this.errorMessage = error.message
        this.showError = true
      })
    }
  }
}
</script>
  • ログイン成功画面の作成
:プロジェクト名/src/views/Success.vue
<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2>ログイン成功</h2>
        <div class="mt-4"><b-button block variant="primary" @click="logout">ログアウト</b-button></div>
      </div>
    </div>
  </div>
</template>

<style>
.mt-4 {
  margin-top: 4px;
}
</style>

<script>
import firebase from 'firebase/app'
import router from '../router'

export default {
  name: 'success',
  methods: {
    logout() {
      firebase.auth().signOut().then(function() {
        router.push('/')
      }).catch(error => {
        console.log(error.message)
        router.push('/')
      })
    }
  }
}
</script>

4.ログイン画面の確認

  • サーバを起動する
npm run serve
  • ログイン画面へアクセスし、メアド/パスかGoogleログインでログインを行う
    image.png

  • ログインに成功するとログイン画面が表示される

  • ログインせずにアクセスしようとしても、ログイン画面に飛ばされる
    image.png

5.Unexpected console statement (no-console)が発生した場合の対処

  • rulesに["no-console": "off"]を追加する
プロジェクト名/package.json
  "eslintConfig": {
    "rules": { "no-console": "off" }
  },

6.その他

Googleログインのリダイレクトも試したが、リダイレクトが終わる前に完了処理が実行されてしまう。。。
対処方法がわからないため、断念。。。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26