iFrame

Summary

SkyID allows you to add authentication to almost any application type quickly. This guide illustrates the integration process using the iFrame method (SkyJoy Authentication Form), which smooths user entry points since all user flows are performed in an iFrame embedded in your web/ app.

Check out the demo below:

Before you begin

You need to request domain whitelisting from SkyJoy Team (integration@galaxyjoy.vn). This step ensures that your website's domain is authorized to interact with SkyJoy Authentication service. Contact the SkyJoy Team to obtain your necessary domain information.

Set up your iFrame project

This step-by-step guide helps you to make decisions on the integration flow.

1. Embed the SkyJoy iFrame

Once your domain is whitelisted, you can proceed to embed the SkyJoy Authentication Form into your website.

iFrame URL

https://iframe-authen.uat.skyjoy.io

https://iframe-authen.skyjoy.vn

Parameters

The following table lists the data attributes with their descriptions:

Attributes	Type	Required	Description
action	String	✅	signin or signup
client_id	String	✅	provided by SkyJoy team
redirect_uri	String		redirect uri after user signin or signup
lang	String		vi or en

Sample:

<iframe 
    src="https://iframe-authen.uat.skyjoy.io?client_id=1234567890&action=signup" 
    style="width: 100vw; height: 100vh;">
</iframe>

2. Handle the postMessage event from the iFrame

To ensure seamless communication between your website and the SkyJoy Authentication Form, you need to handle the postMessage event.

Event list

Event	Data	Description
onLoading		Loading event
onLoaded		Loaded event
onOpenSignIn	{ link: <login url> }	Open sign in
onOpenSignup	{ link: <signup url> }	Open signup
onOpenTermCondition	{ link: <TnC link> }	Open terms and conditions
resizeIframe	{ height: <iframe height> }	Resize iframe
onSuccess	{ client_id: <string>, token: <string>, refreshToken: <string>, expired: <timestamp> }	After user login or register success

Sample:

if (window.addEventListener) {
    window.addEventListener("message", onMessageFromSkyApp, false);
} else if (window.attachEvent) {
    window.attachEvent("onMessageFromSkyApp", onMessage, false);
}

function onMessageFromSkyApp(event) {
    // Check sender origin to be trusted
    console.log(event);
    if (event.origin !== "https://iframe-authen.uat.skyjoy.io") return;
    var data = event.data;
    if (typeof(window[data.func]) == "function") {
        window[data.func].call(null, data.message);
    }
}

// Function to be called from iframe
function onSuccess(message) {
    alert(message);
}

3. Customize the iFrame UI (Optional)

If you desire a unique look and feel for the SkyJoy Authentication Form that aligns with your website's design, you can request custom UI customization from the SkyJoy Team.