SDK входа через Facebook не работает, когда у пользователей включена двухфакторная аутентификация.

На чтение 3 мин Опубликовано 10.10.2024

Вопрос или проблема

Я использую React, и у нас есть вход через Facebook, который работает нормально для пользователей, не имеющих включённую двухфакторную аутентификацию (2FA). Однако для пользователей с включённой 2FA, кажется, что обратный вызов FB.login() срабатывает преждевременно, когда пользователя просят ввести код двухфакторной аутентификации (2FA). Я читал документацию, но не смог найти ничего, связанного с особой обработкой для пользователей с включённой 2FA.

componentDidMount() {
    if (window.FB) {
      this.initializeFacebookLogin();
    }
    document.addEventListener("FBObjectReady", this.initializeFacebookLogin);
  }

  initializeFacebookLogin = () => {
    this.setState({
      FB: window.FB
    });
  };

  checkLoginStatus = () => {
    this.state.FB.getLoginStatus(this.facebookLoginHandler);
  };

  facebookLoginHandler = response => {
    if (response.status === "connected") {
      this.state.FB.logout();
      this.state.FB.login(this.facebookLoginHandlerClicked, {
        scope: "public_profile,email"
      });
    } else {
      this.state.FB.login(this.facebookLoginHandlerClicked, {
        scope: "public_profile,email"
      });
    }
  };
  facebookLoginHandlerClicked = response => {
    if (response.status === "connected") {
      this.state.FB.api("/me", userData => {
        let result = {
          ...response,
          user: userData
        };
        this.props.onLogin(true, result);
      });
    } else {
      this.props.onLogin(false);
    }
  };

Я пытался добавить функцию опроса, но всё равно не повезло.

Ответ или решение

При реализации входа через Facebook с использованием SDK в React, важным моментом является правильная обработка ситуации, когда у пользователя включена двухфакторная аутентификация (2FA). Ваша проблема может возникать из-за того, что метод FB.login() реагирует на статус соединения до того, как пользователь завершит ввод кода подтверждения 2FA. В этом случае обратитесь к следующему решению:

Проверка статуса сессии: Убедитесь, что после вызова FB.login() используется корректный обработчик для обработки возможной ситуации, когда пользователь находится в процессе ввода кода подтверждения.
Обновление состояния аутентификации: Когда пользователь успешно вводит код 2FA, статус аутентификации может измениться, и вы должны следить за этим. Я рекомендую использовать метод setInterval для периодической проверки статуса входа.

Вот обновлённый код, реализующий данное решение:

componentDidMount() {
    if (window.FB) {
        this.initializeFacebookLogin();
    }
    document.addEventListener("FBObjectReady", this.initializeFacebookLogin);
}

initializeFacebookLogin = () => {
    this.setState({
        FB: window.FB
    });
};

checkLoginStatus = () => {
    this.state.FB.getLoginStatus(this.facebookLoginHandler);
};

facebookLoginHandler = response => {
    if (response.status === "connected") {
        this.state.FB.logout(); // предостережение именуемое "добавление логгирования"
        this.state.FB.login(this.facebookLoginHandlerClicked, {
            scope: "public_profile,email"
        });
    } else {
        this.state.FB.login(this.facebookLoginHandlerClicked, {
            scope: "public_profile,email"
        });
    }
};

facebookLoginHandlerClicked = (response) => {
    if (response.status === "connected") {
        this.state.FB.api("/me", userData => {
            let result = {
                ...response,
                user: userData
            };
            this.props.onLogin(true, result);
        });
    } else if (response.status === 'unknown') {
        // Этот блок будет использоваться для определения статуса 2FA
        this.startPollingLoginStatus();
    } else {
        this.props.onLogin(false);
    }
};

// Функция для опроса статуса логина
startPollingLoginStatus = () => {
    const interval = setInterval(() => {
        this.state.FB.getLoginStatus((response) => {
            if (response.status === "connected") {
                clearInterval(interval);
                this.state.FB.api("/me", userData => {
                    let result = {
                        ...response,
                        user: userData
                    };
                    this.props.onLogin(true, result);
                });
            }
        });
    }, 3000); // Опрос каждые 3 секунды
};

Объяснение изменений:

Мы добавили функцию startPollingLoginStatus, которая периодически проверяет статус аутентификации пользователя. Если после ввода кода 2FA статус изменится на "connected", мы завершаем опрос и получаем данные пользователя.
Проверка на статус unknown позволяет нам определить, что пользователь всё ещё может вводить код 2FA.

Данная логика позволяет корректно обрабатывать случай, когда у пользователя включена двухфакторная аутентификация, и избежать преждевременных вызовов обработчиков. Настоятельно рекомендую также протестировать реализацию в различных сценариях, чтобы убедиться в её стабильности.