Answered

Hi to hide js code from custom web plugins?

  • 29 February 2024
  • 8 replies
  • 67 views
E
Badge +1

Hi everyone!

 

I am thinking to build a new web plugin to manage Miro board elements and I have found that this can be done with JS, specifically with NodeJS and ExpressJS. My question is how someone could "hide", secure the JavaScript source code of the web plugin as it can be easily inspected in the web browser with web developer tools. This is fine for open source systems but how to build it for a proprietary system so that the code is not visible?

 

Does anyone have implemented a proprietary web plugin for Miro? Do I have to build a backend system, authorization, etc?

 

Thanks 🙏

icon

Best answer by Mettin 1 March 2024, 13:29

View original

8 replies

Mettin
Rank
Userlevel 3
Badge +1

Hey @echatzikyriakidis !

Sounds like a cool project! If your coding your app in node/express, the code is on your server and thus not inspectable for other people.

If you are going to build it using our SDK, you should uglify/minify your code so A: It has a smaller footprint and B: Your code becomes unreadable for humans.

Cheers,
Mettin

E
Badge +1

Hi @Mettin!
 

Thank you so much for your support! Yeah, it is going to be a great web plugin for Miro! So, in my understaning this is the way I should follow, right?: https://developers.miro.com/docs/miro-nodejs-quickstart-with-oauth-and-express

I will build the app with Node Express, put in a backend server in the cloud and allow OAuth authentication for the users to be able to login and use it. Then, the backend app will use the Miro Node.js client to communicate with the board. I will still be able though to use some kind of lightweight js in the frontend with Miro, right? The web-plugin still exists but now is light, thin and has minimum code, all the core business logic leaves in the backend server. If all of those things are correct, I am ready to go!

 

One last question, the backend can be done in other languages as well, right? Not specifically Node/Express, Maybe I could do things in Python instead? Does Miro.js client supports other languages, does it has bindings for Python?

 

Thanks!

Mettin
Rank
Userlevel 3
Badge +1

We only have a client for Node atm unfortunately. Since we have the spec from open API here: https://github.com/miroapp/api-clients/blob/main/packages/generator/spec.json you could try using https://github.com/OpenAPITools/openapi-generator to create something yourself =) 

The rest sounds like its good to go! Feel free to shoot any other questions here!

You can use https://github.com/miroapp/create-miro-app to start the app development, we have a template for express available!

Cheers,
Mettin

E
Badge +1

Hi @Mettin,

 

Thanks for supporting on this so fast!

 

The openapi-generator sounds amazing, will look it for sure. Regarding the link https://github.com/miroapp/create-miro-app points to 404, maybe the link is not correct?

 

Do you know something about https://github.com/miroapp/app-examples/tree/main/examples/monetization-with-stripe ? I am trying to understand if that implementation has also the Express (backend) component or it is only frontend implementation with only the stripe for monetization.

 

Thanks!

E
Badge +1

Hey @Mettin I find this very interesting:

https://github.com/miroapp/app-examples/tree/main/examples/python-flask-starter-with-oauth

I can start with this I think. Of course this implementation uses the Miro Create Board endpoint very natively. I can use openapi-generator to have full support of Miro’s API in Python and do whatever I want.

However, I don’t understand the OAuth reason. I know what it is, it is for authentication but I don’t understand why is needed in this implementation. In my understanding this is to make users login through Miro and send to my API access tokens that will allow my backend to have access to their Miro boards.

 

This is my understanding on this. Now, I need to understand how to connect that with Stripe for monetization.

Mettin
Rank
Userlevel 3
Badge +1

Hey @echatzikyriakidis ,

Sorry, I sent the wrong link, this is the kickstarter: https://www.npmjs.com/package/create-miro-app

The monetisation with stripe example only uses payment links, no backend implementation.

OAuth is needed to tell our API which user/board we are dealing with in a safe manner.

If you need some 1 on 1 help I suggest signing up for our office hours session: https://community.miro.com/events/miro-developer-platform-office-hours-64

Or, of course, feel free to shoot messages here, its just easier to have no delay =)

Cheers,
Mettin

E
Badge +1

Hi @Mettin!

Your support is truly useful so far. Thank you!

When you say that monetization with stripe app doesn't have backend what do you mean exactly? I have opened an issue here  https://github.com/miroapp/app-examples/issues/262 and this app it seems it has a backend with Next.JS implementing two endpoints, one for the stripe payments and one for the Miro OAuth.2.0.

I also have seen that the python flask version implements OAuth as well but no stripe payments endpoint: https://github.com/miroapp/app-examples/tree/main/examples/python-flask-starter-with-oauth.

 

Thank you!

Mettin
Rank
Userlevel 3
Badge +1

Hey @echatzikyriakidis 

Whoa, you are completely right, sorry! I originally made that example w/o a backend but it evolved later on, my memory failed me 😮‍💨

I have no experience with Python/Flask so unfortunately I can’t help you there. Im adding my teammate @Josip Janzic who might be able to help.

Cheers,
Mettin

Reply


Terms & Conditions