​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8" />
5
    <title>How to use new login form on your own site</title>
6
</head>
7
<body>
8
    <h1>How to use new login form on your own site</h1>
9
    <p>Your supersite here...</p>
10
    <p>and here... <iframe src="" id="loginform"></iframe> and here...</p>
11
    <p>and here too...</p>
12
</body>
13
</html>
14
​
HTML
7
 
1
#loginform {
2
    width:250px;
3
    height:430px;
4
}
5
p>* {
6
    vertical-align:middle;
7
}
CSS
33
 
1
// Wialon site dns
2
var dns = "https://hosting.wialon.com";
3
​
4
// Main function
5
function loadForm() {
6
    // construct login page URL
7
    var url = dns + "/login.html";  // your site DNS + "/login.html"
8
    url += "?access_type=-1";
9
    url += "&response_type=hash";   // response type
10
    url += "&redirect_uri=" + dns + "/post_token.html"; // if login succeed - redirect to this page
11
    document.querySelector("#loginform").src=url;
12
}
13
document.addEventListener('DOMContentLoaded', loadForm, false);
14
​
15
// Help function
16
function tokenRecieved(e) {
17
    // get message from login window
18
    var msg = e.data;
19
    if (typeof msg == "string" && msg.indexOf("access_hash=") >= 0) {
20
        // get hash
21
        var hash = msg.replace("access_hash=", "");
22
        // now we can use hash
23
        //open new window
24
        window.open(dns+'?authHash='+hash, "_blank");
25
        //restore form if new window opened
26
        loadForm();
27
        // or redirect to hosting
28
        document.location.href = dns+'?authHash='+hash;
29
    }
30
}
31
// listen message with hash from login page window
32
window.addEventListener("message", tokenRecieved);
33
​
JS
Result
Source code of example Close ✕
1
 
1
/*source*/