javascript - 如何使用 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. 我做错了什么，如何通过反应成功登录 FPL？
2. 成功实现身份验证后，我听说我可能需要检索一个令牌号以在后续调用中使用。我该怎么做？

任何帮助将不胜感激。

谢谢

标签： javascriptpythonnode.jsreactjselectron

Answer 1

untill now i've got another solution to this topic by using cURL php to get data from fantasy premier league APIs by posting data authentification and get authentificated data it is easy but frustrating if you had another solution by getting auth data from fantasy directly in $http.post or get angular or react please answer because i'am building a mini ionic v1 app and thanks

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"                 => "[e-mail]",
            "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>';