36
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

FirebaseAdvent Calendar 2018

Day 18

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

Last updated at Posted at 2018-12-19

はじめに

この記事は 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 にアクセスします。

Screenshot from 2018-12-18 22-51-29.png

適当にプロジェクトの設定をする。
Screenshot from 2018-12-18 22-53-17.png

Authentication を選択する。
Screenshot from 2018-12-18 22-54-56.png

ログイン方法を設定
Screenshot from 2018-12-18 22-55-57.png

ここでは適当にGoogle認証を入れる。
Screenshot from 2018-12-18 22-56-14.png

有効にする のトグルをスライドさせて保存。
Screenshot from 2018-12-18 22-57-20.png

歯車を押して 設定 に入る
Screenshot from 2018-12-18 22-54-56.png

ウェブアプリにFirebaseを追加
Screenshot from 2018-12-18 22-59-42.png

コンフィグが表示されるのでコピー
Screenshot from 2018-12-18 23-00-09.png

コードの修正をする

この環境では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>

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

Screenshot from 2018-12-19 10-10-29.png

Screenshot from 2018-12-19 10-13-16.png

Firebase Hostingにデプロイする

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

そう、Firebase Hostingならね!

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

npm run build
firebase deploy

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

まとめ

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

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

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

Follow @_serinuntius

36
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?