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
– Sean Kinsey, Commented Mar 6, 2014 at 5:46
hey have you managed how to decode the signedRequest? can you tell me how? Thanks — Marco Caltagirone
– Marco Caltagirone, Commented Oct 20, 2015 at 10:11

Hayden Linder · Accepted Answer · 2020-07-27 21:47:10Z

1

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

edited Jul 27, 2020 at 21:47

answered Jul 27, 2020 at 21:14

Hayden Linder

9281 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sean Kinsey · Accepted Answer · 2014-03-06 05:48:01Z

0

Signed requests are base64 encoded (a version which is url safe), and you can follow the php description here - https://developers.facebook.com/docs/facebook-login/using-login-with-games/

If you're extremely interested, you can look at how this is done in the JS SDK by searching through http://connect.facebook.net/en_US/all/debug.js for 'sdk.SignedRequest'.

answered Mar 6, 2014 at 5:48

Sean Kinsey

38k7 gold badges55 silver badges71 bronze badges

1 Comment

newguy Over a year ago

Thanks. the js file helped me understand how to decode it.

Collectives™ on Stack Overflow

Decode Facebook signed request using Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related