Message:

Subscribe rss
Blog categories
All | Backendless features
How to implement mobile-to-web cross login using a QR code
July 11, 2018 by Oleg Vyalyh

What does  “mobile-to-web cross login with a QR code” mean ? It is one of the approaches for the two-factor authentication. Suppose that a user is already authenticated in your application (in my example it would be an android app) and the user wants to use it’s actual session to perform an automatic authentication in another application (in my case it’s a web app). There are several examples of popular apps which use this approach. For example, to login into a web session with WhatsАpp, you must login on your phone and then scan a QR code in the web interface.login with qr1 - How to implement mobile-to-web cross login using a QR code

The content of this article assumes::

The cr0ss-login process

The overall process consists of the following steps:

  1. The initial page of your web application makes a request to the server to generate a QR code.
  2. A custom API service generates a QR code with an encoded unique value. In this case that value is a name of a Backendless messaging channel. The service returns the QR code and the name of the channel channelName to the web app.
  3. The web app downloads the generated QR code and displays  it on the web page. Then the web app connects to the messaging channel and waits for a message. The message will be sent by the Android app later (step 5).
  4. On the Android app a user logs in to Backendless with their user name and password. As a result of the login, the Android app receives userToken, which uniquely identifies the user and his/her session.
  5. The user using the same Android app scans the QR code from the web page screen, receives the messaging channel and sends the userToken into the channel.
  6. The web application receives the message which contains userToken. The token can be used for the API calls made in the web app as it now will carry user’s identity.

The final project which demonstrates this approach (both the Android and web apps) can be downloaded from here: LoginWithQR.zip. The archive includes a ready-to-use android project and a simple web project (as a single html file). To get the demo running, you should do the following:

  1. Deploy the API service shown below into your Backendless app. The service is responsible for generating QR codes.
  2. Modify the Android app (from the zip archive) to add your APP ID and ANDROID API KEY which should be obtained from Backendless Console.
  3. Install the Barcode Scanner app on your phone. The app will be used by the Android project for scanning the QR code.
  4. Build the Android application with Android Studio and run it on your phone.
  5. Modify the HTML file (also from the zip archive) for the web app qr-code-login.html to add your APP ID and JS API KEY.
  6. Copy the HTML file into the /web directory of your Backendless app.

Let’s get down to the most interesting things.

Step 1

I based the implementation of this example on the code which was demonstrated in the How to generate a QR code with Backendless API Service article. I have changed the method generateQRCodePicture and created generateQRCodeForLogin. These methods will help us with creating QR codes. The method getUserId will be used to exchange userToken for the user’s objectId. You can see the changes below. 

Do not forge to change the package name (first line of the code). Then use CodeRunner to deploy the code to Backendless.

Once the code is deployed to Backendless, make sure it works as expected:image6 - How to implement mobile-to-web cross login using a QR code

Step 2

Install the application for QR code scanning. I used the Barcode Scanner application. Here the API for it.

Step 3

If you are not using the complete project code I shared at the beginning of this article, you would need to setup an Android project using Android Studio. Alternatively, you could use the project archive mentioned above.

The project must reference two additional libraries. The first one is ‘backendless’, and the second one is ‘socket.io-client’ which is required to enable the real-time capability available in Backendless version 5.0. Add the following dependencies to the build.gradle file:

Do not forget to add the INTERNET  permission in the Android manifest file.

Step 4

This is the listing of the MainActivity  class in the Android app. Pay attention to the highlighted code:

Step 5

Create a web application. In this case it is a simple html file with some JavaScript code in it (you can find the complete file is the archive I have shared with you). Please, pay attention to the code highlighted in bold:

The file must be uploaded to the Files section of your Backendless application:

image5 - How to implement mobile-to-web cross login using a QR code

Step 6

Copy the link for the web application:

image1 - How to implement mobile-to-web cross login using a QR code

Open/paste the link in a web browser and press the “Login with a QR code” button.  The web app fetches a QR code from the server and displays it.

qr web app - How to implement mobile-to-web cross login using a QR code

Step 7

Use the Android application to login with your userid and password (make sure to create a user in your Backendless application). Once you log in, you will see the “Login with QR” button. Click the button to scan the QR code in the web app.

logged in qr 512x1024 - How to implement mobile-to-web cross login using a QR code

Step 8

Your web application should log in automatically as soon as you scan the QR code in the Android app.

Hope you enjoyed this article. Happy coding!

Share this post
Tweet about this on TwitterShare on FacebookGoogle+