[Ruby]RailsでTwitterログインを実装する(Firebase版)

Firebaseを使ってお手軽にTwitterログインを実装するサンプルです。

開発環境

rbenv install 2.5.1

準備

Twitter Developers でAPI key, API secret key を入手してください

Firebase Authentication でTwitterログインの設定をしてください

設定

Firebaseのプロジェクト設定から「apiKey」と「authDomain」をRailsの設定ファイルに記述してください。

# config/firebase.yml
default: &default
 api_key: AIzaSyBJIHH6hHNe....
 auth_domain: myapp-237211.firebaseapp.com

セットアップ

サンプルコードのフォルダでRailsのサーバーを起動します。

rbenv install 2.5.1
rbenv local 2.5.1
gem install bundler

# 既に開発環境がある場合
bundle install
./bin/rails s

起動したら http://localhost:3000/ を開いてください

スクリーンショット

ボタンを押すとTwitterへログインし、成功するとメッセージを表示します。

カスタマイズ

Firebaseでログインが成功すると以下JavaScriptでアクセストークンをRails側へ送信します。

fetch('/welcome/login', {
   method: 'POST',
   headers: new Headers({
       "Content-Type": "application/json",
       'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
   }),
   body: JSON.stringify(credential),
})

RailsではアクセストークンをGoogle APIを使って検証します。この時取得できるレスポンスにTwitterアカウント情報が含まれているので必要に応じてDBへ保存します。

uri = URI.parse("https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyAssertion?key=#{firebase_config['api_key']}")
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true
req = Net::HTTP::Post.new(uri.request_uri, {'Content-Type': 'text/json'})
req.body = {
   postBody: "access_token=#{token}&oauth_token_secret=#{secret}&providerI                d=twitter.com",
   requestUri: request.base_url,
   returnIdpCredential: true,
}.to_json
response = http.request(req)

↓↓↓ サンプルコードはこちらです ↓↓↓

※コードに問題がある場合、返金申請を行なってください