Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
22
Help us understand the problem. What is going on with this article?
@teradatk

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

More than 1 year has passed since last update.

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

22
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
teradatk
ata5
株式会社愛宕はIT技術の提供のみでなく、企画、提案、保守運用などインターネットのあらゆるニーズにお応えいたします

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
22
Help us understand the problem. What is going on with this article?