enfr

 Get started with RemAuth

demos and related tutorials

Through a few use cases, this topic introduces RemAuth authentication demos and explains how to implement them simply with any service.

All the use cases proposed in this section are without password and are compliant with DSP2 strong authentication, either natively or thanks to the proposed options.

  • Use case   Shop : Multi-factor authentication with optional biometrics.
  • Use case   HiSec : Authentication with mandatory biometrics and physical factors.
  • Use case   Kiosk : Dynamic QR-code based authentication.

Use case  Shop

Scenario

Login to an e-commerce-like site using a form which only requires a valid email address.

At the first connection from an unknown email address, a message with a confirmation link is sent. If the link is clicked, the demo is automatically refreshed with personalized content.

Then, for the following connections, the authentication can also be done using the RemAuth Control application, setup with the appropriate email address. If the RemAuth Control is installed on an iPhone  or an Android  smartphone equipped with a biometric sensor (either fingerprint or face recognition), then it will be used to verify the user identity.

In addition, if the user account on RemAuth Control is defined with a mobile phone number, it will receive an authentication SMS each time the user will try to connect to the service.

Demo

Requirements:

  • Mandatory: A valid email address.
  • Optional: The RemAuth Control app installed on a computer (MS Windows or macOS) or a smartphone (Android or iPhone) with or without a mobile phone number attached to the account.

URL : https://remauth.com/demo/shop/en/

Tutorial

Principle

From a logical point of view, the Shop demo follows the same sequence as detailed in the documentation and that can be summarized as follows:

  1. Definition of a security token
  2. Call of the /authenticate API endpoint with the invite optional parameter which can have the "en" or "fr" value in order to send a confirmation email in the required language on subscription.
  3. Display a popup about ongoing authentication.
  4. Reception of a websocket notification on authentication status change.
  5. Call of the /authenticated API endpoint to get the details of the authentication status.
  6. User interface update according to status

In the case of this demo, these steps are chained automatically thanks to the RemAuth client libraries which allow to carry out these operations in a few lines of code.

Implementation

The following process makes an identical demo (except for the user interface) from scratch.

1. Create a free RemAuth account and set up an authentication service

Just go to the Customer Center and sign up for a free account with a valid email address or connect to an existing account. Then go to the services section to create your first authentication service.

This gives you a key and a service code, as in the example below. You can also configure a service name and set a picture URL to use as a logo in the user interfaces of authentication (e.g. popup, email, sms, app).

Example of service property
 Exemple de propriétés de services

Please note that the default authentication methods correspond exactly to the use case of our example, namely:

  • Authentication requests are sent simultaneously to email address, installed RemAuth Control applications and mobile phone (SMS is only used with paying membership and duly credited SMS wallet).
  • For the RemAuth Control app, biometric checking is optional and certification is disabled.
Défault authentication methods
 Méthodes d'authentification par défaut d'un service
2. Copy the demo template

The demo template is composed of two PHP files to copy in your own server environment:

  • The authent-basic.php file contains the elements of the simplified demo:
    • Load of the RemAuth PHP library in order to create a server-side security token.
    • Creation of a PHP RemAuth class instance using a key and a secret service code such as those defined in the previous step.
    • Creation of a 10mn lifetime security token that appears as a META field in the HTML page.
    • Load of the RemAuth JavaScript library that supports the web authentication user interface and Ajax exchanges. This library takes care of its dependencies (CSS, jQuery, Socket.io).
  • The remauth.php library that allows you to make POST requests in PHP, especially to generate security tokens and insert them in HTML page from server side.

PLEASE NOTE: If your server environment is not PHP (e.g. Java, Python, Node ...), you only need to modify the previous example to make POST requests from your server and to include the security token in your web page using the /access API endpoint.

3. Replace the key and the code with your own data

Congratulations! Once this step is completed, your demo is operational.

Depending on your expectations, you can then extend the demonstrator by integrating it with an existing service or using it to manage your sessions. For further details, please see the services section of your Customer Center and the documentation.

Use case  HiSec

Scenario

Login to very secure site using a form which only requires a valid email address.

At the first connection from an unknown email address, a message with a confirmation link is sent. If the link is clicked, the demo is automatically refreshed with personalized content.

For the following connections, the RemAuth Control app is required and must be installed on a smartphone equipped with a biometric sensor. The user also needs a RemAuth Card which we can send to you for free.

When received, a RemAuth Card is anonymous. It is during its first use that it will be permanently coupled with a given email address and service.

Demo

Requirements:

URL: https://remauth.com/demo/hisec/en/

Tutorial

The only difference with the previous case is the service configuration in the Customer Center where authentication methods change a little bit:

  • The only enabled method is RemAuth Control.
  • Biometric checking is mandatory
  • Remauth Card certification is mandatory.
Configuration de l'authentification pour la démo HiSec
 Configuration d'authentification pour la démo HiSec

Use case  Kiosk

Scenario

Subscription or login to a service just by scanning a dynamic QR-code.

Demo

Requirements:

URL: https://remauth.com/demo/kiosk/en/

Tutorial

Principle

  1. Definition of a security token.
  2. Call of the /qr API endpoint with the autosub option set in order to enable on-the-fly subscription to service.
  3. Display of the QR-code resulting from the previous query with information on the expire time..
  4. Loop between steps 2 and 3 or websocket notification on authentication status change .
  5. Call of the /authenticated API endpoint to get the details of the authentication status.
  6. User interface update according to status

Implementation

As in the previous examples, the implementation is greatly facilitated by the use of the RemAuth libraries which takes care of the authentication user interface.

1. Create a free RemAuth account and set up an authentication service

If still necessary at this stage.

2. Copy the demo template

The demo template is composed of two PHP files to copy in your own server environment:

  • The authent-qr1.php file contains the elements of the simplified demo:
    • Load of the RemAuth PHP library in order to create a server-side security token.
    • Creation of a PHP RemAuth class instance using a key and a secret service code such as those defined in the previous step.
    • Creation of a 10mn lifetime security token that appears as a META field in the HTML page.
    • Load of the RemAuth JavaScript library that supports the web authentication user interface and Ajax exchanges. This library takes care of its dependencies (CSS, jQuery, Socket.io).
  • The remauth.php library that allows you to make POST requests in PHP, especially to generate security tokens and insert them in HTML page from server side.
3. Replace the key and the code with your own data

Congratulations! Once this step is completed, your demo is operational.