Railsでソーシャルログインを作る(Yahoo編)

あけましておめでとうございます。
今年も気が向いたらブログ更新していくスタイルでぼちぼちやっていきたいと思います！

今日は突然Yahooでソーシャルログインを作る機運が高まり、試し実装したのでメモ書きしておきます。

mikanmarusan.hatenablog.com

少し古めではありますが、このエントリーにある内容をそのままなぞる形でいけました。

準備(YahooのAPIキーを取得)

YahooのID連携を利用する場合は以下のURLにアクセスします。

developer.yahoo.co.jp

右横にあるアプリケーション開発のボタンをクリックして、遷移したページでアプリケーションを登録のリンクにアクセスします。

次にアプリケーションの初期設定を行います。
今回は開発用としてサイトURLにhttp://localhost:3000を設定します。

あとはガイドラインへの同意を同意するを選択してください。
ここまで設定したら画面下部の確認ボタンをクリックして先に進んでください。

確認画面に遷移するので内容に誤りがなければ登録ボタンをクリックして登録完了です。
登録完了時にClient IDとシークレットキーが表示されるのでメモしておきます。

コールバックの設定

登録時の画面には項目がないので見落としますが、コールバックするURLの設定をしておく必要があります。

アプリケーションの管理：Yahoo!デベロッパーネットワークにアクセスして自分が作成したアプリケーションの編集ボタンをクリックします。

編集画面に遷移します。
コールバックURLという項目があるのでコールバックしたいURLを設定します。
今回はhttp://localhost:3000/auth/yahoojp/callbackとしておきます。

ここまでできたら更新ボタンを押して準備が完了となります。

アプリケーション作成

Yahoo ID連携の準備が整ったので、コードを書いていきます。

バージョン

Ruby 2.5.3
Rails 5.2.2

サンプル

今回作成したサンプルは以下になります。

GitHub - kimuray/social_test: OAuth実装して遊ぶ

開発手順

ひとまずrails newし終わっている前提でやって行きます。

ライブラリの追加

yahooとOAuthするために必要なライブラリをGemfileに追記します。

gem 'omniauth'
gem 'omniauth-yahoojp'

追記したらbundle installします。

omniauth設定

config/initializers配下にomniauth.rbというファイルを作成します。
作成したファイルに以下のコードを書きます。

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :yahoojp, ENV['YAHOOJP_KEY'], ENV['YAHOOJP_SECRET'],
  {
    scope: 'openid profile email address'
  }
end

APIキーとシークレットキーはそれぞれYAHOOJP_KEY、YAHOOJP_SECRETという環境変数に設定します。
YahooでID連携のアプリケーションを作成した際に表示されたClient IDとシークレットキーを設定しておきます。

また、scopeの設定はしておかないとOAuth時にエラーになるので設定しておきます。

Yahooと連携する処理を作成

ルーティング

root 'sessions#top'
get '/auth/:provider/callback' => 'sessions#callback'

参考にしているエントリに習って、雑にルーティングを設定します。
'/auth/:provider/callback'のルーティングはYahooで設定したコールバックURLとして扱います。

コントローラ

rails g controller sessions top callback

として雑にコントローラとviewを作成してしまいます。

app/views/sessions/top.html.erbに

<%= link_to 'Yahoo Japanでログイン', '/auth/yahoojp' %>

を追記します。

これでYahooと連携できるアプリケーションができました。

あとはsessions_controller.rbのcallbackアクションにbinding.pryを仕掛けるなどしてrequestを見て見たりすると連携できていることが確認できます。

本当にこれぐらいしかコードは書いていませんが、中身を見たいという方はサンプルを見てください。

最後に

めちゃんこ雑に紹介しましたが、ライブラリの力を使えば30分ちょいぐらいでYahooと連携できてしまうってすごいですねえ。