ハッカソンで差をつけろ!瞬速 Firebase Authentication ~3分クッキング~ Vueを添えて #Vue.js

はじめに

この記事は Firebase Advent Calendar 2018 の 18日目の記事です。

まえがき

最近ブロックチェーンのハッカソンに参加しまくって国内外で5回以上賞を取って賞金だけで100万ぐらい稼いでいると思うのですが、ハッカソンで優勝しまくってる秘密の1つを教えちゃいます！

3分でGoogle認証を作る

vueのpwaのテンプレート使う

 npm install -g @vue/cli
 npm install -g firebase-tools
 vue init pwa my-project # ここお好きなプロジェクト名
 cd my-project
 npm i
 npm i --save firebase
 firebase init

firebaseのコンソールで設定する

https://console.firebase.google.com/u/0/?hl=ja にアクセスします。

適当にプロジェクトの設定をする。

Authentication を選択する。

ログイン方法を設定

ここでは適当にGoogle認証を入れる。

有効にする のトグルをスライドさせて保存。

歯車を押して 設定 に入る

ウェブアプリにFirebaseを追加

コンフィグが表示されるのでコピー

コードの修正をする

この環境ではCLIでテンプレートを使っているので、HMR(差分検知してビルドしてくれる超便利機能)も入ってますし、ただ npm run build するだけで開発用のサーバと自動ビルド環境が手に入ります。


npm run build

src/components/Hello.vue を好きなエディタで開いてfirebaseのコンフィグやらを書いたら、もうGoogle認証が出来ちゃいましたね！！


<template>
  <div class="hello">
    <button @click="login">login</button>
  </div>
</template>

<script>
import firebase from 'firebase'

// コンソールから取得したコンフィグをペースト
const config = {
    apiKey: "",
    authDomain: "hogefuga.firebaseapp.com",
    databaseURL: "https://hogefuga.firebaseio.com",
    projectId: "hogefuga",
    storageBucket: "hogefuga.appspot.com",
    messagingSenderId: "323003240989"
  };
firebase.initializeApp(config)


export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js PWA'
    }
  },
  methods: {
    login() {
      const provider = new firebase.auth.GoogleAuthProvider()
      firebase.auth().signInWithPopup(provider)
        .catch(error => alert(error.message))
        .then(data => {
          // ここにログインできたときの処理を書く
          alert('login success')
          console.log(data)
        })
    }
  }
}
</script>