DEV Community: BK ☕

Single App, Multi Login - Proof Of Concept

BK ☕ — Tue, 19 Jan 2021 15:37:30 +0000

This post was originally posted on https://bilalkhoukhi.com/blog/single-app-multi-login

Original Post:

Google, Instagram, Twitter, and many other services allow users to login to multiple accounts and to switch between them without having to logout from one and login to another.

At BuildOn Technologies, I saw the need for a similar solution, so I have decided to create a Proof of Concept to assess how easy it can be done with Angular, and whether this is the right solution for us.

How is it done?

Google's approach is the oldest I have seen as I used it for many years. When you go to Gmail, you will notice the URL looks like this https://mail.google.com/mail/u/N/... where N is the index of the account starting from 0. This allows the Frontend app to identify which account it should get data for from the server or localStorage and gives you the ability view different accounts in different tabs, where refreshing does not affect which account/page you are viewing.

Looking at Gmail's cookies, you will notice that the keys GMAIL_AT and COMPASS have their Path values correspond to /mail/u/N and I believe this is where each account's token is stored.

Twitter's approach is a bit different, you cannot use different accounts in different tabs, once you switch to a different account in one tab, the other tab switches the account right away, I believe they use the BroadcastChannel Web API to detect the switch, and then refresh the whole page. As for Instagram, I could not test their multi-login mechanism, but I would think it behaves in a similar way to Twitter.

Objective

My goal is to imitate Google's approach with some twists:

Login to multiple accounts
The ability to use them independently in different tabs.
Refreshing a tab should not log you out or switch you to another account.
Logout from each account should not force you to log out from all, which is the case for Google's implementation.
Avoid Google's routing style. So, no /mail/u/N.

Tracking logins and workarounds:

As mentioned, Google forces you to logout of all accounts and that is due to the use of indexes they assign for each account, you cannot logout of account 3 (index 2) and still use account 4 (index 3). If we follow Google's approach, we would be giving up on the ability to logout from accounts independently. Unless we use random digits instead of in-order indexes.

We could also use query parameters instead to detect which account we are currently using, but we would still face the same logout issue, unless we use random digits instead of indexes. ?account=536

My preferred solution is to use a mix of localStorage and sessionStorage to keep track of the user in each tab. localStorage keeps track of all the accounts that are logged in, while sessionStorage can store which of these accounts we are using in the current session. This should allow using different account in different tabs, refreshing does not remove your session, but closing the tab does.

So, what happens if we visit a link in a fresh tab IF we are already logged into multiple accounts? Well, we can show the user a list of accounts, they can choose which to use. And this is a pro and a con:

The con is that the user's navigation must interrupt, but luckily it only happens if the user is logged into multiple accounts.
The pro is fixing the issue in Google's implementation where sharing links with others is wacky... let me explain: Jane and I work at a company that uses Google Suite, she uses the work account as her default (index 0), and I use my personal Gmail account as my default, and the work account as index 1. Jane shares a link with index 0, Google will not let me see the content, and I must switch manually.

Setup

This POC is done using Angular. To view the completed solution head over to https://github.com/Bilal-io/Multi-Login-POC.

Let's walk through some files to explain what is going on:

Anything under interceptors is borrowed from https://github.com/cornflourblue and it is acting as a fake backend. We call ./users/authenticate route to login and we get a response.
The auth service services/auth.service.ts has helper functions to login, logout, switch accounts, and deal with localStorage and sessionStorage, as well as store our login state. Too much in one file, it could be refactored.
There are two lazy loaded modules, dashboard and admin.
If we look at guards/authentication.guard.ts and guards/admin.guard.ts we find two auth guards for the dashboard and admin modules. Each has a canLoad interface that prevent downloading its respective module if we are not authenticated, or authenticated but not an admin. There is also a canActivate interface that prevents the route from being accessed if not authenticated. (in can the module was loaded, then the user logs out)
The Header component lists the users in a dropdown menu, allows us to logout of the active user, or switch to another.
The Login page checks the app state to see if we have any accounts, and displays them, giving us the option to choose which to use. Or we can switch to the form and enter the credentials of a different account. In either case, we get redirected to the /dashboard unless the tab was initially to a specific URL i.e. ./dashboard/test then we store that in a query param ?redirect= and redirect the user to it after a successful login or account switch.

Final Remark

If you've worked on a similar implementation, I'd like to hear your feedback.

Automate Taking Website Screenshots With Selenium in Python

BK ☕ — Tue, 25 Dec 2018 04:44:01 +0000

Update 09/11/2020

Updated Title for more clarity
Published on https://bilalkhoukhi.com/blog/automate-taking-website-screenshots-with-selenium-in-python

Update 01/01/2019

Here is a Node.js app doing the same work, it is using a React front-end. Node.js App with Selenium and React

Update 12/26/2018

If you wish to run the job using Headless Chrome, either on Windows, Mac, Linux (Desktop or through SSH), I have added a new section at the end of the post.

Original Post

A not too long story short I dread doing repeated tasks manually and that's why I'd rather spend minutes (hours when doing it for the first time) to write a script that automates the process for me. Otherwise I cannot focus, and if you're also horrible at focusing just like I am, I recommend reading Deep Work by Cal Newport.

Problem:

I have a Photoshop mock-up of a laptop, stablet and a phone that I need to use to showcase a website.

That's an easy and quick job, 3 screenshots and 2 minutes later, you're done. But what if you have 10, 20, or 100 websites, and you have to supply screenshots of different screen sizes (a desktop, a mobile and a tablet)?

Solution:

Selenium is the solution. And since I've only used it with Python, I choose to do this tutorial with Python, it is also faster for me to setup compared to a Node.js project, but the functionality should be similar.

Let's start:

If you don't have Python installed in your system already, get it from here: Python 3.6+
You will also need Chrome Webdriver

Once you have Python setup, install Selenium by running the command:

$ pip install selenium

It's easy to get started with python, all you need is a single file that imports the modules you will be using, selenium and perhaps time which will allow us to delay/wait a few seconds after the page is loaded before we take the screenshot.

We will also make use of the time module, which is part of the Python standard library..

Next, Create a file with the extension .py and open it with your favorite editor.

First we'll start by importing webdriver from selenium and time.

from selenium import webdriver
import time

Now let's define a list of links we want to take screenshots of

links = ['dev.to', 'twitter.com', 'github.com']

It's import to note that the webdriver does not consider the links above as valid since they do not have the https:// protocol. We will be adding it later, and the reason I added them without the protocol is so that I can use the above as file names.

We can start using the webdriver by calling webdrive.chrome(/path/to/chromedriver) as follows

with webdriver.Chrome("C:/chromedriver_win32/chromedriver") as driver:
    # code goes here using driver

The above reads as with this function defined as driver.. do things with driver
Which is somewhat equivalent to

driver = webdriver.Chrome("C:/chromedriver_win32/chromedriver")
# code goes here using driver

As far as I can tell, the difference is that the first method will automatically close the browser once it is done doing its job, unlike the second one, which you would have to explicitly call driver.close() to close the browser. If anyone knows other reasons, please let me know in the comments.

For this tutorial I will be using the first method.
For those new to Python, it is important to note that the following lines will be indented, as they're contained in the statement above, similar to how you would use curly braces to contain a function/class body in C++, JavaScript and other languages.

For the purpose of taking a screenshot, we will be using 3 commands: set_window_size(), get() and save_screenshot()

driver.set_window_size(width, height) # takes two arguments, width and height of the browser and it has to be called before using get()
driver.get(url) # takes one argument, which is the url of the website you want to open
driver.save_screenshot(/output-dir/file_name.png) # this one takes one argument which is the path and filename all concatenated. Important: the filename should end with .png

To learn more about these commands head to the Webdriver API documentation

Let's put it all together, we will need to loop through the list of links we created above, and define some variables to use for filename, width and height, and the link with the https:// protocol

with webdriver.Chrome("C:/chromedriver_win32/chromedriver") as driver:
    for link in links:
        desktop = {'output': str(link) + '-desktop.png',
                   'width': 2200,
                   'height': 1800}
        tablet = {'output': str(link) + '-tablet.png',
                  'width': 1200,
                  'height': 1400}
        mobile = {'output': str(link) + '-mobile.png',
                  'width': 680,
                  'height': 1200}
        linkWithProtocol = 'https://' + str(link)

We have defined 3 dictionaries that contain the output filename, width and height for every screen size we need, you can change the dimensions based on your needs.

Now we can start using the commands explained above

        # set the window size for desktop
        driver.set_window_size(desktop['width'], desktop['height'])
        driver.get(linkWithProtocol)
        time.sleep(s)
        driver.save_screenshot(desktop['output'])

Noticed that we have used time.sleep(1), what that means is that we asked python to delay the execution of the next line until 2 seconds pass. Even without the sleep command, the driver will wait for the page to fully load before it takes the screenshot, however, if you have any animation, you may want to wait for things to settle down, if that's not needed, then you can get rid of the line.

and this is how the tablet and mobile will look like:

        # set the window size for tablet
        driver.set_window_size(tablet['width'], tablet['height'])
        driver.get(linkWithProtocol)
        time.sleep(2)
        driver.save_screenshot(tablet['output'])

        # set the window size for mobile
        driver.set_window_size(mobile['width'], mobile['height'])
        driver.get(linkWithProtocol)
        time.sleep(2)
        driver.save_screenshot(mobile['output'])

And with that, all you need to do is run the script from the command line

python script.py

This will open Chrome browser, resize it, take the screenshot each time and output the file at the same directory you have script.py until it is done.

The whole code put together can be found here on Github

Final note

Selenium is capable of great things, it can manipulate pages with CSS and JavaScript, fill out forms and submit them, etc... Learn it and put it to good use.

How to use Selenium with Headless Chrome

It can be annoying to have the browser open and close so many times while you're trying to finish other work. The solution is to use Headless Chrome.

Not much will change from the code above.
We need to define our ChromeOptions() and add an argument to it using add_argument() command as follows:

options = webdriver.ChromeOptions() # define options
options.add_argument("headless") # pass headless argument to the options

Then we will pass a new argument to the command we defined before:

with webdriver.Chrome("C:/chromedriver_win32/chromedriver") as driver:
    # code here

becomes

with webdriver.Chrome("C:/chromedriver_win32/chromedriver", chrome_options=options) as driver:
    # code here

This is all you will need for Mac and Windows which I have tested. Linux desktop have not been tested, but I assume it will work as well.

Linux Server through SSH

Things work differently between Linux Desktop and Server, the latter has no screen, and I am sure it is stripped from so many drivers it does not need, and for that reason, we will have to pass a few more arguments to make it work.
As I have not tested this on Linux Desktop, if the solution above does not work, then treat it like we will treat Linux Server

First install Chrome Browser (I never thought I'd need it here)

sudo apt-get install -y chromium-browser # BTW I use Ubuntu (says a non-Arch user)

Then we add these arguments

options = webdriver.ChromeOptions() # define options
options.add_argument("headless") # pass headless argument to the options
options.binary_location = '/usr/bin/chromium-browser' # location of the Chrome Browser binary
options.add_argument("disable-infobars") # disabling infobars
options.add_argument("--disable-extensions") # disabling extensions
options.add_argument("--disable-gpu") # applicable to windows os only
options.add_argument("--disable-dev-shm-usage") # overcome limited resource problems
options.add_argument("--no-sandbox") # Bypass OS security model
# thanks to https://stackoverflow.com/a/50642913/2291648, this answer helped debug the issue

And just like we did above, pass the chrome_options=options to the webdriver.Chrome(...,webdriver.Chrome) as a second argument.

This worked for me, and I hope it does for you as well.