SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール

RailsでSNS認証機能を実装しよう~定番gem「OmniAuth」活用法

これだけは押さえておきたい!Rails開発で使えるgemパッケージ/ツール 第3回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 前回までは、deviseを用いることで、Railsチュートリアルなどの実装に比べて、ほとんどプロダクトのコードを記述することなくユーザー認証機能を追加できることを体験しました。今回は、SNS認証で定番のgemであるOmniAuthを使ってFacebook/Twitter認証機能を実装します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

OmniAuthの概要

 OmniAuthは、複数の外部サービスのアカウント情報を使ってユーザー登録やログインを提供します。OmniAuthはサービスごとにストラテジー(Strategies)を管理する、いわば元締めのgemです。OmniAuthのストラテジーとは、外部サービスごとにOAuth認証に必要な処理が記述されており、Rackミドルウェアとして提供されます。

 サービスごとのストラテジーは、 omniauth-[外部サービス名]のような名称のgemとして本体とは別のgemで提供されています。例えば、Facebookであればomniauth-facebookというgemとして、認証フロー「OAuth2」でストラテジーが提供されています。開発においては、OmniAuth本体のgemとストラテジー用のgemの両方をGemfileに記述して使用します。

[Note]OAuth2とは

 OAuth2とは、外部サービスのアカウント情報を使ってパスワードなしでユーザー情報にアクセスできる仕組みです。OAuth認証の仕組みにはバージョンがあり1.0と2.0で認証の仕組みが異なります。1.0の問題を解決するために2.0の仕組みが提案され、近年ではOAuth2を採用するサービスが多くなっています。

 なお、ストラテジーの一覧はOmniAuth本体のWikiにあります。一覧を見ると分かる通り、さまざまなサービスのストラテジーが提供されています。

SNS認証機能を実装する

 前回まで、deviseを活用してユーザー認証のサンプルアプリを開発しました。これに、OmniAuthを追加してFacebookとTwitterを用いた認証機能を追加していきます。

 Facebook、Twitterともにメールアドレスを取得することができるので、OmniAuth経由でOAuth認証を行い、取得したメールアドレスでユーザー登録/ログインできるようにします。さらに、ログイン後にユーザー情報を修正できるようにします。

Facebook認証機能の実装(1)

 まず、Facebook認証機能を実装します。

開発者サイト上で新しいアプリを追加

 実装の前準備として、facebook for developersからアプリを追加します。Facebookにログインして、開発者サイトにアクセスし、右上の[マイアプリ]メニューをクリックして[新しいアプリを追加]リンクをクリックすると、以下の画面が表示されます。

Faebook開発者サイトでアプリを追加
Facebook開発者サイトでアプリを追加

 表示名に任意のアプリ名を入力して[アプリIDを作成してください]ボタンをクリックするとセキュリティチェック用の画像が表示されるので適切に入力して[送信する]ボタンをクリックします。正常に登録されると以下のような画面に遷移します。ここではアプリ名を「codezine_devise_sample」としました。

Facebookアプリ作成直後
Facebookアプリ作成直後

 「Facebookログイン」の右下の[設定]ボタンをクリックすると右メニューのプロダクトに[Facebookログイン]メニューが追加されます。

設定をクリック
設定をクリック

 [有効なOAuthリダイレクトURI]テキストボックスに「https://127.0.0.1:9292/users/auth/facebook/callback」と入力すると右下に表示される[変更を保存]ボタンをクリックします。この設定は、OAuth認証をするためにFacebook側にアクセスした後、正しくユーザー情報が取れた場合に自サイト側のどのURIにリダイレクトするかを定義するものです。

設定を変更
設定を変更

 なお、FacebookログインはSSL接続が必須となっています。Railsアプリを開発する場合は通常開発モードであり、SSL接続ではありませんので開発環境でFacebookログインを動かす場合は開発モードでもSSLで動かす必要があります。手順については後述します。

 次に、[設定]メニューの下にある[ベーシック]メニューをクリックして表示されるアプリIDとapp secretをメモしておきます。アプリIDとapp secretは後ほどRailsアプリに設定します。なお、app secretはアクセス時は非表示になっていますので、[表示]ボタンをクリックしてポップアップ画面でパスワードを入力し、表示されたものをメモしてください。以下の画面はapp secretを表示したものです。

app secretを表示
app secretを表示

 これでFacebookアプリの設定は完了です。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Facebook認証機能の実装(2)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
これだけは押さえておきたい! Rails開発で使えるgemパッケージ/ツール連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 竹馬 力(チクバ ツトム)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10970 2018/07/30 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング