質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • Ruby

    9615questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails 5

    3309questions

  • Cloud9

    568questions

    Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

  • Facebook

    444questions

    Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

  • OAuth 2.0

    108questions

    OAuth 2.0(Open Authorization 2.0)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。

OmniAuthを利用したFacebook認証でアプリID無効のエラーが出る

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 39

napoano365

score 5

RubyonRailsでOmniAuthを利用し、Facebook認証機能を作成しようとしていますが、FaceBook認証ページへのリンクをクリックした、タイミングで以下のエラーが表示され、行き詰まっています。
どこか記述が誤っているのでしょうか…または設定漏れがありますでしょうか…
詳しい方、ご教示頂けますと幸いです。

<表示されるエラー>
イメージ説明
アプリIDが無効なものです: 指定されたアプリIDは無効なアプリIDのようです。

<開発環境>
cloud9
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]
Rails 5.2.3
動作確認にはRails serverを利用しています。

<やったこと>
■Facebook for developersでデベロッパ登録して、さらにアプリを登録しました。
アプリドメイン
「https://●●●●.vfs.cloud9.us-east-2.amazonaws.com:0808」
有効なOAuthリダイレクトURI
「https://●●●●.vfs.cloud9.us-east-2.amazonaws.com:0808/auth/facebook/callback」
※Cloud9上のアプリの場合ドメインの末尾にポート番号が付与される、との記事があったため「:0808」を付記しています。
https://stackoverflow.com/questions/33133166/facebook-oauth-on-cloud9

■Gemfileに以下のGemを追記し、「$bundle install」を実行しました。

source 'https://rubygems.org'
…
gem 'omniauth'
gem 'omniauth-facebook'
…
group :development, :test do
…
  gem 'dotenv-rails'
end

■config/initializers/omniauth.rbを作成して以下の設定を記載しました。

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_APP_SECRET'],
    scope: 'email', display: 'popup', local: 'ja_JP', info_fields: "id, name, gender"
end

■.envをルートディレクトリに作成して以下の環境変数の設定を記載しました。(gem 'dotenv-rails'を利用)

FACEBOOK_APP_ID='3346030●●●●●●●●'
FACEBOOK_APP_SECRET='0a5f1cc8●●●●●●●●●●●●●●●●●●●●●●●●'

■.envをgitのバージョン管理対象から外すためにgitignoreファイルに追記しました。

# Ignore .envfile
/.env


■routes.rbファイルにFacebook認証成功・失敗後のリダイレクト先のルーティングを追記しました。

  get '/auth/facebook/callback', to: 'users#auth_done', as: :auth_done
  get '/auth/failure',  to: 'users#auth_failure', as: :auth_failure

■ViewファイルにFaceBook認証ページへ遷移させるためのリンクを作成しました。

    <div class="facebooklogin">
      <%= link_to "Facebookでログイン", "/auth/facebook" %>
    </div>


イメージ説明

■users_contorollerに「auth_done」アクション、「auth_failure」アクションをハコだけ準備しました。
※本来はここまで処理が進み、表示させるテンプレートがない、とエラーで止まる予定でした。

class UsersController < ApplicationController
 …
  def auth_done
  end

  def auth_failure
  end

  privateend

追記■facebook認証がhttps必須との記事も見つけました。cloud9は自動でSSL利用してくれるので問題ないようですが…。
https://qiita.com/kent_ear/items/6fcc477392aaede175f4

ご確認の程、宜しくお願い致します。m(__)m

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

+1

自己解決できました。(…1週間悩みました。)
問題は次の設定にありました。
FaceBook for developers > Facebookログイン> 設定 > 有効なOAuthリダイレクトURI

Webサイト名/auth/facebook/callback
ではなく
Webサイト名/モデル名/auth/facebook/callback
というルールでURIの登録が必要でした。

私の場合
https://●●●●●●●●.vfs.cloud9.us-east-2.amazonaws.com/users/auth/facebook/callback
というURIを設定することでエラー表示がなくなりました。

※cloud9の場合ポート番号が…という話もありましたが、最終的には記載不要でした。仕様の変更でしょうか…。

どなたかの悩み解決に少しでも貢献できれば何よりです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • Ruby

    9615questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails 5

    3309questions

  • Cloud9

    568questions

    Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

  • Facebook

    444questions

    Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

  • OAuth 2.0

    108questions

    OAuth 2.0(Open Authorization 2.0)は、APIを通して保護されたリソース(サードパーティのアプリケーション)へアクセスする為のオープンプロトコルです。