🐶ソーシャルログインの実装過程を動画にしてみました！
前回までのあらすじ
- node.jsでGithubの外部認証を実装。
- 前回はdeviceというプラグインを使って「user」というテーブルを作ってある。
今回は、ログイン機能をdeviceを使ってReilsアプリに実装していきます！
ソーシャルログインの実装（Rails編）その①
RailsにDeviseをインストールする
今回は、前回作った「user」というテーブルに、ソーシャルログインに必要なデータを追加していく。
ターミナル（R-Loginつかってます）を開きデータベースに下記のとおり「カラム」を追加する。←これが、「マイグレーションを作るという動作」になる。
|
1 |
$ rails g migration AddColumnsToUsers uid:string provider:string |
ソーシャルログイン実装（Rails編）その②
①フェイスブックのデベロッパーサイトに移動し、新しいアプリを追加。
②VSコード開いて、下記のgemファイルを追加。
|
1 |
gem 'omniauth' |
|
1 |
gem 'omniauth-facebook' |
R-loginを開いて、下記のGemfileに書かれたプラグインをインストールするコマンドを追加。
|
1 |
$ bundle install |
インストールが完了したらdeviceの設定ファイルを修正していく。
先ほど設定したFacebookアプリの、AppID、AppSecretIDの2つを付け足す。
deviseって何？
Railsの中でメジャーなログイン認証機能のgemのことです！
gemって何？
gemコマンドを使うと簡単に色々インストールできちゃうんです！
へえ。。そうなんだあ(=^・^=)
ゆうこりんしゃちょーもdeviceを使って、通常のログインの機能は設定されましたよね。
ほんまかいな！( ﾟДﾟ) 記憶喪失やわ（汗）
ソーシャルログイン実装（Rails編）最終回
deviceにメソッドを追加！
①app/model/user.rbのファイルの末尾に下記を追加。
|
1 |
:omniauthable |
②app/model/user.rbのUserモデルのファイルに下記を記入下記を追加。
|
1 |
def self.find_for_oauth(auth) user = User.where(uid: auth.uid, provider: auth.provider).firstunless user user = User.create( uid: auth.uid, provider: auth.provider, email: auth.info.email, password: Devise.friendly_token[0, 20] ) enduser endend |
コールバック処理の実装
①app/controller以下に、usersフォルダを作成。
②そのusersフォルダの下に、omniauth_callbacks_controller.rbというファイルを作る。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController def facebook callback_from :facebook end private def callback_from(provider) provider = provider.to_s @user = User.find_for_oauth(request.env['omniauth.auth']) if @user.persisted? flash[:notice] = I18n.t('devise.omniauth_callbacks.success', kind: provider.capitalize) sign_in_and_redirect @user, event: :authentication else session["devise.#{provider}_data"] = request.env['omniauth.auth'] redirect_to new_user_registration_url end end end |
③config/route.rbのdevise_forの後ろに、コールバック用の記述を追記します。
|
1 2 3 4 5 |
Rails.application.routes.draw do devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' } # ... end |
トラブル発生！次回、開発環境をhttps化するぜよ( ﾟДﾟ)
やり方はこれで問題ないんだけど、httpsにしないとうまく動かないみたい
To Be Continued…
ABOUT ME
