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

10368 ワード
Firebase Vue.js PWA FirebaseAuth Vue.js テキストリンク

はじめに

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

まえがき

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

最新の実績です。


ハッカソンで大事なのは、

  • 実装スピード
  • アイデア
  • 完成度
  • プレゼン

です。

実装スピードと完成度は似てるようで少し違います。
しかし、FirebaseとVue.jsを使えば両方かなりカバーできるのでオススメです。

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>

たったこれだけでログイン画面が出来てしまいました！！！

Firebase Hostingにデプロイする

なんとこのサイトすぐにサーバにデプロイできちゃいます！

そう、Firebase Hostingならね！

2つのコマンドを打つだけです。

npm run build
firebase deploy

デプロイされたURLに飛んでログインしてみると、ちゃんと管理画面の方でユーザが増えているのが確認できます。

まとめ

FirebaseのAuthenticationやVueを使えば爆速でPWA&いつでもデプロイ可能&Google認証の下地が一瞬で出来ています。

基本的に毎回この構成でやっていて、優勝してます。

ブロックチェーンのハッカソンに出て賞を取りたい人は、僕をTwitterでフォローして、ハッカソンに誘ってくれたら出るかも？です。

Follow @_serinuntius