Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

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

本記事は、サムザップ 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です。

スクリーンショット 2019-12-12 3.02.48.png

Firebaseと連携してみる

事前準備

1.Firebaseのアプリ登録を行う
1.「プロジェクトの設定」からプロジェクトにアプリを追加します。
スクリーンショット 2019-12-12 3.07.54.png

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

2.プラットフォームはwebを選択する
スクリーンショット 2019-12-12 3.11.39.png

3.画面に従って登録する
スクリーンショット 2019-12-12 3.13.02.png

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のみ連携を有効にしてみる
スクリーンショット 2019-12-12 3.27.24.png

6.有効にするをON、サポートメールを選択して、保存する
スクリーンショット 2019-12-12 3.28.16.png

7.有効になってればOK
スクリーンショット 2019-12-12 3.31.03.png

プロジェクトに導入する

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

スクリーンショット 2019-12-12 3.49.34.png

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で結果を受け取って処理するだけです

スクリーンショット 2019-12-12 5.25.02.png

まとめ

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?