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:

SkyJoy Authentication Form

Before you begin

You need to request domain whitelisting from SkyJoy Team ([e-mail]). 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

For UAT environment

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

For Production environment

https://iframe-authen.skyjoy.vn

Parameters

The following table lists the data attributes with their descriptions:

Attributes	Type	Check	Description
action	String	✅	signin | signup
client_id	String	✅	provided by SkyJoy team
redirect_uri	String		redirect uri after user signin or signup
lang	String		vi | 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	{ }
onLoaded	{ }
onOpenSignIn	{ link: <login url> }
onOpenSignup	{ link: <signup url> }
onOpenTermCondition	{ link: <TnC link> }
resizeIframe	{ height: <iframe height> }
onSuccess	{ client_id: <string>, token: <string>, refreshToken: <string>, expired: <timestamp> }	After user login or register success

Sample:

<script> 
  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);
  }
</script>

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.