Пустой экран, блокировка всплывающих окон при входе в Facebook в браузере Edge - PullRequest
Новая
       9

Пустой экран, блокировка всплывающих окон при входе в Facebook в браузере Edge

0 голосов
/ 06 сентября 2018

Я получаю пустой всплывающий экран после входа в Facebook на Edge, и он не возвращается на мой сайт. Это происходит только на EDGE. Chrome, IE и Firefox отлично работают.

Я выполняю следующие действия: https://developers.facebook.com/docs/facebook-login/web

Я использую Angular 6.0.3 и приложение Facebook v2.8. Я использовал эту библиотеку: https://github.com/abacritt/angularx-social-login НО та же проблема.

Проблема:

В Edge я нажимаю кнопку входа в систему, появляется всплывающее окно и вводятся мои учетные данные. После нажатия «логин» во всплывающем окне Facebook он перенаправляет на пустую страницу. URL этой пустой всплывающей страницы содержит много параметров запроса, и один из них - это адрес перенаправления на мой сайт, который я указал, но всплывающее окно остается пустым, и я сталкиваюсь со страшным Белым Экраном Смерти. Если я захожу на facebook.com, я вижу, что я вошел в систему, поэтому вход в систему работал негласно. Если я попытаюсь снова с кнопкой входа в систему, он обнаружит, что я уже вошел в Facebook (всплывающее окно не требуется), и он входит в систему корректно.

Я проверил несколько других входов в Facebook на других сайтах и ​​их поток работает. Происходит что-то очень странное, и у меня закончились идеи, как это отладить.

Техническая информация:

Всплывающий блок с этим URL: https://www.facebook.com/v2.8/dialog/oauth?

А это параметры URL: 

channel:https://staticxx.facebook.com/connect/xd_arbiter/r/0P3pVtbsZok.js?version=42#cb=fc47f20d632548&domain=[URL_SITE]&origin=http://[URL_SITE]/f1b71a9e066ec68&relation=opener
redirect_uri:https://staticxx.facebook.com/connect/xd_arbiter/r/0P3pVtbsZok.js?version=42#cb=fe2a67e04514f4&domain=[URL_SITE]&origin=http://[URL_SITE]/f1b71a9e066ec68&relation=opener&frame=f314680605ed16c
display:popup
response_type:token,signed_request
domain:[URL_SITE]
origin:1
client_id:[FACEBOOK_APPID]
ret:login
sdk:joey
fallback_redirect_uri:http://[URL_SITE]/login
logger_id:60d7353d-4421-302a-736e-cd0fb03700c1
ext:1536240204
hash:Aeb1berMmtAvxEu3

код

Вот как я называю процесс входа в систему: 

<div class="md-facebook-btn ng-scope ng-isolate-scope">
<button class="md-button md-ink-ripple" type="button" (click)="FacebookLogin()">
    <span flex="" class="ng-binding ng-scope flex">{{ 'LOGIN.ENTER_FACEBOOK' | translate }}</span>
    <div class="md-ripple-container"></div>
</button>
</div>

Процесс входа в систему из TS 

FacebookLogin() {
            this.facebookAuthentication.login().then(
                (userData) => {
                    ...
                    }).catch((err: any) => {
                        ...
                    });
                }, (reason) => {
                    ...
                }
            );
    }

И, наконец, сервис: 

export class FacebookAuthenticationService {

  constructor(private appConfig: AppConfigurationRef) { }

  private FACEBOOK_RESPONSE_STATUS = {
    CONNECTED: 'connected'
  }

  initialize = (): void => {
    // config facebook startUp
    (<any>window).fbAppID = this.appConfig.getConfig.FacebookAppId;
    (<any>window).fbAsyncInit = function () {
      let params = {
        appId: (<any>window).fbAppID,
        xfbml: true,
        version: 'v2.8',
        status: true,
        cookie: true
      };

      FB.init(params);
      FB.AppEvents.logPageView();
    };

    if (this.appConfig.getConfig.FacebookAppId) {
      (function (d) {
        var js,
          fjs = d.getElementsByTagName('script')[0];
        if (d.getElementById('facebook-jssdk')) return;
        js = d.createElement('script');
        js.id = 'facebook-jssdk';
        js.async = true;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document));
    }
  }

  // retorna o status do login do usuario no facebook
  getLoginStatus = (): Promise<facebook.AuthResponse> => {
    return new Promise((resolve, reject) => {
      FB.getLoginStatus((response: any) => {
        if (response.status === this.FACEBOOK_RESPONSE_STATUS.CONNECTED)
          resolve(response);
        else
          reject(response);

      });
    });
  };

  login = (): Promise<facebook.AuthResponse> => {
    return new Promise((resolve, reject) => {
      FB.login((response) => {
        if (response.authResponse)
          resolve(response);
        else
          reject(response);
      });
    });
  }

  logout = (): Promise<facebook.AuthResponse> => {
    return new Promise((resolve, reject) => {
      FB.logout((response) => {
        if (response.authResponse)
          resolve(response);
        else
          reject(response);

      });
    });
  }
}

Приложение Facebook находится на стороне клиента, в режиме отладки и имеет некоторые ограничения в отношении веб-сайта и пользователей, которые могут работать с этим приложением. Помните! В Chrome IE и Firefox работают нормально.

Что мне не хватает? Есть идеи? Спасибо.

...