Sign In with QR Code

Let user scan a QR code to login to the mobile app.

Type: login

Requirements

A website with authenticated user by email
4D 18R6 >= : bar code scanner are available only from this version
Real iOS mobile device (simulator do not simulate camera)

What its not

Use mobile app already authenticated, to authenticate on a web browser on desktop (like whats app)
A login form to login with email or qrcode. Its is exclusively with qrcode but we could easily make a new login form with the two mode of authentication

How to

A demo 4d projet is here

add this template to your project

Currently it is not possible to select it in projet editor but we could add it manually

To use a login form template, the first thing you'll need to do is create a YourDatabase.4dbase/Resources/Mobile/form/login folder.
Then drop the login form folder into it.
For this template, add "login":"/signinwithqrcode" in the file project.4dmobileapp

present a qr code and where

First on your website the user must be authenticated by any means.

Then if the user want to login on mobile app, you need to provide a QR code with login informations.

You could display it for instance in profile page of current user, with an action button. (never display it automacally for security reason)

A Javascript code could easily make an http request to get login information as string from 4d server and display the qr code in a popup.

generate the qr code data at server side with login informations

You need to encode in your QR code some data in JSON string format.

We need the current user email and some data, we could call it token.

To response to an HTTP request (4DAction?) you could send this information:

... // compute $token and get user email according to its session

$qrCodeData:=New object("email"; $currentUserEmail; "token"; $token)
WEB SEND TEXT(JSON Stringify($qrCodeData))

This token could contains an expiration date, uuid, random data, some user data, etc... and be preferably encrypted (using ENCRYPT BLOB or Crypto class)

You could store it in memory (Storage?) or database to be able to check it in next step, or let your cryptography code do the check

manage authentication at 4d server side

The user will scan the QR code from mobile app and the login process begin at server side in On Mobile App Authentication.

In this database method you need to check the data received.

$email:=$1.email
$token:=$1.userInfo.token // all json informations except email will be in userInfo

First we could check if the email is correct (but not mandatory is token is sufficient), maybe get expected token for this user.

Then if the passed data, for instance the token, are valid:

check if in memory or database
maybe decrypt it
check expiration date

And according to that valid or not the mobile user authentication by returning True or False

mesopelagique / form-login-SignInWithQRCode