API Keys and Tokens within HTML Canvas Widget

I am new to web development and would like to utilize the HTML canvas widget using Javascript. But I need to make sure I’m doing it securely and correctly as far as using TOKENs and API keys.

Ubidots Setup:
Organization 1
—> Device1, Device2, Device3
—> User1, User2

Organization 2
—> Device4, Device5, Device6
—> User3, User4

So all 4 users have been created using the main Admin Root account. All 4 users are “end users”, so they only have viewing options to the dashboards and devices within that organization.

The dashboard contains a widget like the one in the example here:

  1. When they go to their dashboard that uses the custom Canvas Widget, what TOKEN is used and should be used in the widget?

  2. How is this TOKEN in the example hidden from the users? Seems like it’s in plain sight in their browser if they look at the page source or use JS debugging tools? Or is it ok if the user gets the TOKEN?

  3. For security, should the widget use the Ubidots API and the Admin API Key to request a new token every time it makes a request to Ubidots? How is the API key hidden from the users?

  4. Should the dashboard in each organization use different TOKENS or Organizational TOKENS? That seems like a very manual setup process to create in each dashboard though.

  5. When using Particle Webhooks to send data to variables, what TOKEN should be used? And should multiple different TOKENS be used? Or can one TOKEN be used for ALL devices to use?

I’m just trying to get a grasp on the API keys, TOKENs, Organizational TOKENS and users and how and when they all need to be implemented for best security.

Hi there, allow me to answer your questions:

1. When they go to their dashboard that uses the custom Canvas Widget, what TOKEN is used and should be used in the widget?
2. How is this TOKEN in the example hidden from the users? Seems like it’s in plain sight in their browser if they look at the page source or use JS debugging tools? Or is it ok if the user gets the TOKEN?
3. For security, should the widget use the Ubidots API and the Admin API Key to request a new token every time it makes a request to Ubidots? How is the API key hidden from the users?

The example that you have used stores the token inside a local variable. If you need to programatically set the token, please refer to this example, there you will find how to use the Ubidots object in your canvas so you can retrieve dynamically the account’s default token.

Keep in mind that if you use the Ubidots object as an end-user, the default token will inherit the end-user’s role permissions.

About the API KEY, do not use it in your canvas as it may be exposed through the user’s console.

4. Should the dashboard in each organization use different TOKENS or Organizational TOKENS? That seems like a very manual setup process to create in each dashboard though.

This is up to you, you may use a fixed token or to retrieve dynamically the default one as described above.

5. When using Particle Webhooks to send data to variables, what TOKEN should be used? And should multiple different TOKENS be used? Or can one TOKEN be used for ALL devices to use?

My advise here is to use one token per device, but again, it is up to you and your application requirements.

Let us to know if you have any additional question.

Thank you, that does help a lot.

On your answer about the Particle Webhook token, I was using this example:

And I would like to use unique tokens when talking to Ubidots. So if that one is compromised, it doesn’t risk the whole system. But I did not see a way to generate new Tokens in a Particle Webhook.

And in this case the token is not dynamic. Is there a way to use a new token every time the Particle webhook executes? Or is this case ok because the token resides in the Particle servers and uses HTTPS to talk to Ubidots. So it’s never exposed to the user?

Hi there, it is not possible to create dynamically an Ubidots token using Particle webhooks, not because an Ubidots or Particle limitation but because a webhook is a general purpose feature and as such not suitable to be customized. Said this, the token that you set at your Particle webhook is stored at Particle, not at your device side, so security issues should not be a problem unless that you do not trust in Particle.

If you wish to have full control of the data path, you may also use UbiFunctions to manage as you wish your device tokens and the data coming from the Particle webhooks.

All the best