社内LT会で発表しました

昨日、社内でLT会があり発表させてもらいました。

毎月開催されており今までは聴く側だったのですが、今回始めて登壇してみました。

自分自身、発信力だったり考えを整理して伝えるという点が苦手ということもあり、少しでも改善できれば...という思いです。

登壇資料

発表に使った資料がこちらです。

内容について

今回は Firebase Authentication について発表しました。

要点は以下のとおりです。

* Firebase Authenticationでソーシャルログイン実装してみた
* めっちゃ簡単に実装できる
* けど実務で使えるかというと微妙

業務時間外に個人で色々いじっていたのをまとめてみたって感じです。

↑のスライドの内容をこのブログでも改めて整理してみようと思います。

NuxtでFirebase Authentication使ってTwitterログインを実装してみた

今回はNuxt上で試してみましたので こちらのパッケージを使いました。

yarn add @nuxtjs/firebase

Twitter Developersでのアプリの作成やFirebaseのアカウント作成・Twitterログインの有効化等については割愛します。

nuxt.config.jsにFirebaseの設定を追加します。予め環境変数にFirebaseの設定を追加しておきます。

modules: [
    '@nuxtjs/firebase'
  ],
firebase: {
  config: {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID
  },
  services: {
    auth: true
  }
}

準備ができたらログインボタンを用意して、ボタンのclickイベントを設定します。

async signinWithTwitter() {
  const provider = new this.$fireModule.default.auth.TwitterAuthProvider();
  await this.$fire.auth.signinWithRedirect(provider);
}

@nuxtjs/firebaseではthis.$fireでサービスのインスタンスに、this.$fireModuleでFirebaseのモジュールにアクセスできます。

TwitterAuthProviderをsigninWithRedirect()の引数に渡してあげるだけでボタンをクリックした時にTwitterのアプリ認証画面に飛びます。

ちなみにsigninWithRedirect()以外にもsigninWithPopup()という関数もありますが、モバイルではポップアップがブロックされることがある為、Redirectの方が推奨のようです。

Twitterのアプリ認証画面で認証が終わると元いたURLにリダイレクトされます。

この時にユーザー情報を取得する為にgetRedirectResult()を呼び出します。

async mounted() {
  const user = await this.$fire.auth.getRedirectResult();
  console.log(user);
}

そうするとこんな感じでユーザー情報が取れます。

という訳で実装は以上で完了です。めっちゃ簡単です。

実際のところどうなのか？

ですが、正直実務ではあまり使いたくないというのが本音です。

なぜならCredentialsをフロントエンドで扱っているからです。

想定されるユースケースとしてログインしたユーザーのAccessTokenでAPIを叩く、というものが考えられると思います。

実際 こちら のTwitter APIのケースを見るとアプリのトークンだと15分間で1500回までの制限があるのに対し、ユーザーのトークンだとユーザーごとに15分間で900回です。

手元のローカル環境で試す分にはどちらでも大差ないですが、多数のユーザーがアクセスすることが想定されるサービスの場合は制限に引っかかってしまう可能性があります。

なのでユーザーのトークンでAPIを叩きたいところですが、一度DB等に保存して使うことになると思います。その時にFirebase Authenticationを使うとフロントエンドからバックエンドにCredentialsを渡すことになり、これがどうにも違和感があります。

そもそもCredentialsをフロントエンドで扱いたくないのでバックエンドで処理したい。

ですが色々調べてみた結果現状Firebase Authenticationを使う以上、Credentialsをフロントエンドに渡さずに処理する方法は無いようです。

なので大人しくバックエンドを実装する方がベターかと思います。例えばLaravelなら Socialite を使えば同様のソーシャルログインは実装できます。

まとめ

以上、LT会で発表した内容について書いてみました。

いろんな記事を見ても「簡単に実装できます！」という点ばかりで、そこから踏み込んだ内容に触れているものが無かったのでまとめてみました。

また次回以降もLT会には積極的に発表していこうと思います。