Give out widget (web application) with activation code

Question

I don't know if this is the right place to ask this question but I'm just going to do it. I've been trying to figure out how I want to give out my web application.

This is my situation:

I've created a web application. People who want to use this application are free to do so. BUT they need to be signed up on our website.
The application needs to be bound to a unique key. This key is generated as soon as they sign up on our website.
The application is hosted on our server.
The web application needs to be easy to implement.

I've seen:

I've seen other services generating a JS script, for example:

<script type='text/javascript' data-cfasync='false'>window.exampleApi = { l: [], t: [], on: function () { this.l.push(arguments); } }; (function () { var done = false; var script = document.createElement('script'); script.async = true; script.type = 'text/javascript'; script.src = 'https://app.example.com/VisitorWidget/WidgetScript'; document.getElementsByTagName('HEAD').item(0).appendChild(script); script.onreadystatechange = script.onload = function (e) { if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { var w = new PCWidget({c: 'e01fe420-5c14-55p0-bbec-229c7d9t2f0cf', f: true }); done = true; } }; })();</script>

What have I done so far:

I have made a simple web application that requires you to sign up and log in. From this point on you get an iframe that you can use. I used an iframe just for testing.
The web application consists of HTML, CSS, PHP(mostly), JS and jQuery.

I've tried:

I've tried this. I got stuck on the Python part. I have never used/looked into this language.
Also, I'm kind of afraid that people are going to "use" my web application without the right to do so.
What I'm thinking is that the generated key, needs to be send to our website to check if the key is correct.

Tips, tricks, guides?

Do you have any tips or tricks? Maybe critisism?
JSONP, CORS or anything? Never done JSONP or CORS, so any tips about that would be nice too!

Anything is appreciated!

Answer 1

Yes, in general, you got the idea right.

1. The client signs in to your website, registers his domain and receives ID (lets call it that way)
2. He implements the js in his site with the ID properly implemented
3. An authentication request that holds the ID is sent to server; also validating the domain (otherwise, it would be easy just to copy js and put it in my site).

What concerns exact implementation - there are tons of examples out there. There is no one-size-fits-all way and that is the best part of it - fully custom to fit your needs. For example, twitter

<a class="twitter-timeline"
    data-widget-id="600720083413962752"
    href="https://twitter.com/TwitterDev"
    data-tweet-limit="3">
  Tweets by @TwitterDev
</a>

Since php tag is provided and used, I see no reason why to mix it with python unless something really specific is required (and I doubt that). So stick to php for now. About the security of the application - using the ID and some domain that requests will be validated against is fair enough. Maybe there are some extra metrics larger sites/services are using, but don't worry about it much.

Extra read:

• What are the differences between JSON and JSONP?
• CORS - What is the motivation behind introducing preflight requests?