Nuxt.js + FirebaseAuthでサインイン機能を実装してみた

11603 ワード
FirebaseAuth Vue.js nuxt.js Vue.js テキストリンク

本記事は、サムザップ Advent Calendar 2019 #2 の12/12の記事です。

株式会社サムザップの枦川です。
クライアントエンジニアをしています

はじめに

直近今関わっているPJの案件でSNSのサインイン機能を検討しているのですが、
Webの知識は乏しいので勉強をかねて簡易なサインイン機能を
Vue.js + Nuxt.js + FirebaseAuth
の組み合わせで実装してみたいと思います

今回は簡易版のためgoogleアカウントでのログインができるところまでをゴールとして
記事を書きます

Nuxt.jsとは

Zeit社が開発したユニバーサルなReactアプリの開発が可能なフレームワーク。
Webアプリ開発の機能が最初から組み込まれているVue.jsベースのJavaScriptフレームワークです。

環境情報

Node v10.16.0

プロジェクトの準備

1.Nuxtのプロジェクトを作成してみましょう
以下のサイトを参考にインストールしてみてください
https://ja.nuxtjs.org/guide/installation/
を確認してみてください。

とりあえすプロジェクトを作成してみましょう

npm i -g create-nuxt-app
npx create-nuxt-app <project-name>

いくつか質問されますが今回はそのままEnterで大丈夫です。

create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in firebase_auth_sample
? Project name firebase_auth_sample
? Project description My impeccable Nuxt.js project
? Author name HashikawaKazuhiro
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
⠋ Installing packages with yarn
⠹ Installing packages with yarn
⠼ Installing packages with yarn

2.作成したプロジェクトを起動してみましょう

cd <作成したprojectのディレクトリ>
yarn dev

http://localhost:3000/ にアクセスしてみる
以下のように表示されればOKです。

Firebaseと連携してみる

事前準備

1.Firebaseのアプリ登録を行う
1.「プロジェクトの設定」からプロジェクトにアプリを追加します。

今回はFirebaseAuthSampleというプロジェクト名にします

2.プラットフォームはwebを選択する

3.画面に従って登録する

4.アプリ登録をすると以下のにように表示されるのでfirebaseConfigの内容をひかえておく

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyDE0mFS6zU-570bEu-r4UiGrCNGzDjwTK4",
    authDomain: "fir-authsample-ead7e.firebaseapp.com",
    databaseURL: "https://fir-authsample-ead7e.firebaseio.com",
    projectId: "fir-authsample-ead7e",
    storageBucket: "fir-authsample-ead7e.appspot.com",
    messagingSenderId: "982089738436",
    appId: "1:982089738436:web:870f3c6e92964d24a38191",
    measurementId: "G-YWWT4JPEFR"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

5.FirebaseAuth機能にて、gmailのみ連携を有効にしてみる

6.有効にするをON、サポートメールを選択して、保存する

7.有効になってればOK

プロジェクトに導入する

1.Firebaseのプラグインを作成する
Firebaseの初期は一度のみ行えば良いのでpluginを作成して初期化を行う
dotenvとかでenvファイルに外だしで指定できますが今回はその辺は省略で

plugins/firebase.js

import firebase from 'firebase'

//一度だけ初期化する
if (!firebase.apps.length) {
    var firebaseConfig = {
      apiKey: "AIzaSyDE0mFS6zU-570bEu-r4UiGrCNGzDjwTK4",
      authDomain: "lfir-authsample-ead7e.firebaseapp.com",
      databaseURL: "https://fir-authsample-ead7e.firebaseio.com://lynomi-staging-711e3.firebaseio.com",
      projectId: "fir-authsample-ead7e",
      storageBucket: "fir-authsample-ead7e.appspot.com",
      messagingSenderId: "982089738436",
      appId: "1:982089738436:web:a68cf505064bc7a8a38191"
    }

    firebase.initializeApp(firebaseConfig)
}

export default firebase

2.ルーターを作成する
https://ja.nuxtjs.org/guide/routing/

3.ログイン画面を作成する

pages/index.vue
<template>
  <div class="container">
    <div class="row">
        <div class="button--green"> <b-button block variant="primary" @click="login">Google Login</b-button></div>
    </div>
  </div>
</template>

<script>
import firebase from 'firebase/app'
import router from '../router'

export default {
   name: 'login',
   methods: {
      login:function (){
        var provider = new firebase.auth.GoogleAuthProvider()
        firebase.auth().signInWithRedirect(provider)
        .then(res => {
          this.$router.push('/logout')
        })
      }
   }
}
</script>

4.ログインする。以下のようにログイン画面が表示されます。
あとは、ログインできたらsignInWithRedirect.thenで結果を受け取って処理するだけです

まとめ

FirebaseAuthを利用することで、Nuxt.jsで作成したwebサイトに簡単にログイン機能を実装することができました。FB/Twitterとも連携できるので今後そちらも試してみたいと思います。

明日は @Gaku_Ishii さんの記事です。