1

HTML5 page with login

I am displaying an external webpage on the brightsign. It requires a login to access the site that uses a standard html form. I do not control the website code. I can publish the site and login manually via a keyboard hooked up to the brightsign. but each time I publish a change or reboot the brightsign the login session is lost. Is there a way to auto login when the brightsign first loads.

22 comments

  • 0
    Avatar
    Brandon

    Hi James, If the site doesn't accept HTTP authentication, the only method currently available would be to use something like an X-Keys Switch in Hardware mode to work just like manually typing.

    You could trigger it with a GPIO-controlled relay or other device that can be controlled and act as a simple contact-closure switch.

    You should ensure that site behavior is consistent and the timings are safe to avoid exposing your username/password by accidentally "typing" it into a visible field.

    Once you have it working, you might try hiding the page login by displaying an image over it during the login process, then reload the page (by navigating back to the same HTML5 state) before hiding the cover image.

    If the login fails, you'll get the login page again, which might contain some of the username/password depending on where the failed automated typing ended up, but at least the viewer won't see the entirety of the typing, so as long as the password is longer than the field's display, only part of the password would be visible.


    We're trying to find a good method to automate logins, but given the diverse nature of login pages, it's a challenge.

  • 0
    Avatar
    Samuel Platt

    This really is a bit of a drawback. Our CEO wants to be able to display our company Yammer page but it takes you to the sign in page each time. Oddly i can go in to preview, sign in and it works fine but that won't relay over to the content when published. 

     

    Is my only option to wait until you are able to develop the chance to login to a web page?

  • 0
    Avatar
    Samuel Platt

    *Only option other than the above suggestion, which sounds complicated and costly unfortunately. 

  • 0
    Avatar
    Joseph Centineo

    We are experiencing the same issue, but different website. 

     

    Now that HTML5 is a pushable content type, Brightsign needs to incorporate a better system for authenticating on these sites. 

  • 0
    Avatar
    ^UD\_$

    For Yammer, you could explore this option

    https://developer.yammer.com/docs/embed

     

    Joseph,

    Which site do you need to show?

     

  • 0
    Avatar
    Joseph Centineo

    This is needed for both internal and external sites. 

    This includes Tableau, ZenDesk, SensorTower and Swrve

  • 0
    Avatar
    Samuel Platt

    @^UD\_Sheme5h$ - i could explore that option - but even that link explicitly says you need to login, which is seemingly impossible on Brightsign for any page that requires authentication. 

    Has any sort of system been developed as of yet? 

    I was sent the below by Brightsign support but none of these options work. 

    Yes, you can publish pages that require a login.

    You can add the login information inline with the url. For example, some urls allow you to do something like http://login:password@myserver.com.

    Some may require that the username and password be added to the end of the url like values being passed in with http://www.mywebsite.com?username=test&password=test

    Some customers will whitelist the player ip so it doesn't require a login.

    Some customers use locally installed cert files that can be applied to a player using a plugin for authentication.

    You can also use a html page to log into another page. The idea is you'd modify the page to match the form that your page is looking for. This usually requires inspecting the html page with the login to find the name of the login form as well as the IDs used for the login name field and the password field.

     

     

  • 0
    Avatar
    Aron Thompson

    Has there been any updates on this? 

  • 0
    Avatar
    Joseph Centineo

    These suggestions unfortunately did not solve our issue. Due to the time constraint we were on, we had to switch to a different solution for displaying the web pages. Thank you for the help, this can be closed.

  • 0
    Avatar
    Robert Podgorski

    Any progress on this, my customer like to display tableau dashboards on brightsign but Brightsign does not support authentication.

    Anyone had any luck?

    Almost hard to believe that units can not support html authentication especially now as everything require some sort of security.

     

  • 0
    Avatar
    Jeff E

    You can write a javascript that enters the login credentials to the webpage. And then add a plugin to your presentation that waits for the load-finished event from the HtmlWidget and use the InjectJavascript method to call that javascript.

  • 0
    Avatar
    Terry

    @Jeff E

    Thank you for the advice. Do you have time to provide a generic example? 

  • 1
    Avatar
    Jeff E

    Hi Terry,

    Here is an example of how I was able to get this to work.

    Create a Presentation that has an HTML5 state in one of your video zones. Then create a script plugin similar to the code at the end of this post and add it to the presentation, the name in this case is sendWebLogin.

    In this example I am storing the javascript named ttlogin.js on the sd card. You can also just include the javascript directly in this brightscript file like so.

    m.htmlwidget.InjectJavaScript("if(document.getElementById('loggedIn').style.display='none'){
    document.getElementById('username').value='YourUserNameHere';
    document.getElementById('passwrd').value='Password';
    document.getElementById('loginBtn').click();
    };")

    You can use the console in Chrome's developer tools to figure out the specifics for your javascript.

    sendWebLogin.brs

    Function sendWebLogin_Initialize(msgPort As Object, userVariables As Object, bsp As Object)

    sendWebLogin = newSendWebLogin(msgPort, userVariables, bsp)
    return sendWebLogin

    End Function


    Function newSendWebLogin(msgPort As Object, userVariables As Object, bsp As Object)

    'create the new object

    s={}
    s.objectName = "sendWebLogin_object"
    s.msgPort = msgPort
    s.userVariables = userVariables
    s.bsp = bsp
    s.htmlwidget = invalid ' We'll use the FindHTMLWidget method to set this later
    s.ProcessEvent = sendWebLogin_ProcessEvent

    return s
    End Function


    Function sendWebLogin_ProcessEvent(event As Object) as boolean

    m.htmlwidget = FindHTMLWidget(m.bsp) 'find the htmlwidget in the presentation

    'Receive a plugin message
    if type(event) = "roHtmlWidgetEvent" then
    eventData = event.getData()
    if type(eventData) = "roAssociativeArray" and type(eventData.reason) = "roString" then

    if eventData.reason = "load-finished" then


    m.htmlwidget.InjectJavaScript("SD:/ttlogin.js")
    end if
    end if
    end if

    return false

    End Function


    Function FindHTMLWidget(bsp)
    for each baZone in bsp.sign.zonesHSM
    if baZone.loadingHtmlWidget <> invalid then
    return baZone.loadingHtmlWidget
    end if
    end for
    print "Couldn't find htmlwidget"
    return false
    End Function
  • 0
    Avatar
    Terry

    @Jeff E
    Thank you for taking the time to demo this!

  • 0
    Avatar
    Vaidotas

    @Jeff E

    I am trying your example and getting black screen. Do you have any suggestions? 

    Thank you

  • 1
    Avatar
    Jeff E

    @Vaidotas 

    Have you tried enabling the javascript console on your presentation and using the Chromium devtools to see if you are getting javascript errors? 

  • 0
    Avatar
    Vaidotas

    @Jeff E

    Thanks, it helped me!

  • 0
    Avatar
    Mohamad Nizam

    Hi All, 

    Anybody can help me on method that provided by Jeff E?
    is the brightsign script still working?

    I have tried but nothing happen. Its still showing the login page. Anyone can assist me on this?
    Below is sample login page. Can someone provide me sample of javascript.

    Link: http://demo3.ispconfig.org/
    Username: client
    Password: demo

    Thanks in advance. Appreciate your help. 

  • 0
    Avatar
    Jeff E

    @Mohamad Nizam

    You need to be able to find the elements of the DOM so that you can inject the javascript. You can inject the javascript directly into the brightscript. 

    From looking at the demo page you provided I can find the username text box, password text box and submit button and interact as follows

    document.getElementById("username").value='client';
    document.getElementById("password").value='demo';
    document.getElementsByTagName("FORM")[0].submit();


    Putting that into my previous example

     

    Function sendWebLogin_ProcessEvent(event As Object) as boolean

    m.htmlwidget = FindHTMLWidget(m.bsp)
    m.htmlwidget.enableSecurity({insecure_https_enable : true})

    if type(event) = "roHtmlWidgetEvent" then
    eventData = event.getData()
    if type(eventData) = "roAssociativeArray" and type(eventData.reason) = "roString" then
    print "event data reason ==>"; eventData.reason
    if eventData.reason = "load-finished" then
    print "calling javascript login"
    m.htmlwidget.InjectJavaScript("document.getElementById('username').value='client';document.getElementById('password').value='demo';document.getElementsByTagName('FORM')[0].submit();")

    end if
    end if
    end if

    return false

    End Function

     

  • 0
    Avatar
    Mohamad Nizam

    @ Jeff E

    You are great man.. its working. Thanks bro. 
    Now my html site can auto login. Thanks once again. 

  • 0
    Avatar
    Mohamad Nizam

    Hi Jeff E & Brighstsin Support,

    I managed to set the html to auto login by using brs script that shared by Jeff E . But just want to ask, can we redirect or jump to other page after login? Can we use javascript method like below code in brs to redirect? 

    window.location.href = "http://example.com/new_url";

  • 0
    Avatar
    Thaddius Cho

    Hey @Jeff E. 

    Im new to BrightAuthor and BrightSign so excuse me if this has been explained already. 

    Im trying to use our XD234's as Tableau Dashboards and found this script. 

    I replaced the line:

    m.htmlwidget.InjectJavaScript("document.getElementById('username').value='client';document.getElementById('password').value='demo';document.getElementsByTagName('FORM')[0].submit();")

    With what I believe would work on Tableau, but cant seem to get it to work. 

    I may not be understanding how to add a script to the Presentation. 

    Are we using BrightAuthor:Connected to do all this or BrightAuthor? 

    I attempted with BrighAuthor:Connected to direct the HTML5 Content to the tableau site and added a Script Plugin and it just causes my Brightplayer to constantly reboot instead. 

    Any advice you have here? 

Please sign in to leave a comment.