【Rails】omniauthでGoogle/Twitterログインを実装する手順【キャプチャ付き解説】

こんにちは、けんぞうです。
最近はQiitaに技術的なことを書いていたのですが、久しぶりにこちらのブログに書こうと思います。


今回は「omniauthを使ってTwitter/Facebook/Googleログインを実装する手順 」を解説します。

Googleログイン

  • 手順①:API準備
  • 手順②:Devise導入
  • 手順③:config修正
  • 手順④:リンク配置
  • 手順⑤:controller修正

手順①:API準備

こちらからクライアントID、クライアントシークレットを取得します。

新しいプロジェクト_–_saythanksapp_–_Google_API_Console.jpg

同意画面_-_saythanksapp_-_Google_API_コンソール.jpg

同意画面_-_saythanksapp_-_Google_API_コンソール.jpg

認証情報_-_practiceproject_-_Google_API_コンソール.jpg

OAuth_クライアント_ID_の作成_-_practiceproject_-_Google_API_コンソール.jpg

▼承認済みのリダイレクトURI

  • http://localhost:3000/users/auth/google/callback
  • アプリのURL/users/auth/google/callback (既にデプロイが完了している場合)

手順②:Devise導入

ここからはDeviseの導入を行なっていきます。

次にmodelの修正も行なっておきます。

※Googleログインのみを実装する限りでは上記の実装で問題ありませんが、Twitterログインも実装する場合は記述が異なってくるので、その点は後述します。

手順③:config修正

ルート直下に.envファイルを作成し、手順①で作成したクライアントIDなどをペーストします。

手順④:リンク配置

Not found. Authentication passthru.」という表示になる場合にはこのログインリンクの記述が間違っている可能性が高いので、ご確認くださいませ。

手順⑤:controller修正

以上でGoogleログインの実装は完了です。


Twitterログイン

Twitterログインについて上記の手順を踏んでいるものとして、解説します。

  • 手順①:TwitterAPI準備
  • 手順②:config修正
  • 手順③:Controller/View編集

手順①:TwitterAPI準備

こちらから登録・取得できます。

Twitter_Developers.jpg

Twitter_Developers.jpg

手順②:config修正

必要になるGemfileをインストールします。

user.rbを編集します。

POINT

self.dumy_emailを追記している点がポイントです。

ここではauth.idauth.providerの組み合わせが一意であることを利用しています。

Google/Facebookログインの実装では、email: auth.info.emailでメールアドレスを取得できたのですが、TwitterAPIではnilがかえってきてしまうため、上記のような実装が必要。

手順③:Controller/View編集

最後にController/Viewを編集して完了です。


番外編〜Heroku側の設定など〜

Herokuへのデプロイ時にPrecompiling assets failedというエラーが出た場合の対処

まずはこのコマンドで表示されるsecret_key_baseをコピーします

git push heroku master後にやること