Facebook JavaScript SDK FB.login не работает в Facebook iFrame

Мы используем Facebook JavaScript SDK для аутентификации нашего приложения Facebook. Приложение настроено с URL-адресом холста как http://facebook.elgifto.com/Home/Index/< /а>. Ниже приведен код, который мы используем для аутентификации пользователя Facebook.

    <script type="text/javascript">
          window.fbAsyncInit = function() {
              debugger;
                  FB.init({
                      appId: '<%= ViewData["AppId"].ToString() %>', // App ID
                      channelUrl: '<%= ViewData["ChannelUrl"].ToString() %>', // Channel File
                      status: true, // check login status          
                      cookie: true, // enable cookies to allow the server to access the session
                      xfbml: true,  // parse XFBML
                      oauth: true
                  });

              FB.Event.subscribe('auth.login', function(response) {
                  if (response.status === 'connected') {
                      // the user is logged in and connected to your
                      // app, and response.authResponse supplies
                      // the user’s ID, a valid access token, a signed
                      // request, and the time the access token 
                      // and signed request each expire
                      var uid = response.authResponse.userID;
                      var accessToken = response.authResponse.accessToken;
                      startApp(uid, accessToken);
                  }

              });

          };

          // Load the SDK Asynchronously
          (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));




          function startApp(uid, accessToken) {                 
              var baseUrl = '<%= ViewData["AppBaseURL"].ToString() %>';
              var redirectUrl = baseUrl + '?uid=' + uid + '&accessToken=' + accessToken;
              window.top.location.href = redirectUrl;
              //document.location = redirectUrl;
          }          
       </script>
<fb:login-button onlogin="initiateLogin()" perms="email,user_about_me,user_birthday,friends_about_me,friends_birthday">Login with Facebook</fb:login-button>

Приведенный выше код не работает в Facebook при доступе как http://apps.facebook.com/giftguru. . Однако мы можем получить к нему доступ через http://facebook.elgifto.com/Home/Index.


person dotcoder    schedule 22.03.2012    source источник
comment
Что вы подразумеваете под не работает?! какие-либо ошибки? или он вообще не загружает кадр? Вы установили безопасную ссылку (SSL)?!   -  person ifaour    schedule 22.03.2012
comment
Я получаю сообщение об ошибке Время ожидания соединения истекло.   -  person dotcoder    schedule 26.03.2012


Ответы (4)


Проблема связана с блокировкой всплывающих окон браузером. (тот факт, что вы работаете за пределами Facebook, вероятно, потому, что вам иногда разрешалось это делать раньше, для меня это заблокировано, а также в приложении).

Вы никогда не должны вызывать FB.login без взаимодействия с пользователем (например, элемент click или форма submit), чтобы браузер не блокировал окно входа в систему.

Обновление:
Вы смешиваете здесь много вещей:

  1. Страница на http://facebook.elgifto.com/Home/Index использует приложение #316853928368079 (это приложение и не имеет namespace!)
  2. Ваш URL-адрес диалогового окна OAuth имеет ' (апостроф) вокруг client_id, что неверно!
  3. Диалоговое окно OAuth не работает (вероятно, также из-за настроек приложения, домен приложения?)
  4. Приложение, расположенное на http://apps.facebook.com/giftguru, является приложением #83808922524 и имеет неверный URL-адрес холста! Доказательство:
    Оболочка приложения Facebook Canvas
person Juicy Scripter    schedule 22.03.2012
comment
Я попробовал это решение, и оно не сработало. Я изменил код сейчас, пожалуйста, посмотрите измененный код. Он работает при доступе с помощью facebook.elgifto.com/Home/Index. Но когда я обращаюсь к нему с помощью apps.facebook.com/giftguru, я получаю сообщение Время ожидания подключения истекло. - person dotcoder; 26.03.2012
comment
@mohang, для вашего холста установлено не http://facebook.elgifto.com/Home/Index/, а http://98.234.246.146:9999/html/home.html, поэтому я не могу его увидеть и проверить - person Juicy Scripter; 26.03.2012
comment
@mohang, только эта проблема с конфигурацией может быть причиной ошибки время ожидания соединения истекло... - person Juicy Scripter; 27.03.2012
comment
Не могли бы вы объяснить, о какой проблеме конфигурации вы говорите? - person dotcoder; 28.03.2012
comment
@mohang, я говорю о том, что ваш URL холста в настройках приложения указывает не на ту же страницу, о которой вы говорите (http://facebook.elgifto.com/Home/Index), а на совершенно другой URL (http://98.234.246.146:9999/html/home.html). Убедитесь, что URL-адрес холста настроен правильно. Кстати, /html/home.html в вашем приложении не существует события facebook.elgifto.com) - person Juicy Scripter; 28.03.2012
comment
Это неправда. URL-адрес холста в настройках приложения facebook установлен на facebook.elgifto.com/Home/Index. Тем не менее это не работает. - person dotcoder; 28.03.2012
comment
@mohang, я обновил свой ответ, чтобы предоставить более подробную информацию о том, о чем я говорю ... - person Juicy Scripter; 28.03.2012
comment
Я понял это. Теперь я использую OAuth с пространством имен selectgifts, и имя моего приложения теперь SelectGifts. Апостроф вокруг client_id удален. Теперь время ожидания соединения истекло, и приложение позволяет мне войти в систему. Но оно запрашивает безопасный URL-адрес, который я не могу предоставить. - person dotcoder; 28.03.2012
comment
@mohang, URL-адрес безопасного холста должен быть предоставлен, чтобы пользователи, использующие безопасный просмотр на Facebook (HTTPS), могли использовать ваше приложение. Если вы находитесь на этапе разработки, это нормально, если у вас его нет. Но для конечного продукта требуется SSL, и не должно быть проблем с его получением. - person Juicy Scripter; 28.03.2012

Я надеюсь, что это полезно для вас

  <body>
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'xxxxxxx',
            status     : true, 
            cookie     : true,
            xfbml      : true,
            oauth      : 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));

       //LOGIN FUNCTION 
       function login() {
        FB.login(function(response) {
            if (response.authResponse) {
                alert('Success!');
            }else{
                alert('Login Failed!');
            }
        }, {scope: 'email'});
     }
      </script>
      <div onclick="login();">Login with Facebook</div>
    </body>
person sadik    schedule 30.03.2012

Также проверьте, не находится ли ваше приложение на сайте deveopers.facebook.com в режиме песочницы. У меня была проблема: вход в систему работал нормально с моей основной учетной записью (которая была администратором приложения), но не с другими учетными записями facebook. Позже я понял, что приложение fb все еще находится в режиме песочницы, и мне пришлось добавить каждую учетную запись, которая тестировалась, как тестировщика или разработчика, или отключить режим песочницы.

Может это кому-то поможет, я потратил час, пока разобрался. :)

person KoviNET    schedule 23.04.2013

Facebook внезапно переключился с использования своего диалогового метода Facebook для отображения окна аутентификации на старомодные сегодня всплывающие окна. До сих пор всплывающие окна использовались только при запуске приложений вне вкладки/холста Facebook. Это означает, что вы больше не можете запускать FB.login при загрузке и вместо этого использовать событие щелчка, чтобы избежать блокировки всплывающих окон.

Единственная документация от Facebook, которую мы нашли по этому поводу, находится по адресу https://developers.facebook.com/docs/concepts/login/permissions-login-dialog/, но, судя по всему, этот метод всплывающего окна доступен для игр уже несколько недель.

person aldavigdis    schedule 25.04.2013