Full Screen Browser - with login

Help
#1

HI

Is is possible to use the full screen browser with an URL that requires authentication / login?

1 Like
URL Link with login Credentials
Fullscreen browser-package scroll
Remote Control rather than remote viewing
Chrome browser cookies
#2

Yes. That’s possible with using the scripting option. But that’s really clunky: Basically you can assign a JSON asset with the following structure:

[
    [
         "http://.*foo.com/login",
         "alert('hello world')"
    ], ...
]

For every page/frame/iframe loaded, the service looks if one of the urls regexes match. If so it runs the JS part in the context of that page. It’s really challenging to debug.

Example code

As an example of what a JS snippet might look like:

(function() {
  var USERNAME = "foo", PASSWORD = "bar";
  var logged_in = false;
  function try_login() {
    if (logged_in)
      return
    
    // Set username value
    var username = document.getElementById("UserName");
    if (username.type != "text")
      return;
    username.value = USERNAME;
  
    // Set password value
    var password = document.getElementById("UserPassword");
    if (password.type != "password")
      return;
    password.value = PASSWORD;
  
    // Click the login button
    document.getElementById('loginButton').click()
    logged_in = true;
  }

  setInterval(try_login, 100);
})();

Managing your snippets

For a single snippet

Create a new empty encode.html file and paste in the following code:

<html>
  <body>
    Regex:<br/><input id='regex'><br/>
    Code:<br/><textarea id='code' rows=40 cols=80></textarea><br/>
    <button id='encode'>Encode (in the popup, select all the text and copy it into a JSON file)</button>
    <script>
      document.getElementById('encode').addEventListener('click', () => {
        let regex = document.getElementById('regex').value
        let code = document.getElementById('code').value
        alert(JSON.stringify([[regex, code]]))
      })
    </script>

Then open the encode.html in a browser and fill in the regex value and JavaScript code into the textarea. Clicking on the Encode button opens up a popup with encoded JSON file you can then copy into a JSON file.

Advanced: Using multiple snippets

Here’s how managing the scripting JSON file can be made a bit easier. Here’s an example of a script that just clicks an element on example.com:

// ^https://example.com/.*
document.getElementById("element").click()

The first line is the commented regex of where the script should be active. The following little Python script then takes JS code like this (with their first line being the escaped regex) and converts it to the JSON the package expects. Here’s the script:

import re, sys, json
scripts = []
for fname in sys.argv[1:]:
    with open(fname) as f:
        url_pattern = f.readline().lstrip("//").strip()
        re.compile(url_pattern)
        script = "(function() {\n" + f.read() + "\n})();"
        scripts.append([url_pattern, script])
sys.stdout.write(json.dumps(scripts))

Converting is then as simple as:

python mkjson.py example.js  > /tmp/example.json

If you have multiple script files, just specify all of them as arguments to the mkjson.py script.

1 Like
Browser and certificate
#3

Hello,

I´m a newbie currently testing info-beamer and the overall experience is quite good.

My only need is to show 6 web links on raspberry pi 3, using Full Screen Browser package.
Unfortunately there’s no interaction with the screen it-self, using keyboard or mouse, so that i can login on 2 of those links (http url).

The scripting option seems to require programing skills for javascript and python, so my question is if there is any compiled examples or files for “simple” editing and adaptation?

Thanks,

#4

I fear it doesn’t get a lot easier. You’ll have to provide a single JSON file containing your bundled “auto login scripts”. That’s what the Python part does.

The JavaScript itself also doesn’t get a lot easier: You’ll have to find the login buttons within the page’s DOM, most likely with the help of document.getElementById and place values in there. The code above is pretty minimal in that regard already and should be portable to different services that just use a username/login field on their authentication page.

#5

I used the original source of @infobeamer-fw to create a version which has support for custom headers. This allows you to add an Authorization header with Basc auth or a Bearer token for example.
See: choeflake/infobeamer-fullscreen-browser-package (github.com)

1 Like