Skip to content

Latest commit

 

History

History

svgator-frontend

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
README.md
README.md
 
 
browser.js
browser.js
 
 
example.html
example.html
 
 
example.js
example.js
 
 
index.js
index.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

README.md

SVGator's JavaScript Frontend SDK

This JS SDK lets your users connect their SVGator account with your application. Please note that SVGator strongly recommends the usage of the Frontend SDK over direct API calls.

Before You Start

In order to use SVGator's API & SDKs, one first must obtain an SVGator Application. To do so, please email [email protected], providing your SVGator account ID and the desired usage of your SVGator application.

The API keys one should receive from [email protected] are shown below:

Name Description Notes Sample Value
app_id Application ID prefixed with "ai_", followed by 32 alphanumeric chars ai_b1357de7kj1j3ljd80aadz1eje782f2k
secret_key Secret Key prefixed with "sk_", followed by 32 alphanumeric chars sk_58ijx87f45596ylv5jeb1a5vicdd92i4
❗ Attention
◾ Your Secret Key must not be included in any requests, neither be present on Front-End.

Creating an application on the fly is also possible using appId=dynamic, yet this feature comes with restrictions. For a multi-user implementation follow the steps above instead.

Requirements

  • nodejs >= 7.6 (for self-hosted version)
  • none (for CDN version hosted by SVGator.com)

Installation

Run the following command in the directory where you want to install the module (for self-hosted version only):

npm i @svgator/sdk-frontend

Optionally, you can also use SVGator's CDN to load the latest version of frontend SDK into your site using this CDN Link. Find a detailed example here.

Usage as Node Module

const SVGatorFrontend = require("@svgator/sdk-frontend");
// You may also import our module by:
// import SVGatorFrontend from "@svgator/sdk-frontend";

let appId = 'ai_...';
let returnPage = 'https://example.com/my-return-url/?some=arguments';

async function loginWithPopup() {
    let {auth_code, auth_code_expires} = await SVGatorFrontend.auth(appId);
    // @todo return auth_code to your backend & obtain an access_token with it
}

function loginWithRedirect() {
    SVGatorFrontend.auth(appId, returnPage);
    // @todo on `returnPage`, handle the &auth_code=ac_... argument & obtain an access_token using it
}

// initiated by a user action (i.e. click on a log in button), one should call loginWithPopup() OR loginWithRedirect()

Usage from CDN

Find a detailed example here.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.svgator.com/sdk/svgator-frontend.latest.js"></script>
    <script>
        function loginWithPopup()
        {
            let appId = 'ai_...';
            window.SVGator
                .auth(appId)
                .then(function (result) {
                    // @todo return result.auth_code to your backend & obtain an access_token with it
                }).catch(function (result) {
                let msg = result && result.msg || "Unknown Error";
                msg += result && result.code ? ' (#' + result.code + ')' : '';
                console.log(msg);
            });
        }

        function loginWithRedirect()
        {
            let appId = 'ai_...';
            // @todo return auth_code from redirected URL params to your backend & obtain an access_token with it
            window.SVGator.auth(appId, document.location.href);
        }
    </script>
</head>
<body>
    <button onclick="loginWithPopup()">Connect to SVGator with Popup</button>
    <br>
    <br>
    <button onclick="loginWithRedirect()">Connect to SVGator with Redirect</button>    
</body>
</html>