@svgator/sdk-frontend
v1.1.0
Published
SDK frontend for SVGator API
Readme
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|
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-frontendOptionally, 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>