Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/07/30 14:00

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

目次

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アプリの設定は完了です。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

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

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5