Decode Facebook signed request using Javascript

Question

I am trying to decode the signed request that comes from Facebook. I tried to use the below code using javascript, but I am not sure about the function to use for decoding and then parsing the JSON response. My Response object is signed_request and it contains the user profile information like name, gender, email, etc. I want to do something similar like this page shows in php: (Goto the section which says parsing the signed request) https://developers.facebook.com/docs/facebook-login/using-login-with-games/

   <script>
     $(document).ready(function () {    
       var signedRequest = $("h2").html();
       var data = signedRequest.split('.')[1];       
       data = JSON.parse(data);
       name = data.name;
       console.log(name);
     });

   </script>

 <body>
   <form id="form1" runat="server">
       <div>
        <% string name1 = Request.Params["signed_request"];%>
           <h2><%= name1 %></h2>
       </div>
   </form>
  </body>

Signed requests are base64 encoded (a version which is url safe), and you can follow the php description here - developers.facebook.com/docs/facebook-login/… — Sean Kinsey
hey have you managed how to decode the signedRequest? can you tell me how? Thanks — Marco Caltagirone

Hayden Linder Hayden Linder · Accepted Answer · 2020-07-27T21:14:03

According to facebook, we need to:

Split the signed request into two parts delineated by a '.' character (eg. 238fsdfsd.oijdoifjsidf899)

Decode the first part - the encoded signature - from base64url

Decode the second part - the payload - from base64url and then decode the resultant JSON object

One method for parsing base64url in JavaScript is window.atob:

FB.getLoginStatus(res => {
  console.log(res)
  const parts = res.authResponse.signedRequest.split('.')
  const signature = window.atob(parts[0])
  const payload = window.atob(parts[1])
  console.log(signature, JSON.parse(payload))
});

Decode Facebook signed request using Javascript

2 Answers