javascript - 如何使用React从Fantasy Premier League检索授权信息

Question

我希望有人可以在这里帮助我。
我正在使用React创建一个小型的Fantasy Football Premier League应用。
在从Fantasy Premier League API请求信息之前，存在需要认证的特定于用户的信息。
该应用程序的想法是从登录页面开始，在该页面中，用户输入其用户名和密码。然后，该应用会将这些信息发布到登录URL并返回一个 token ，该 token 可用于检索需要身份验证的信息。
之前，我在python中创建了可以正常工作的应用，下面是代码:

    'login':USERNAME,
    'password':PASSWORD,
    'redirect_uri': 'https://fantasy.premierleague.com/',
    'app':'plfpl-web'
}
s = requests.session()
s.post("https://users.premierleague.com/accounts/login/", data=payload)
myData = s.get('https://fantasy.premierleague.com/api/me').json();

我知道这是如何工作的，当获得授权时，变量myData可以成功访问“https://fantasy.premierleague.com/api/me”并分配给我的所有授权信息。当我的详细信息不正确(未经授权)时，myData变量为“null”(键的值为nullType)。
使用此方法，我可以从's'变量中请求所有授权信息。
现在，当将代码转换为React时，我正在努力成功地进行身份验证。
我打印出从GET调用到“https://fantasy.premierleague.com/api/me”API URL的响应，并且得到了NULL值，就像我上面所说的那样。我的用户名和密码正确。
下面是当前代码。

formData:any = {
      'login': USERNAME,
      'password': PASSWORD,
      'app': 'plfpl-web',
      'redirect_uri': 'https://fantasy.premierleague.com/' 
    };

  login = async (username:string = this.formData.login,password:string = this.formData.password) => {
    return axios
      .post("https://cors-anywhere.herokuapp.com/https://users.premierleague.com/accounts/login/", this.formData).then((response)=>
      {       
        axios.get("https://cors-anywhere.herokuapp.com/https://fantasy.premierleague.com/api/me")
        .then(result => {
        console.log(result);
            });         
      });  

请有人帮我解决以下问题:

我在做什么错，如何通过react成功登录FPL？

成功实现身份验证后，我听说可能需要检索一个 token 号以用于以后的调用中。我该怎么做？

任何帮助将不胜感激。
谢谢

Answer 1

直到现在，我已经通过使用cURL php通过发布数据身份验证并从幻想的英超API中获取数据并获得经过身份验证的数据来解决该问题，这很容易，但是如果您有另一个解决方案，可以直接从Fantasy中获取来自幻想的身份验证数据，则令人沮丧http.post或获取角度或 react ，请回答，因为我正在构建一个迷你ionic v1应用程序，谢谢

PHP code:

                // set the relative path to your txt file to store the csrf token
            $cookie_file = realpath('./cookie.txt');
            
            // login url
            $url = 'https://users.premierleague.com/accounts/login/';
            
            // make a get request to the official fantasy league login page first, before we log in, to grab the csrf token from the hidden input that has the name of csrfmiddlewaretoken
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_URL, $url);
            curl_setopt($ch, CURLOPT_HEADER, false);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt ($ch, CURLOPT_COOKIEJAR, $cookie_file);
            curl_setopt ($ch, CURLOPT_COOKIEFILE, $cookie_file);
            curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            $response = curl_exec($ch);
            
            $dom = new DOMDocument;
            @$dom->loadHTML($response);
            
            // set the csrf here
            $tags = $dom->getElementsByTagName('input');
            for($i = 0; $i < $tags->length; $i++) {
            $grab = $tags->item($i);
            if($grab->getAttribute('name') === 'csrfmiddlewaretoken') {
            $token = $grab->getAttribute('value');
            }
            }
            
            // now that we have the token, use our login details to make a POST request to log in along with the essential data form header fields
            if(!empty($token)) {
            $params = array(
            "csrfmiddlewaretoken"   => $token,
            "login"                 => $_GET['login'],
            //        "login"                 => "7amzaes@gmail.com",
            "password"              => $_GET['password'],
            //        "password"              => "1935866@linkin",
            "app"                   => "plfpl-web",
            "redirect_uri"          => "https://fantasy.premierleague.com/",
            );
            
            curl_setopt($ch, CURLOPT_URL, $url);
            curl_setopt($ch, CURLOPT_POST, true);
            curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
            curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
            
            /**
            * using CURLOPT_SSL_VERIFYPEER below is only for testing on a local server, make sure to remove this before uploading to a live server as it can be a security risk.
            * If you're having trouble with the code after removing this, look at the link that @Dharman provided in the comment section.
            */
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            //***********************************************^
            
            $response = curl_exec($ch);
            
            // set the header field for the token for our final request
            $headers = array(
            'csrftoken ' . $token,
            );
            }
            
            // finally, we now have everything we need to make the GET request to retrieve the league standings data. Enjoy :)
            $fplUrl = 'https://fantasy.premierleague.com/api/my-team/752090/' ;
            curl_setopt($ch, CURLOPT_URL, $fplUrl);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_HEADER, false);
            
            if(!empty($token)) {
            curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
            }
            
            $response = curl_exec($ch);
            $league_data = json_decode($response, true);
            curl_close($ch);
            
            echo '<pre class="card">';
            print_r($league_data);
            echo '</pre>';