<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>How to use new login form on your own site</title>
</head>
<body>
    <h1>How to use new login form on your own site</h1>
    <p>Your supersite here...</p>
    <p>and here... <iframe src="" id="loginform"></iframe> and here...</p>
    <p>and here too...</p>
</body>
</html>
HTML

#loginform {
	width:250px;
    height:430px;
}
p>* {
    vertical-align:middle;
}CSS

// Wialon site dns
var dns = "https://hosting.wialon.com";

// Main function
function loadForm() {
    // construct login page URL
	var url = dns + "/login.html";  // your site DNS + "/login.html"
    url += "?access_type=-1";
    url += "&response_type=hash";	// response type
    url += "&redirect_uri=" + dns + "/post_token.html"; // if login succeed - redirect to this page
	document.querySelector("#loginform").src=url;
}
document.addEventListener('DOMContentLoaded', loadForm, false);

// Help function
function tokenRecieved(e) {
    // get message from login window
    var msg = e.data;
    if (typeof msg == "string" && msg.indexOf("access_hash=") >= 0) {
        // get hash
       	var hash = msg.replace("access_hash=", "");
        // now we can use hash
        //open new window
        window.open(dns+'?authHash='+hash, "_blank");
        //restore form if new window opened
        loadForm();
        // or redirect to hosting
        document.location.href = dns+'?authHash='+hash;
    }
}
// listen message with hash from login page window
window.addEventListener("message", tokenRecieved);
JS

Result

Source code of example Close ✕