はじめに
この記事は Firebase Advent Calendar 2018 の 18日目の記事です。
まえがき
最近ブロックチェーンのハッカソンに参加しまくって国内外で5回以上賞を取って賞金だけで100万ぐらい稼いでいると思うのですが、ハッカソンで優勝しまくってる秘密の1つを教えちゃいます!
最新の実績です。
うおおおおお、オントロジーハッカソン2位頂きました!!!
— あおいちゃん⛓️ハッカソンマスター (@_serinuntius) 2018年12月9日
このトロフィー🏆カッコよすぎ!!!
賞金💰17万円を3人で山分けです 🤣🤣🤣 pic.twitter.com/qpdip9umM2
ハッカソンで大事なのは、
- 実装スピード
- アイデア
- 完成度
- プレゼン
です。
実装スピードと完成度は似てるようで少し違います。
しかし、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 にアクセスします。
コードの修正をする
この環境では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でフォローして、ハッカソンに誘ってくれたら出るかも?です。