Skip to main content
Skip table of contents

Add Login System in Iframe Implementation

Here’s a diagram showing the basic structure of the login system implementation:

image-20240811-215026.png
  1. First, you need a login page with a form:

    image-20240811-212728.png

    CODE
    <form onsubmit="handleLogin(event)">
        <h3>Login Here</h3>
    
        <label for="username">Username</label>
        <input type="text" placeholder="Email or Phone" id="username" name="username">
    
        <label for="password">Password</label>
        <input type="password" placeholder="Password" id="password" name="password">
    
        <button type="submit">Log In</button>
    
      </form>
  2. On form submission, you need to do your authentication logic:

    CODE
    function handleLogin(e){
        e.preventDefault();
        const form = e.target;
        const username = form.username.value;
        const password = form.password.value;
        //your login logic goes here
        localStorage.setItem("isAuthenticated", true);
        window.location.href = "/E3DS_Iframe_Demo.htm"; //Redirect to the main webpage
    }
  3. You should also check if the user is logged in on the webpage containing the stream. If the user is not logged in, redirect to the login page:

    CODE
    window.onload = function(){
        if(!localStorage.getItem("isAuthenticated")){ //replace this with your authentication check logic
            window.location.href = "/login.html"
        }
    }

You can find a simple example here: https://github.com/e3ds/E3DS-Iframe-Demo/tree/iframe-demo-html-login

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.