【Rails】deviseでFacebookのユーザーでログインを行う

deviseを利用してFacebookのユーザーでログインできるようにしたいと思います。
 

1. Facebook Developersの設定


Facebook Developersからアプリの登録を行います。
 

1.1 アプリの登録

「新しいアプリを追加」をクリックします。

 
アプリの名前などを入力し「アプリIDを作成してください」ボタンをクリックします。

 

1.2 Facebookログインの設定

「製品を追加」を選択し、「Facebookログイン」の「スタート」ボタンをクリックします。

 
「有効なOAuthリダイレクトURI」にfacebook認証するアプリのURLを入力し、「変更を保存」ボタンをクリックします。

 
 

2. deviseのインストール


2.1 Gemfileに以下を追加

 
Gemfile

 

2.2 bundle installを実行

 

2.3 deviseのインストール

 
 

3. deviseと紐付けるuserモデルを作成


3.1 userモデルを作成

 

3.2 マイグレーションを実行

 

3.3 サーバーを起動しアプリの確認

 
下記のURLでアプリが正常に表示され、サインアップできること
URL:http://localhost:3000/users/sign_up
 
 

4. 認証機能の実装


4.1 Gemfileに以下を追加

 
Gemfile

 

4.2 bundle installを実行

 

4.3 Userモデルに、カラムを追加

 

4.4 マイグレーションを実行

 

4.5 Userモデルの修正

  • deviseに:omniauthableを追記
  • ユーザ情報を検索するメソッドを追記

app/models/user.rb

 

4.6 コールバック処理を追記

ディレクトリを作成

 
コールバック処理を追記
app/controllers/users/omniauth_callbacks_controller.rb

 

4.7 ルーティングの設定

config/routes.rb

 
 

5. Facebookアプリケーションとの連携


5.1 FacebookアプリケーションのアプリIDとapp secretを確認

作成したFacebookアプリケーションの「ダッシュボード」をクリックし、アプリIDとapp secretを確認する。
app secretは「表示」ボタンをクリックし、パスワードを入力すると確認できます。

 

5.2 deviseの設定ファイルにFacebookアプリケーションのアプリIDとapp secretを追記

config/initializers/devise.rb

 

5.3 railsのGemを利用して環境変数を読み込む

DotenvというGemを使います。
環境によって変わる設定値はdotenvを使うと便利
 
railsのルートディレクトリで下記のファイルを作成

 
5.1で確認した内容を追記します。

 
 

6. 動作確認


6.1 サーバーを起動しアプリの確認

 
下記のURLでアプリが正常に表示され、「Sign in with Facebook」リンクが表示されていること
URL:http://localhost:3000/users/sign_up
 

 
「Sign in with Facebook」リンクをクリックすると下記の画面が表示される

 
上記のログインボタンをクリックするとFacebook認証が完了しrailsのルートに設定したURLにリダイレクトされます。
 
お疲れ様でした!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*
*
Website