vue.js+firebaseで超簡単!ソーシャルログインを実装するまで

いまどき、アカウント作成にIDやパスワードを入力させるのは賢い選択とは言えないようです。
いやぁー便利ですよね。ソーシャルログイン。ボタン一つで会員登録＆ログインが完了してしまうんですから。

ソーシャルログインは良いものだ

FacebookやTwitter、Googleのアカウントがそのまま使えるので、開発者、利用者双方に大きなメリットがあります。

利用者側の利点

列挙してみましょう。

• ID・パスワードを入力する手間が省ける
• 運営会社にパスワードのような重要な情報を渡さなくて済む
• わざわざID・パスワードを覚えておく必要がない

ちょっと試しに使ってみたい。というときも、お手軽に体験できるのはいいですね。

開発者側のメリット

実は開発者側もソーシャルログインによる恩恵が受けられます。最大のメリットはクライアントのID・パスワードの管理が不要になる点でしょう。
正直ね、個人情報なんて扱いたくないです。万が一流出してしまった時のリスクは大きい上に、IDとパスワードに関する処理だけでもかなりの手間がかかります。
パスワードが万が一流出してしまったときのために、パスワードは暗号化しておく必要があります。
クライアントが万が一パスワードを忘れてしまった時、再発行の手順を考えておく必要があります。
このあたりの管理が削減できるだけでも、ソーシャルログインを実装するメリットは十分にあるでしょう。
なにより楽です。

ソーシャルログインの実装は少し面倒です。ただし自前で用意する場合に限る

ソーシャルログインってという仕組みを使います。
あまり詳しくは理解していませんが、運営するサービスと、プロバイダ（FacebookやTwitterのようなクライアントのID情報を提供する側）と、クライアントが絡んでくるので処理の流れがわかりにくく、どのように実装したら良いのか皆目検討が付かないですよね。少なくとも私は全然わかりませんでした。
しかしソーシャルログインは時代の流れとともに需要もましています。実装しているサイトも増えてきました。
ソーシャルログインを簡単に実装する１つの方法として、Auth0というサービスがあります。ユーザ認証を専門に提供するサービスです。

Auth0は対応範囲がとても幅広く、SPAはもちろん、通常のWebサイト、モバイル・アプリケーションまで幅広くサポートしています。

Firebaseでもソーシャルログインができます

Auth0は素晴らしいサービスですが、今回はもっと簡単に、Firebaseだけで実装していく例をご紹介します。
Firebaseのホスティング機能と、認証機能があればソーシャルログインが簡単に実装できます。
サーバ側は全てFirebaseにお任せです。
サーバとは向こう岸の存在だよ。我々フロントにとってはね・・・
だから、ドメインを取るとか、SSL対応するとか、そんなことを一切考える必要がなくなります。

Vue.jsとFirebaseでソーシャルログインを始める

さて、ここからが本題です。（前置きが長いのはいつものことです）
Firebase周りのセットアップはお済みですか？まだでしたらこちらを参照して下さい
Vue.jsのセットアップはお済みですか？まだでしたらこちらを参照して下さい

Vue cli と firebase Cliが使えるようになったら、早速セットアップしていきます。

firebase上にプロジェクトを１個作成します

作成自体は簡単です。作成完了後、アプリの情報を確認しておきましょう

<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "****",
    authDomain: "****.firebaseapp.com",
    databaseURL: "https://****",
    projectId: "***",
    storageBucket: "****",
    messagingSenderId: "****"
  };
  firebase.initializeApp(config);
</script>

一部は*で伏せ字にしております。このvar configの中身を控えておきます。（あとで使うよ）

次に、Googleアカウントでソーシャルログインが出来るように設定をしておきましょう。

左のメニューからAuthenticationをクリックして、Googleによるソーシャルログインを「有効」にするだけです。

Vue.jsプロジェクトをセットアップ

Vue.jsはCLIが提供されていますので、これを使うとプロジェクトを簡単にセットアップできます。

vue init webpack vueapp

いくつか質問されますが、よしなに答えてあげましょう。ちなみに今回はこんな感じで回答しました

? Project name vueapp
? Project description A Vue.js project
? Author macBookPro 15Inch
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

サンプル紹介なので、lintや単体テスト・ユニットテストあたりは不要ですね。

その後は、プロジェクトフォルダに移動し、パッケージをインストールします。

cd vueapp
npm install

これでプロジェクトが作成されました。実際に動かすときは

npm run dev

と入力すれば動きます。環境構築は本当に簡単です

Firebaseで使うAPIをインストール

 npm install firebase --save

これだけです。
Vue.jsに特化したVueFireというものもあるようですが、今回は公式が提供している機能を使用していきます。

Vue.jsでソーシャルログインを実装する

ここからコードを追記していきます。思いの外簡単に実装できちゃいます。
まずはsrc/main.jsを開いて以下のように書き換えます

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'


// 追記ここから
import Firebase from 'firebase'　
let config = {
  // ここ以下の内容は適時皆さんの内容で書き換えて下さい
    apiKey: "****",
    authDomain: "****.firebaseapp.com",
    databaseURL: "https://****",
    projectId: "***",
    storageBucket: "****",
    messagingSenderId: "****"
};
let firebaseApp = Firebase.initializeApp(config)
//　追記ここまで


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

コード中のapiKey〜messagingSenderIdは、firebaseで控えておいた値です。

続いて、Googleでログインページを作っていきましょう。
src/components/Login.vueを作成し、以下のコードを記述します(Login.vue先頭は大文字です）

<template>
  <div class="login">
    <h3>login</h3>
    <button v-on:click="signup()">sign up</button>
    <p>your name is {{userName}}</p>
  </div>
</template>

<script>
import firebase from 'firebase'
export default {
  name: 'Login',
  data () {
    return {
      userName: 'anonimouse',
    }
  },
  computed:{
  },
  methods: {
    signup:function(){
      var provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithPopup(provider).then(
        result => {this.userName = result.user.displayName;},
        error  => {alert("ログインに失敗しました")}
      )
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Loginページへのルーティングも設定する必要があります。今回のプロジェクトではVueRouerを使っていますので、src/router/index.jsを開いて以下のように書き換えます

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// これを追加
import Login from '@/components/Login'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: HelloWorld
    },//これ以下も追加
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

プロジェクト階層はこんな感じになります

これでソーシャルログインが使えるようになりました

本当に必要最小限ですが、これでソーシャルログインが出来るようになりました。疑っていますか？では実際に動かして見ましょう。

npm run dev

起動したら作成したログインページにアクセスしましょう。URLはhttp://localhost:8080/#/loginですね。

ブラウザがGoogleのアカウントを記憶していれば、「承認」ボタンを押すだけです。（写真の例はアカウントを記憶していないバージョンです）
さて、正しくログインが出来ると

本来は、ソーシャルログインに成功したら画面遷移することが多いでしょう。その場合は

this.$router.replace("member")

などと書いてページ遷移することで対応できます。

今回のサンプルコードはGithubからダウンロードできます

firebaseを使えばソーシャルログインは簡単

実際に作成してみてどうでしたか？簡単にソーシャルログインが実装できたと思います。
この後は、データベースの扱いなど、さらに一歩進んだfirebaseの公式チュートリアルを一度やっておくことをおすすめします。
このチュートリアルでは、ソーシャルログインで利用できる簡単なチャットアプリを作ることを目的としております。ただしJavaScriptのフレームワークを使わない、プレーンなJavascriptのサンプルです。まぁ、vue.jsではないですが、大変参考になります。