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

Question

我希望有人可以在这里帮助我。

我正在使用 React 创建一个小型 Fantasy Football Premier League 应用程序。 在从 Fantasy Premier League API 请求信息之前，需要验证用户特定信息。

这个想法是让应用程序从登录页面开始，用户在其中输入他们的用户名和密码。然后，应用会将此信息发布到登录 URL 并返回一个令牌，该令牌可用于检索需要身份验证的信息。

之前，我在 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 时，我很难成功进行身份验证。 我打印出对“https://fantasy.premierleague.com/api/me”API url 的 GET 调用的响应，我得到了 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);
            });         
      });  

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

1. 我做错了什么以及如何通过 react 成功登录 FPL？
2. 一旦我成功实现了身份验证，我听说我可能需要检索一个令牌号以在后续调用中使用。我该怎么做？

任何帮助将不胜感激。

谢谢

Answer 1

到目前为止，我已经有了另一个解决方案，通过使用 cURL php 从 Fantasy Premier League APIs 获取数据，通过发布数据身份验证并获取经过身份验证的数据，如果你有另一个解决方案，通过从 Fantasy 获取身份验证数据，这很容易但令人沮丧直接在 $http.post 或获取角度或反应请回答，因为我正在构建一个迷你 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>';