How to retrieve authorized information from Fantasy Premier League using React

user_7672966 0
Viewed 575

I was hoping that someone could help me out here.

I am creating a small Fantasy Football Premier League app using React. There is user specific information that needs authentication before requesting information from the Fantasy Premier League API.

The idea is for the app to start with a login page, where the user inputs their username and password. The app will then post this information to the login URL and return a token, that can be used to retrieve information that requires authentication.

previously, I created the app in python which worked, below was the code:

    '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();

How I know this worked is that when authorized, the variable myData can successfully access 'https://fantasy.premierleague.com/api/me' and gets assigned to all of my authorized information. When my details are incorrect (not authorized), the myData variable is "null" (the values of the keys are of nullType). Using this method, I can request all Authorized information off of the 's' variable.

Now when converting the code to React, I am struggling to successfully Authenticate. I print out the response from a GET call to the "https://fantasy.premierleague.com/api/me" API url and I get the NULL values like I was talking about above. My username and password is correct.

Below is the current code.

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);
            });         
      });

Please could someone help me out with the following:

  1. What am I doing wrong and how do I successfully login to FPL via react?
  2. Once I successfully achieve authentication, I have heard that I may need to retrieve a token number to use in my succeeding calls. How would I do this?

Any help would be greatly appreciated.

Thank you

electron reactjs node.js python javascript
1 Answers

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"                 => "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>';
user_146453390
Related