Ruby on RailsでDeviseでFacebookログインを実装時にURLを読み込めませんエラーが出る時の対処法

Ruby on RailsでDeviseでFacebookログインを実装時に URLを読み込めませんエラーが出る時の対処法

Ruby on Railsを使ったアプリケーションを作成する際、SNSを使ったログインを実装することがよくありますよね。

その中でもFaceBookログインを実装するケース、少なくないのではないかと思います。

ところが、FaceBookログインの実装がちょっと曲者で、うまく設定もしているはずなのに、なかなかログインが実装できなくて迷宮入りをするケースもちらほら・・・

特に多いのが「URLを読み込めません: このURLのドメインはアプリのドメインに含まれていません。このURLを読み込むには、アプリ設定のアプリドメインにすべてのドメインとサブドメインを追加してください。」のエラーが出るケース。

インターネット上で見てもこの部分ではまっているケースをたくさんみるのですが(僕もその1人でしたが)、このエラーにハマっている時に確認しておきたい点についてまとめてみました!困っている方の力になればと思います!

なお、この記事は「何かしらの情報を見ながらでもいいので、FaceBookログインの実装をしてみた! でも合っているはずなのになぜかうまくいかない・・・」と嘆いている方を対象にしていますので、FaceBook開発者ページにおける各種設定方法の説明は省きます。

確認すべきポイント:FaceBook開発者ページの設定内容

今回のエラー「URLを読み込めません」が出てきてしまうときに、まっさきに確認すべきなのがFaceBookの開発者ページです。

Ruby on Railsに限らずですが、 FaceBookログインを実装する際は、まずFaceBook開発者ページ上でアプリ登録を実施し、細かい設定を実施した上で、自分が書いたコードと様々な紐付けを行い、FaceBookログインを実装していきます。

FaceBook開発者ページの画面

「URLを読み込めません」のエラーが出てしまう場合、この設定内容がうまくいっていないケースが考えられます。

「URLを読み込めません」エラーの対処方法

「URLを読み込めません」エラーの対処方法について見ていきます。

FaceBook開発者ページのログイン設定部分

アプリをすでにFaceBookに登録できた状態として、FaceBook開発者ページの中身を確認していきます。

アプリをすでに登録してログイン機能を使用しようと諸々登録していると、上記の画像内の左側に「Facebookログイン」という項目が出てくるのですが、この中の「設定」をクリックすると、上記画像のような画面になります。

ここで、赤枠でも囲んでいる部分「有効なOAuthリダイレクトURL」の部分があると思うのですが、ここに入力するURLの内容がポイントです!

僕もわけがわからずにハマっていた時は単純にFaceBookログインをしたあとのWebサイトのURL名を入力していたのですが、そうではなくて


Webサイト名/モデル名/auth/facebook/callback

と入力するのです!

例えば、Webサイト名が「https://arrown-blog.com」で、ログインするためのユーザーを管理するモデルの名前が「users」だった場合、

https://arrown-blog.com/users/auth/facebook/callback

となります。(ダブルクオーテーションは抜いてくださいね)

このように入力すると、無事にFaceBookログインを実装することができるようになるのです!

まとめ

ということで、今回はRuby on RailsでDeviseでFacebookログインを実装時にURLを読み込めませんエラーが出る時の対処法についてご紹介させていただきました!

何かと仕様変更が頻繁にあってややこしい世界ですが、実装できると便利なことも多いので、困った部分は確実にクリアしていきたいものです!

シェアする

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

フォローする