React App: Как реализовать Facebook Войти? - PullRequest
Новая
       10

React App: Как реализовать Facebook Войти?

0 голосов
/ 17 января 2020

Я знаю, что react-facebook-login и react-facebook существует. Тем не менее, я хочу реализовать это по-своему, и я застрял там.

В моем индексе. html У меня есть следующее: 

  <body>
     <div id="fb-root"></div>
     <script async defer crossorigin="anonymous" src="https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v5.0&appId=???&autoLogAppEvents=1"></script>
....

Моя функция React выглядит следующим образом: 

/* global FB */
import React, { useEffect } from 'react';

export default function Connect() {
  function statusChangeCallback(response) {
    console.log(response);
    if (response.status === 'connected') {
      console.log("logged in");
    } else {
      console.log("not logged in")
    }
  }

  function checkLoginState() {
    window.FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  useEffect(() => {
    window.fbAsyncInit = function() {
      window.FB.init({
        appId      : '????',
        cookie     : true,
        xfbml      : true,
        version    : 'v5.0',
      });

      window.FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
        statusChangeCallback(response);        // Returns the login status.
      });
    };

    (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 = "https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v5.0&appId=????";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

  });

  return (
      <div
        className="fb-login-button"
        data-width=""
        data-size="large"
        data-button-type="continue_with"
        data-auto-logout-link="false"
        data-use-continue-as="false"
      />
  );
}

Оказывается кнопка входа в Facebook. Когда я пытаюсь щелкнуть по нему при входе в Facebook, я получаю сообщение: 

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at Object.prepareCall (sdk.js?hash=3051e31de39c8b328cfbd1efcce7f613&ua=modern_es6:145)
...

Когда я нахожусь в режиме приватного браузера и нажимаю на него, открывается диалоговое окно входа. Когда я ввожу свои учетные данные пользователя, он просто существует и ничего не происходит.

Может ли кто-нибудь указать мне правильное направление? Ваша помощь очень ценится.

...