【開発メモ】RailsアプリでFacebookログインの認証機能を実装させる方法

Sponsored Link

RailsアプリでFacebook認証のログイン機能の実装方法

どうも、Linです。背もたれ、拡大します。

 

Railsアプリを作成したらやってみたいこと。

それは、

Facebookログイン認証機能を実装すること

ではないでしょうか。

SNS認証サービスに対応しておけば、登録の手間が省けるのでユーザー数の増加につながるはずです。

 

今日は、Facebook認証をなんとかできるようになったので、その方法を忘れないうちにまとめておこうと思います。

記事執筆にあたり、こちらの神記事を参考にさせていただきました。

 

 

RailsアプリにFacebook認証機能をつける前の3つの事前準備

RailsアプリにFacebook認証機能を実装する前に、次の3つの準備をしておく必要があります。

 

その1. deviseによるログイン機能を実装したアプリ作成

RailsアプリでFacebookログイン機能をつけるためには、

deviseによるログイン機能を実装したアプリ

を作成しておく必要があります。

 

適当なサンプルアプリをこちらの記事を見ながら作ってみてください。

 

その2. 「uid」と「provider」をカラムに追加

Userテーブルに、

  1. uid(任意のid)
  2. provider(facebookやTwitter)

の2つのカラムを追加。

 

 

その3. Facebookアプリ作成

あとは、Facebook側の設定です。

 

こちらのFacebook Developerから、「Add a New App」を選択。

 

rails facebook

 

続いて、

  • メールアドレス
  • アプリ名(適当でいい)

を記入。

 

rails facebook

 

左メニューの「Basic」を選択。

 

rails facebook

 

セッティングベーシック画面から、一番下の、

Add Platform

を選択。

 

rails facebook

 

そこから、

ウェブサイトを選び、

 

rails facebook

 

URL記入欄に、

http://localhost:3000/

をいれてみましょう。

 

rails facebook

 

これでFacebook側の設定は完了です。

 

 

RailsアプリにFacebookログイン機能を実装する5つのステップ

さて、いよいよRailsアプリにFacebookログイン機能を実装する方法です。

 

Step1. Gem追加

Facebookログインを使うために必要なgemファイルに、

の2行を追記してください。

追加後はおきまりの、

 

 

Step2. AppIDとSecretIDを追加

config/insitializers/devise.rb

に下記のコードを追記。

 

ここでは、先ほど設定したFacebookアプリの、

  • AppID
  • SecretID

の2つを付け足しましょう。

 

rails facebook

 

Step3. deviseにメソッド追加

deviseの機能を拡張させます。

app/model/user.rbのファイルの末尾に「:omniauthable」を追加。

 

 

Step4. Userモデルにfindメソッド実装

つぎに、app/model/user.rbのUserモデルのファイルに、

 

 

を追記。

 

Step5. コールバック処理の実装

続いて、コールバック処理です。

app/controller以下に、usersフォルダを作成しましょう。

そのusersフォルダに、

omniauth_callbacks_controller.rb

というファイルを作ります。このファイルはこんな感じで編集。

 

 

 

Step6. ルーティング設定

コールバック用のルーティングを設定。

config/route.rbのdevise_forの後ろに、コールバック用の記述を追記します。

 

これでFacebookログイン機能の実装は完了ですね。

 

 

http://localhost3000/users/sign_up

にアクセスしてみてください。

 

 

「Sign in with Facebook」をクリックしてみると、

 

 

 

お、よくあるFacebook連携の画面がポップアップしてきました。

これでログインできたんじゃないでしょうかね!

 

さあ、RailsアプリにFacebookログイン機能を実装しよう!

以上がRailsアプリにFacebookログイン機能を実装させる方法でした。

  1. gem追加
  2. Userテーブル追加
  3. deviseメソッド追加
  4. findメソッド追加
  5. コールバック処理
  6. ルーティング設定

の6ステップを踏めば、FBログイン機能が完成するはずです。

 

もし、

「このステップを踏んでもできねえよ!!?」

と電柱を殴りそうになっている方には「teratail」がおすすめです。

エンジニア専門のQAサイトで、百戦錬磨のエンジニアの方々に相談できますからね。

よかったら使ってみてください。

 

それでは〜

Lin


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる