如何在JavaScript中自定义Facebook OAuth对话框？

Question

I would like to change the location of the page url and I would strongly prefer to have the permissions request dialog open in a separate window.

This is the JavaScript im using:

  <script>
        window.fbAsyncInit = function() {
  FB.init({
    appId      : 'XXXXXXXXXXXXXXX',
    status     : true, 
    cookie     : true,
    xfbml      : true
  });
};
    (function(d){
   var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = "//connect.facebook.net/en_US/all.js";
   d.getElementsByTagName('head')[0].appendChild(js);
 }(document));
  </script>

The dialog that comes up in a separate window doesn't show up in all browsers, freaking IE...

PHP:

 // Create our Application instance (replace this with your appId and secret).
    $facebook = new Facebook(array(
      'appId'  => 'XXXXXXXXXXXXXXXXXXXXXXXXX',
      'secret' => 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    ));

    // Get User ID
    $user = $facebook->getUser();

    if ($user) { 
      try {
        // Proceed knowing you have a logged in user who's authenticated.
        $user_profile = $facebook->api('/me');
      } catch (FacebookApiException $e) {
        error_log($e);
        $user = null;
      }
    }

    //  n or logout url will be needed depending on current user state.
    if ($user) {
      $logoutUrl = $facebook->getLogoutUrl();
    } else {
      $loginUrl = $facebook->getLoginUrl(   array(
           'scope' => 'publish_stream,user_birthday,email,offline_access',
           'next'  => 'LINK HERE',
          ));
    }

Answer 1

Instead of attempting to subvert Facebook's JavaScript SDK, simply use the standard OAuth authentication, which allows you to redirect the user to an authentication or permissions dialog without a JavaScript popup.

See the Server-Side Flow section of the Authentication documentation and the Direct URL Example in the OAuth dialog's documentation . Note that the example URL in the latter documentation looks extremely similar to your second screenshot.