Using API Keys

Congratulations on your use of the AppID to create a compelling widget. If you're reading this section of the doc’s then you're looking for a replacement for your AppID.

Because as a paid user it no longer functions or because you wish to have more security around your widget.

Worry not, we got you covered .With just a little bit of work you can upgrade your widget to work with a key & secret. Which is more flexible and more secure than the AppID you were previously working with. Best of all other than a few small changes to your code concerning authorization you won’t have to change a thing about your widget.

We admit that the move from AppID to a Key and Secret is technical and you’re going to need access to the server(s) hosting your site where you wish to use the Widget.

If you don’t have access to the server(s), can’t get access, or feel this is beyond your skill set contact our support here. We have services to help you through this process. Otherwise, we suggest you step back down to the free account type and continue to use the AppID.

Let’s get started

To start with you are going to have to remove your AppID from your Widget constructor since it is no longer functional.

Instead, you’re going to have to replace it with a call to your Key and Secret. Don’t have your key and secret - click here and generate one.

Remember to copy the key and secret and store it somewhere safe.

Reverse Proxying

Once you have your key and secret, you need to create a secure way to access it from your widget. We suggest you set up a Reverse Proxy. if you're not familiar with reverse proxies you can read up about them here

Reverse Proxy is not the only server-side solution you can use. feel free to pick any secure method of providing your key and secret to the Widget.

To the right, we provide you with the framework for a Reverse Proxy example. In this example we will use the following files

secrets.json

app.js

index.html

Feel free to modify it to fit your needs. Just remember your key and secret identifies your account so if they are compromised. Someone else can use them to make Tweekit calls that you're going to end up paying for with your account.

So we cannot stress this enough , Keep your Key & Secret safe and only use secure methods to allow access to them.

The next section is going to guide you through using Reverse Proxy. Which is just one manner in which you can authorize your Widget using a key and secret.

Again feel free to use any secure method that works for you. We are providing an example framework for your use.

Setting Up Server Side Code

To start you will need to create some server-side code on your web server similar to the example shown on the right.

First , create a secrets file with a format identical to the example to the right. Replace the apiKey and apiSecret values with the key and secret you obtained from Tweekit.

Once you have your secrets file, store it on the server in a secure location.

secrets.json


    {
        "apiKey": "{Example Key}",
        "apiSecret": "{Example Secret}",
        "passphrase": "Passw0rd!"
    }

Second , Modify our app.js example to match the passphrase used and place it on your server. You will need to create and encode a new Keystore with your own unique passphrase - here is a link to a quick primer on how this is done.

Once you have your secret file secured .Your Keystore file set, then you can change your Tweekit constructor to remove the AppID

app.js


    var fs = require("fs");
    var express = require("express");
    var httpProxy = require("http-proxy");
    var secrets = require("./secrets");

    var apiProxy = httpProxy.createProxyServer({
        target: {
            protocol: "https:",
            host: "tweekit.io",
            port: 443,
            path: "/tweekit/api",
            pfx: fs.readFileSync("keystore.p12"),
            passphrase: secrets.passphrase
        },
        changeOrigin: true,
        headers: {
            apiKey: secrets.apiKey,
            apiSecret: secrets.apiSecret
        }
    });

    var app = express();
    app.use(express.static("./"));
    app.use("/tweekit/api", function(req, res) {
        apiProxy.web(req, res);
    });
    module.exports = app;

Finalizing Upgraded Code

At this point, you can test your widget and it should function as before. However, it no longer uses the AppID for authentication it now uses your accounts Key & Secret.

Congratulations!

If you run into any issues with this process , feel free to Contact Us.

index.html


    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Tweekit test</title>
            <link rel="stylesheet" href="./main.css">
            <script src="https://tweekit.io/tweekit_bundle.js"></script>
        </head>
        <body>
            <div id="main" class="container">
                <div id="t-0" class="container">
                </div>
                <button id="b-0">Tweek</button>
                <div id="output" class="container">
                    <img id="i-0">
                </div>
            </div>
            <script>
                let loaded = false;
                let twk= new TweekIT("#t-0");
                twk.origin = "http://localhost:3000";
                twk.elliptical = true;
                twk.resultWidth = 320;
                twk.resultHeight = 320;
                twk.format = "png";
                twk.alpha = true;

                let b = document.getElementById("b-0");
                b.addEventListener("click", async () => {
                    if(loaded) {
                        let blob = await twk.result();
                        let reqImgUrl = URL.createObjectURL(blob)
                        let i = document.getElementById("i-0");
                        i.src = reqImgUrl;
                        twk.reset();
                        loaded = false;
                    }
                });
                twk.addEventListener('render', () => {
                    loaded = true;
                });
            </script>
        </body>
    </html>