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

## はじめに

この記事は [Firebase Advent Calendar 2018](https://qiita.com/advent-calendar/2018/firebase) の 18日目の記事です。

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

最新の実績です。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">うおおおおお、オントロジーハッカソン2位頂きました！！！<br><br>このトロフィー🏆カッコよすぎ！！！<br><br>賞金💰17万円を3人で山分けです 🤣🤣🤣 <a href="https://t.co/qpdip9umM2">pic.twitter.com/qpdip9umM2</a></p>&mdash; あおいちゃん⛓️ハッカソンマスター (@_serinuntius) <a href="https://twitter.com/_serinuntius/status/1071732946418118656?ref_src=twsrc%5Etfw">2018年12月9日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


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

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

です。

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

## 3分でGoogle認証を作る

### vueのpwaのテンプレート使う
```bash
 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](https://console.firebase.google.com/u/0/?hl=ja) にアクセスします。

![Screenshot from 2018-12-18 22-51-29.png](https://qiita-image-store.s3.amazonaws.com/0/82779/59a878ba-9e4f-9d01-1422-5d406b34a566.png)

適当にプロジェクトの設定をする。
![Screenshot from 2018-12-18 22-53-17.png](https://qiita-image-store.s3.amazonaws.com/0/82779/0b881c67-be61-45b8-3533-67d99141fc0b.png)

`Authentication` を選択する。
![Screenshot from 2018-12-18 22-54-56.png](https://qiita-image-store.s3.amazonaws.com/0/82779/3b11ec92-85d9-f1ec-5160-77a2ba9a9d90.png)

`ログイン方法を設定`
![Screenshot from 2018-12-18 22-55-57.png](https://qiita-image-store.s3.amazonaws.com/0/82779/f36c4483-8a75-c219-9fa2-7515f1979e70.png)

ここでは適当にGoogle認証を入れる。
![Screenshot from 2018-12-18 22-56-14.png](https://qiita-image-store.s3.amazonaws.com/0/82779/52e2e46f-37af-bbb2-c4d6-3de491715c02.png)

`有効にする` のトグルをスライドさせて保存。
![Screenshot from 2018-12-18 22-57-20.png](https://qiita-image-store.s3.amazonaws.com/0/82779/b0f73df5-d92b-1d44-f031-7ba24e19c66e.png)


歯車を押して `設定` に入る
![Screenshot from 2018-12-18 22-54-56.png](https://qiita-image-store.s3.amazonaws.com/0/82779/3b11ec92-85d9-f1ec-5160-77a2ba9a9d90.png)

`ウェブアプリにFirebaseを追加`
![Screenshot from 2018-12-18 22-59-42.png](https://qiita-image-store.s3.amazonaws.com/0/82779/19e45005-c1ba-51b5-4b4d-8cc542b9b753.png)

コンフィグが表示されるのでコピー
![Screenshot from 2018-12-18 23-00-09.png](https://qiita-image-store.s3.amazonaws.com/0/82779/272020f9-df01-8e0c-5e5a-e17d1d5ce924.png)


### コードの修正をする

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

```bash

npm run build
```


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


```js

<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>

```

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

![Screenshot from 2018-12-19 10-10-29.png](https://qiita-image-store.s3.amazonaws.com/0/82779/8de09f4c-8335-f214-051e-5c5f0c0acc32.png)

![Screenshot from 2018-12-19 10-13-16.png](https://qiita-image-store.s3.amazonaws.com/0/82779/f73a91e3-8879-73dc-619e-10a4be782842.png)




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

そう、Firebase Hostingならね！

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

```bash
npm run build
firebase deploy
```

デプロイされたURLに飛んでログインしてみると、ちゃんと管理画面の方でユーザが増えているのが確認できます。
![Screenshot from 2018-12-19 10-19-10.png](https://qiita-image-store.s3.amazonaws.com/0/82779/2eed2c7e-b3de-7a42-9609-6f7e0baaeba2.png)


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

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

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

<a href="https://twitter.com/_serinuntius?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @_serinuntius</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>