Skip to main content

Hello community,

 

I’m a beginner and trying to embed a whiteboard in my website via “Temporary boards for anonymous users” approach

 

I have added a button and on that button, I have added click event listener. That event listener will initialise the board picker(same steps mentioned in documentation).

 

When I click that button, boards picker opens in new window and offers 2 options : 1) Sign In 2) Create Board

 

When I click create board, It displays alert : “SOMETHING WENT WRONG”

 

May be I’m making some mistake while generating JWT token. Here is the way I generate a token(in python back-end) : - 

 

def generate_token(request):

client_id = 'MY_CLIENT_ID'

secret = ‘MY_SECRET’

token = jwt.encode({"iss" : client_id}, secret , algorithm="HS256")

return Response({"token" : token})

 

Here is the click event listener which initialise the boardsPicker:

 

const onClick = function () {

console.log("clicked")

miroBoardsPicker.open({

clientId: "MY_CLIENT_ID", // 1) Put your 'clientId' here.

action: "access-link",

allowCreateAnonymousBoards: true, //2) Enable this option

getToken: () => getTokenFromServer(), // Provide token in async way

success: (data) => {

console.log("on success");

console.log(data);

document.querySelector("#container").innerHTML = data.embedHtml;

},

error: (e) => {

console.log("on error", e);

},

cancel: () => {

console.log("on cancel");

},

 

// windowRef: windowRef,

});

};

 

Here is the implementation of getTokenFromServer() method: 

 

function getTokenFromServer() {

//Get JWT token from your server. Read more about JWT https://jwt.io/

return fetch("http://localhost:8000/getToken/")

.then((response) => response.json())

.then((data) => {

console.log(data.token);

return data.token;

});

}

 

Please guide me, what am I doing wrong?

 

Thanks in Advance!

Hi Soham!

Everything looks, no obvious things to be fixed.

Some questions:

  1. Could you please share your client_id (can use DM for that)?
  2. Could you also say, if you got explicit response from Miro that temporary boards are enabled for you? 
  3. Could you share a screenshot of the error window you get?

Hi Boris,

I have sent my client-id to you in private message.

I didn’t get any explicit response from MIRO  that temporary boards are available for me.  Board picker works fine when I am logged in and allow me to select or create board. That’s why I thought that I would be able to use this feature. But as a guest user, it is showing error as mentioned in question.

Here is the screenshot of error I get when I click on “Create Board” 

 

@Boris Borodyansky I am also getting same error
While creating board without registration, i am getting "something went wrong".
picker.acb5f7a4434c0a85.js:2 POST https://miro.com/api/v1/anonymous-boards/ this api giving 500. I am passing appropriate Jwt token also. Can you check this?

i have enable following feature

Based on your request we have enabled your access to boards-picker (2) and editable boards without registration (3).

 


Below Api fails


Client code
async function getMiroPresentationIframeLink() {
const pos = { left: 0, top: 0 };
const size = { width: 500, height: 500 };

const windowRef = window.open(
'',
'_blank',
`width=${size.width},height=${size.height},left=${pos.left},top=${pos.top},menubar=0,toolbar=0,location=0,personalbar=0,status=0`,
);

const script = document.createElement('script');
script.src = 'https://miro.com/app/static/boardsPicker.1.0.js';
document.body.appendChild(script);
script.onload = () => {
miroBoardsPicker.open({
windowRef: windowRef,
clientId: 'clientId', // actual client id
action: 'access-link',
allowCreateAnonymousBoards: true,
getToken: () => getTokenFromServer(),
success: data => {
if (data?.accessLink) {
saveAndBroadcastChannelPlugin(data.accessLink);
}
},
error: e => {
console.log('on Miro Board error', e);
},
});
};
}

const getTokenFromServer = () => {
//Get JWT token from your server. Read more about JWT https://jwt.io/
return api.integration.getMiroIntegrationToken().then(response => {
return response.data;
});
};




---------------------------------------------

server code

code:

return JWT.create()        .withIssuer("actual client id")        .withExpiresAt(new Date(System.currentTimeMillis() + TimeUnit.MINUTES.toMillis(5)))        .sign(Algorithm.HMAC256("actual client secret"));

 

Reply


Terms & Conditions