How to login to websites using Screenly Pro

This image is a hacker who carried out a digital signage hack.

One common question we get from customers who use their Screenly deployment to display company dashboards is: How do I make the digital signage player log in to my websites?

As much as we would like to say, “Just do this, and it will work,” the reality is much more complicated. There are products out there with significant engineering teams, such as 1Password, where one of their main features is to fill in credentials on a website. Even these dedicated teams often struggle with this task. The reason is that, while there are standards for this, few of the top web properties have adopted these standards.

That said, I do have some good news. The tech-savvy reader may have noticed the technical details in the link from our recent Grafana announcement. In order to support Grafana, we had to add support for sending custom HTTP headers with the Screenly 2 Player. We spent a lot of energy implementing this functionality in a way that would work across multiple web properties, as this functionality is useful for more than just Grafana. However, we’ll start with Grafana in our guide below.

Please note that this only works with Screenly Pro and the Screenly 2 Player.

Authentication using a “Bearer Token”

One of the ways Grafana allows you to authenticate yourself is by using what’s known as a Bearer Token. In simplified terms, a Bearer Token acts as a combined username and password for web resources. Bearer tokens are usually not used by end-users. Instead, programs typically use Bearer Tokens. In the case of Grafana, the program can use Bearer Tokens to authenticate users and their dashboards.

Another common implementation of Bearer Tokens is through JSON Web Token (JWT). Authentication frameworks such as Auth0 use this implementation.

Using Bearer Tokens in Screenly Pro

If you have a web service that you can log in to using a Bearer Token, you can use this web service with Screenly Pro. Here’s how:

  • Add a new web asset. If you get an error about the page being unreachable, ignore this error as it is expected if our system receives a 40x status code.
  • Once you’ve added the asset, navigate to it and click Advanced.
  • Next to Headers, press Add.
  • Enter “Authorization” as the Header.
  • Enter “Bearer: [your token]” under Value.
  • Press Save.

As soon as your screens have synced up, your screens should be able to login automatically using the Bearer Token.

Authenticating using “Basic Auth”

Long-time internet users probably remember the username/password pop-ups that used to be the standard way of logging into a website. This standard is called Basic Authentication or Basic Auth for short. While it is no longer very popular among consumer websites (largely due to the usability and aesthetic elements), it is still widely supported across various web servers and platforms. Notably, the dashboard tool Nagios also uses Basic Auth.

Using Basic Auth in Screenly Pro

As it happens, using Basic Auth is very similar to using Bearer Tokens. They both use the authorization header, but the payload differs slightly. The value is simply Basic followed by the base64 hash of the username and password. There are tools out there that can do this for you, but, if you’re a bit more careful and would like to do this locally (which yours truly recommends), you can do this using Python:

>>> import base64
>>> auth = base64.b64encode(b"YourUsername:YourPassword")
>>> print("Basic {}".format(auth.decode()))
Basic WW91clVzZXJuYW1lOllvdXJQYXNzd29yZA==

Alternatively, you can accomplish the same thing using good old Bash:

$ echo Basic $(echo -n "YourUsername:YourPassword" | base64)
Basic WW91clVzZXJuYW1lOllvdXJQYXNzd29yZA==

Once you have the string, simply add it as the Value just as in the steps for the Bearer Token.

Later on, we are going to implement this natively in the web app, but for now, this should do as a workaround.

Takeaway

While we are not able to support every type of authentication, we can log in to a large number of providers thanks to the fact that we support authentication using various HTTP Header mechanisms. We will keep looking at ways to improve our authentication mechanisms, and we hope to make additional steps to enable you to use Screenly to render content from even more sources.

If you got any questions, feel free reach out to us.