Answered

Create Miro Objects via API

  • 7 May 2021
  • 2 replies
  • 240 views

Badge +1

Hello, I am at the  beginning of development project to populate Miro board using API. 


Checking API reference at https://developers.miro.com/reference I can’t find enough details for what I need.

My requirements are:

For a board <xxx>

Create/update card widgets

I found Get Current User Boards API which returns all boards current user has access to. I can then loop through to find the board I need and start adding/updating cards.

Card widget JSON does have tags field. Is there any way to add tags via API?

Are there any examples of end-to-end similar functionality (including authentication)?

icon

Best answer by Anthony Roux 19 May 2021, 10:23

Hi @Alex Zak,

 

Your flow seems to be the right one. This is one way to do it:

  1. Use Get Authorization that will return the team id for the given access_token
  2. Use the team id in the Get Current User Boards API to retrieve the list of board ids of this user (the one linked to the access_token)
  3. Use the Board Content APIs to do what you want to do on the board (create/delete/update widgets)

 

I don’t think we have a code sample for this exactly, you can take a look at this example showing how to implement the OAuth2 flow.

 

If I had to summarise it:

For the OAuth 2.0 flow:

Step 0 - Create a Dev Team and an Application

Step 1 - Create the authorization link and send it to the user

Step 2 - Get the verification code (as a query parameter)

Step 3 - Use the verification to obtain an access token

Step 4 - Make an API call musing the access token

Practically:

  1. You need to add an authorization serverto which you will redirect your users. This will be the server to which the user will be redirected to when authorizing the access. In the example here I use localhost:3000, you will need to set that up into your profile in the Redirect URI field.

     

  2. Prepare the URL by updating the redirect_uri and your client id (replace the XXX) (that you get in your profile)

https://miro.com/oauth/authorize?response_type=code&client_id=XXX&redirect_uri=http://localhost:3000

If you open this link into a browser you will have the popup to authorize your app (this is what you should give to your users into your app). If you authorize it, it will redirect you to the redirect_uri (localhost in the example). If you try with localhost without having a server running you will get an error but if you take a look at the URL you will see a new query parameter "code". You need to save that code to exchange it for an access token. Please note that this code has a time to live of 10min and can be used only one time.

  1. Replace the code from the response this new URL to prepare the API Call. Replace as well the client id and the client_secret with yours and call this API using a POST method (replace YYY, XXX and Z).
https://api.miro.com/v1/oauth/token?grant_type=authorization_code&code=YYY&redirect_uri=http://localhost:3000&client_id=XXX&client_secret=Z

 

The API Response of this API call will contain your access token:

 

{
"access_token" : "d2d8a7ea-32e5-426e-a6f1,
"token_type" : "Bearer",
"scope" : "team:read boards:write",
"user_id" : "xxxx",
"team_id" : "yyyy"
}

 

To call Miro’s API, you will need to add this access token in the header of the API requests:

Authorization: Bearer b8c22903-8ff1-4431-9bf1

And you are good to go!

 

As of today, we do not provide a REST API to create tags.

View original

2 replies

Userlevel 7
Badge +16

@Alex Zak - FYI: I have moved this post to the Developer Platform and APIs category.

Userlevel 4
Badge +6

Hi @Alex Zak,

 

Your flow seems to be the right one. This is one way to do it:

  1. Use Get Authorization that will return the team id for the given access_token
  2. Use the team id in the Get Current User Boards API to retrieve the list of board ids of this user (the one linked to the access_token)
  3. Use the Board Content APIs to do what you want to do on the board (create/delete/update widgets)

 

I don’t think we have a code sample for this exactly, you can take a look at this example showing how to implement the OAuth2 flow.

 

If I had to summarise it:

For the OAuth 2.0 flow:

Step 0 - Create a Dev Team and an Application

Step 1 - Create the authorization link and send it to the user

Step 2 - Get the verification code (as a query parameter)

Step 3 - Use the verification to obtain an access token

Step 4 - Make an API call musing the access token

Practically:

  1. You need to add an authorization serverto which you will redirect your users. This will be the server to which the user will be redirected to when authorizing the access. In the example here I use localhost:3000, you will need to set that up into your profile in the Redirect URI field.

     

  2. Prepare the URL by updating the redirect_uri and your client id (replace the XXX) (that you get in your profile)

https://miro.com/oauth/authorize?response_type=code&client_id=XXX&redirect_uri=http://localhost:3000

If you open this link into a browser you will have the popup to authorize your app (this is what you should give to your users into your app). If you authorize it, it will redirect you to the redirect_uri (localhost in the example). If you try with localhost without having a server running you will get an error but if you take a look at the URL you will see a new query parameter "code". You need to save that code to exchange it for an access token. Please note that this code has a time to live of 10min and can be used only one time.

  1. Replace the code from the response this new URL to prepare the API Call. Replace as well the client id and the client_secret with yours and call this API using a POST method (replace YYY, XXX and Z).
https://api.miro.com/v1/oauth/token?grant_type=authorization_code&code=YYY&redirect_uri=http://localhost:3000&client_id=XXX&client_secret=Z

 

The API Response of this API call will contain your access token:

 

{
"access_token" : "d2d8a7ea-32e5-426e-a6f1,
"token_type" : "Bearer",
"scope" : "team:read boards:write",
"user_id" : "xxxx",
"team_id" : "yyyy"
}

 

To call Miro’s API, you will need to add this access token in the header of the API requests:

Authorization: Bearer b8c22903-8ff1-4431-9bf1

And you are good to go!

 

As of today, we do not provide a REST API to create tags.

Reply