We Keep Coding

Using appUser scoped tokens in Smooch

I am developing a widget that users in my company can use to communicate with end-users through Smooch.
The widget is accessible through the web browser and the communication goes mostly through a layer developed in node. However, I was trying to send attachments directly to Smooch to reduce the load in the server.
As I understand, it is necessary to use a token with a appUser scope to avoid issues with CORS.
I create the token using the following code
app.get('/getjwt', (req, res) => {
var token = jwt.sign({ scope: 'appUser', userId: req.body.userId }, SECRET, { header: { 'alg': 'HS256', 'type': 'JWT', 'kid': '[app key ID]' } });
res.send({ jwt: token });
});
I try to use the generated token (using Postman for tests) by making a request with Authorization Bearer [my generated token] and I get the following error:
{
"error": {
"code": "invalid_auth",
"description": "Invalid JWT header. Missing key id (kid)"
}
}
I have tried changing the 'kid' value to the app ID, the API key ID, and the API key Secret and I'm always getting the same error. What am I missing? Am I supposed to pass the Key ID somewhere else?
Thank you,

Your code works fine for me, what version of jsonwebtoken are you using? In v6.0.0 the headers option was renamed to header, so if you're using 5.x or lower your code should look like this instead
var token = jwt.sign({ scope: 'appUser', userId: req.body.userId }, SECRET, { headers: { 'alg': 'HS256', 'type': 'JWT', 'kid': '[app key ID]' } });
That said, Smooch already provides a fully functional web messenger / widget that you should use instead of attempting to build your own. It provides event hooks and methods to build a fully custom UI if that's what you're trying to achieve. See https://docs.smooch.io/guide/web-messenger/ and https://www.npmjs.com/package/smooch

Error: Permission denied to access property 'nodeType' on AJAX request in Firefox

I include the Google Sign-in button on my page, and use gapi to interact with it. When the user successfully authenticates using the Google API , I make an AJAX call using JQuery to my server:
var token = gapi.auth.getToken();
var data = {
"token": token,
"userId": googleResponse.id
};
console.log("sending data");
console.log(data);
$.post(url, data, function(response) {
window.location.reload();
}, "json").error(function(responseObj, statusCode) {
var response = responseObj.responseJSON;
console.log("error");
console.log(response);
console.log(statusCode);
});
I see this issue in the console:
"sending data"
Object { token: Object, userId: "xxxxxxxxxxxxxxx" }
Error: Permission denied to access property 'nodeType'
The page does not reload and I do not see additional info in the console.
I do not use JQuery to access any element properties or manipulate the DOM in any way.
This issue happens with Firefox 36.0.1 and JQuery 2.1.1, but not with Chrome or Safari (same page, same code), on my Mac.
EDIT There were posts suggesting FireBug is to blame, so I disabled it and restarted Firefox, but it didn't help.

I figured this out by taking a closer look at the token object I was sending: the token object contains a field called g-oauth-window, which contains a reference to the DOM object which created it. When you pass this token inside of a $.post request, JQuery will resolve this field, and it makes Firefox bug out. Blanking out this field (setting it to null) makes everything work!

FB.api('/photos') works outside of Facebook app, but not WITHIN the app

I am POSTING a photo the a users facebook using the JS SDK via FB.api("/photos","post",etc)...
I can successfully do this in a dedicated URL outside of the FB app. but when attempting to post within the app, I get this error:
Error occured:{"message":"An unknown error has occurred.","type":"OAuthException","code":1}
I have a valid access token each time. Can anyone help please?? thank you!
FB.api('/photos', 'post', {
message: 'Use the Sephora Framework app to transform pictures from your life into one extraordinary story. http://seph.me/SmcbkM',
access_token: Sephora.accessToken,
url: imgURL
}, function (response) {
if (!response || response.error) {
alert('Error occured:' + JSON.stringify(response.error));
} else {
FB.api('/'+response.id, function(response){
storeSubmission(response.images[1].source);
});
}
});

You have used the wrong end-point: /photos.
You have to specify the user-id or the current user in session to which profile you want to add the photo.
So the correct call is: /me/photos

How to get first and last name without access token?

According to the FB SDK docs, it appears that some data from the response object I should be able to retrieve sans access token. (https://developers.facebook.com/docs/reference/api/user/) However when I do this, I receive the message in the response object -
An active access token must be used to query information about the current user.
Does anyone have any insight on the matter?
Thanks a ton!
EDIT - the code I'm using:
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function (response) {
console.log('Good to see you, ' + response.name + '.');
console.log(response);
});
}

My finding so far indicate that basic information cannot be accessed unless one has either 'userid' or 'username' as in this post.
If one has to try and fetch basic information using following url, then access_token is needed
facebook
{
"error": {
"message": "An active access token must be used to query information about the current user.",
"type": "OAuthException",
"code": 2500
}
}

Why does my FB.api request always produce an error response?

I have a Facebook app with namespace 'thenovel'. It has an action 'rate' assigned to an object 'sentence'. When the 'dofacebookstuff()' function is called, I want the user's rating of a sentence - 'testsentence', for the moment - to be published to their timeline. 'Rating' doesn't require an access token.
Whenever the dofacebookstuff() is called, the error alert pops up. I have tested whether the '!response' or 'response.error' was causing it, and it is the 'response.error' every time.
I can get the user id, name etc. fine with FB.login but the api call just does not work. If I go straight to 'https://graph.facebook.com/me/thenovel:rate?sentence=testsentence&access_token=XXXXX', I see the following:
{
"data": [ ],
"paging": {
"next": "https://graph.facebook.com/me/thenovel:rate?sentence=testsentence&access_token=XXXXX&offset=25&limit=25"
}
}
I have checked my HTML and all the Facebook-related stuff is there and in the right place. None of the other scripts on the page produce errors. Here is the function in question:
function dofacebookstuff() {
FB.api(
'/me/thenovel:rate?sentence=hello&access_token=' + accesstoken,
'post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Action ID: ' + response.id);
}
});
}
Could anyone explain where I'm going wrong? Where is my response data?

If you're posting to /me you need an active access token for that user - do you have one? it may have expired already, but i think the message is specifically referring to the fact that you haven't provided one, as there'd be a specific message if the token is invalid or expired.
You should be able to post to /USER_ID/thenovel:rate with the app access token if you're doing offline publishing of some kind

Try logging in using FB connect first.