【Rails】TwitterやFacebookで簡単ログインを実装2020/01/24【Rails】TwitterやFacebookで簡単ログインを実装B!当記事はwithdiv旧サイトで2019/08/27に執筆したものを転載したものです手順を自分用にメモがてら。up)の実装方法です。以下gifは以前RailsでWebアプリ作った際の実装例です。この記事ではdeviseの導入からの手順を想定しています。ちなみに最近知りましたがFirebaseだとこういったSNSログインの実装が相当楽らしいですね。:x64_mingw](略)ターミナルにて下記コマンドでインストールします。deviseのセットアップよくある普通の手順です。db:migrateターミナルにて下記コマンドを打ち込みます。devise:installすると、下記のようなコメントが出てきていくつかのファイルが生成されます。devise:views===============================================================================上のコメントの数字の振られた手順を順番に実装していくとdeviseの使用が可能になります。config/environments/development.rbの最後に1行を追加します。}end次にターミナルにて下記のコマンドを実行します。indexすると、app/controllersディレクトリにhome_controller.rbとapp/viewsディレクトリにhomeディレクトリとその階層内にindex.html.erbができます。config/routes.rbを開き、下記のようにします。(中略)end3ではapp/views/layouts/application.html.erbに下記のようにします。%></body>そして4のコマンドとモデルの作成のためのコマンドを上から順にターミナルで実行すればdeviseの実装は完了です。ユーザー登録のストロングパラメータ周りapp/controllers/application_controller.rbを下記のようにします。deviseの日本語化config/application.rbを下記のように編集します。endend続いてconfig/localesディレクトリにja.ymlを新規作成し、下記をコピペしてください。"アカウントが正常に確認されました。"アカウントの確認方法をメールにてお送りします。"すでにメールアドレスが保存されている場合、アカウントの確認方法をメールにてお送りします。"まだアカウントが有効化されていません。"メールアドレスまたはパスワードが違います。"このアカウントはロックされています。"あなたのアカウントがロックされる前に、もう1つの試みを持っています。"メールアドレスまたはパスワードが無効なものです。"ログインまたは登録が必要です。"%{reason}により、%{kind}から承認されませんでした。"%{kind}から承認されました。"このページにアクセスできません。URLをご確認ください。"パスワードのリセット方法をメールにてお送りします。"すでにメールアドレスが保存されている場合、パスワードの再設定方法をメールにてお送りします。"パスワードを変更しました。"パスワードを変更しました。"アカウントを削除しました。ご利用をお待ちしております。"アカウント登録を受け付けました。"アカウントは登録済みですが、有効化されていないため利用できません。"アカウントは登録済みですが、ロックされているため利用できません。"確認メールを登録したメールアドレス宛に送信しました。リンクを開いてアカウントを有効化してください。"アカウント情報が更新されました。更新の確認メールを新しいメールアドレス宛に送信しましたので、リンクを開いて更新を有効化してください。"アカウントが更新されました。"ログアウトしました。"アカウントのロック解除方法をメールにてお送りします。"アカウントが存在する場合、ロックの解除方法をメールにてお送りします。"アカウントのロックが解除されました。"は既に登録済みです。"%{period}以内に確認する必要がありますので、新しくリクエストしてください。新規登録してください。"は見つかりませんでした。"ロックされていません。"以下のエラーで、この%{resource}を保存できません。"%{count}個のエラーで、%{resource}を保存できません。モデルに追記app/models/user.rbのdeviseに:omniauthableを追加し、findメソッドを追記します。omniauthのセットアップdeviseはデフォルトではメールアドレスとパスワード用カラムしかなく、このままだとうまく動作しないのでターミナルにてUsersテーブルにカラムを追加します。db:migrateこれでTwitterやFacebookから得た名前や画像などをデータベースへと格納できるようになります。続いて、config/initializers/devise.rbを下記のようにします。}endここまで出来たら下記URLにアクセスし、各SNSのAPIキーを取得します。https://developers.facebook.com/https://developer.twitter.com/次に.envファイルを新規作成し、下記のようにします。コールバック処理の追加app/controllersディレクトリにomniauth_callbacks_controller.rbを新規作成し、下記をコピペ。ルーティングを編集config/routes.rbを下記のように編集。Twitterをクリックすると......rootにリダイレクトされ、ログイン状態になりました。あとはcssでお化粧すればいい感じになりますね。無料のWordPressテーマです。✒️たかさきしがないたかさきです。HTML/CSS/JS/PHP/Ruby/SQLちょっと書けます、Photoshopちょっと使えます。Vue勉強中、埼玉とか都内の勉強会良いのあれば教えてください〜。メディア売買経験あります、ミドルレベルでの検索結果1位何回か取ったことあります。Gutenberg』使い方ローカル環境からロリポップのDB(MySQL)へはアクセスできないCOMMENTdevさん貴重な情報ありがとうございます。「アプリIDが無効なものです。developersの設定内容を教えて頂けないでしょうか。http://localhost:3000/)が入力済みの状態です。他に、必要な項目はありますでしょうか。本サイトの上部にあるステータスはオフで「開発中」のままでよろしかったでしょうか。ベーシック』および上記のリダイレクト設定のみであとはすべてデフォルトだったかと思います!また、ステータスにつきましては開発中でも記事執筆段階では動作しました。キャンセル入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。内容をご確認の上、送信してください。お名前メールアドレス次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。👘CreatedBy。