title: The parameter app_id is required - Ruby
body: <p>I've looked everywhere, I've followed the legendary 360 Facebook Authentication by Ryan Bates but I still can't figure out why I am getting this:</p>
  
  <pre><code>The parameter app_id is required.
  </code></pre>
  
  <p>I cannot figure out how to set these: <code>ENV['FACEBOOK_APP_ID']</code> and <code>ENV['FACEBOOK_SECRET']</code></p>
  
  <p>What is the simplest way of setting these so that when I hit the service it successfully reads these variables from whatever they are supposed to be read from? I tried pasting the values I got from Facebook into <code>config.ru</code> but it seems that the values are not being read from here (app id and app secret) and I'm still getting the same error.</p>
  
  <p>I don't know what I am missing.</p>
  
  <p>Here is what I have so far:</p>
  
  <p><code>omniauth.rb</code>:</p>
  
  <pre><code>    OmniAuth.config.logger = Rails.logger
  
      Rails.application.config.middleware.use OmniAuth::Builder do
        provider :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_SECRET']
      end
  </code></pre>
  
  <p><code>config.ru</code>:</p>
  
  <pre><code>    # This file is used by Rack-based servers to start the application.
  
      require ::File.expand_path('../config/environment', __FILE__)
  
      use Rack::Session::Cookie, :secret =&gt; '&lt;my secret is here&gt;'
  
      use OmniAuth::Builder do
        provider :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_SECRET'], :scope =&gt; 'email,read_stream'
      end
  
  
      run Rails.application
  </code></pre>
  
  <p><code>application.html.erb</code>:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;WebProfiler&lt;/title&gt;
        &lt;%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' =&gt; true %&gt;
        &lt;%= javascript_include_tag 'application', 'data-turbolinks-track' =&gt; true %&gt;
        &lt;%= csrf_meta_tags %&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id="fb-root"&gt;
          &lt;div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;script src="../javascripts/facebookMagic.js"&gt;
        /*
        FB.api('/me', function(response) {
          console.log(JSON.stringify(response));
        });
        &lt;/script&gt;
        &lt;div class="jumbotron"&gt;
          &lt;div class="container"&gt;
  
            &lt;div id="user_nav"&gt;
              &lt;% if current_user %&gt;
                Signed in as &lt;strong&gt;&lt;%= current_user.name %&gt;&lt;/strong&gt;
                &lt;%= link to "Sign out", signout_path, id: "sign_out" %&gt;
              &lt;% else %&gt;
                &lt;%= link_to "Sign in with Facebook", "/auth/facebook", id: "sign_in"%&gt;
              &lt;% end %&gt;
            &lt;/div&gt;
  
            &lt;% flash.each do |name,msg| %&gt;
              &lt;%= content_tag :iv, msg, id: "flash_#{name}" %&gt;
            &lt;% end %&gt;
  
            &lt;%= render 'components/search' %&gt;
            &lt;%= yield %&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><code>facebookMagic.js</code>:</p>
  
  <pre><code>            // This is called with the results from from FB.getLoginStatus().
      function statusChangeCallback(response) {
        console.log('statusChangeCallback');
        console.log(response);
        // The response object is returned with a status field that lets the
        // app know the current login status of the person.
        // Full docs on the response object can be found in the documentation
        // for FB.getLoginStatus().
        if (response.status === 'connected') {
          // Logged into your app and Facebook.
          testAPI();
        } else if (response.status === 'not_authorized') {
          // The person is logged into Facebook, but not your app.
          document.getElementById('status').innerHTML = 'Please log ' +
          'into this app.';
        } else {
          // The person is not logged into Facebook, so we're not sure if
          // they are logged into this app or not.
          document.getElementById('status').innerHTML = 'Please log ' +
          'into Facebook.';
        }
      }
  
      // This function is called when someone finishes with the Login
      // Button.  See the onlogin handler attached to it in the sample
      // code below.
      function checkLoginState() {
        FB.getLoginStatus(function(response) {
          statusChangeCallback(response);
        });
      }
  
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '1415171068775427',
          appSecret : 'd597ac96d2042c77ab0cf0e94d9a28fcReset'
          cookie     : true,  // enable cookies to allow the server to access
          // the session
          xfbml      : true,  // parse social plugins on this page
          version    : 'v2.1' // use version 2.1
        });
  
        // Now that we've initialized the JavaScript SDK, we call
        // FB.getLoginStatus().  This function gets the state of the
        // person visiting this page and can return one of three states to
        // the callback you provide.  They can be:
        //
        // 1. Logged into your app ('connected')
        // 2. Logged into Facebook, but not your app ('not_authorized')
        // 3. Not logged into Facebook and can't tell if they are logged into
        //    your app or not.
        //
        // These three cases are handled in the callback function.
  
        FB.getLoginStatus(function(response) {
          statusChangeCallback(response);
        });
  
      };
  
      // Load the SDK asynchronously
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
  
      // Here we run a very simple test of the Graph API after login is
      // successful.  See statusChangeCallback() for when this call is made.
      function testAPI() {
        console.log('Welcome!  Fetching your information.... ');
        FB.api('/me', function(response) {
          console.log('Successful login for: ' + response.name);
          document.getElementById('status').innerHTML =
          'Thanks for logging in, ' + response.name + '!';
        });
      }
  </code></pre>