Apprenez comment ajouter l'authentification nfinic sur votre site web ayant un client JavaScript.

Introduction

nfinic est un système permettant d'authentifier les utilisateurs. Elle utilise l'authentification basée sur OAuth 2.0 et se centre sur le numéro de téléphone. Nous sommes convaincu que la plupart d'utilisateurs ont un numéro de téléphone. Cette plateforme offre plusieurs avantages, notamment:

  • la securité de l'utilisateur
  • la securitée du site web
  • la rapidité lors de la création du compte
  • l'assurance en la véracité des utilisateurs

Checklist d'installation

L'installation de nfinic sur un client JavaScript est très simple mais aussi très securis&eactue;.
Pour vous faciliter son installation, nous vous proposons un petit checklist ou liste à coché suivant ces éléments à avoir sur sa page HTML d'authentification:

  • Ajouter son site sur https://dev.nf-nc.com
  • Inclure le fichier CSS de nfinic
  • Inclure le fichier JavaScript de nfinic
  • Ajouter le bouton nfinic sur votre site web
  • Initialiser l'authentification
  • Obtenir les données de l'utilisateur

Ajouter votre site

L'ajout d'un site web sur nfinic est un processus très facile comme la complétion de n'importe quel formulaire

  • Allez sur https://dev.nf-nc.com, oui, sur nf-nc.com qui est la plateforme d'authentification. Au préalable, il faut avoir un compte actif nfinic créé sur nf-nc.com, si vous ne l'avez pas, nous vous invitons déjà à le créer.
  • Une fois vous êtes connecté à votre dashboard(tableau de bord) pour développeur, cliquez sur "+ Enregistrer site"
  • Complétez alors l'identité de votre site web. Le nom du site web est par exemple "Google" tandisque le domaine est "https://google.com"
    Note:Il est ici important de noter que le domaine est une information très importante pour l'authentification. HTTP est différent de HTTPS donc si votre site est http://example.com, il ne faut pas compléter https://exemple ou bien example.com.
  • Chosissez le logo de votre site web: les formats recommandés sont JPEG(.jpg, .jpeg) ou PNG(.png)
  • Votre site web a besoin de certaines données sur le formulaire d'inscription. Choisissez les données dont vous avez besoin pour enregistrer les utilisateurs.
  • Après avoir accepté les conditions d'utilisations, vous pouvez générer l'ID(identifiant) de votre application
  • Cliquez sur "Fin pour finir ce processus"

Votre page de log in

Maintenant que notre site est bien enregistré, nous pouvons maintenant ajouter le bouton "Connexion avec nfinic" sur votre page web.

1. Le fichier CSS
Premièrement, veuillez ajouter le fichier CSS de nfinic qui est à cette URL  https://cdn.jsdelivr.net/gh/nfinic/nfinic-js/nfinic.1.0.0.css ou bien le fichier compressé qui est à cette adresse  https://cdn.jsdelivr.net/gh/nfinic/nfinic-js/nfinic.1.0.0.min.css.

Note: Les versions des fichiers d'inclusion peuvent changer, vous pouvez chaque fois accéder au repository Github pour voir la dernière version dans la branche master. Pous pouvez aussi ajouter des "issues", des "corrections" et des "pull-requests", merci d'avance.

2. Le fichier JS
Après que le fichier CSS soit ajouté, nous pouvons maintenant ajouter le fichier JavaScript. Il est sur le lien suivant https://cdn.jsdelivr.net/gh/nfinic/nfinic-js/nfinic.1.0.0.js et sa version compressée est sur l'URL https://cdn.jsdelivr.net/gh/nfinic/nfinic-js/nfinic.1.0.0.min.js. Nous preconisons que ce fichier soit ajouté avant le balise de fermeture </body> mais biensur avant les fichiers Javascript qui l'appellent.

Note: Les versions des fichiers d'inclusion peuvent changer, vous pouvez chaque fois accéder au repository Github pour voir la dernière version dans la branche master. Pous pouvez aussi ajouter des "issues", des "corrections" et des "pull-requests", merci d'avance.

3. Le bouton "Connexion avec nfinic"
Le bout "Connexion avec nfinic" facile à ajouter comme l'ajout de n'importe quelle balise HTML.
Pour l'ajouter, veuillez ajouter une balise "button" avec l'id "btn-connexion-nfinic". <button id="btn-connexion-nfinic">Connexion avec nfinic</button>

Note: Il faut vous rassurer que l'ID "btn-connexion-nfinic" est bien écrit pour ne pas avoir un problème à l'initialisation.

4. L'initialisation du log in
L'initialisation du log in est l'étape qui va permettre au bouton de réagir lorsque l'utilisateur clique. Donc, dans votre script JavaScript, veuillez appeller la fonction d'initialisation nfinic avec l'ID de votre application qui a été créé lors de l'enregistrement de votre site web sur nfinic. Pratiquement, vous pouvez le faire de cette façon:

initNfinicAuth("XXXXXXXXXXXXXXXXXXXXXXXXXXXX",parametres,callback);

Les paramètre à passer à l'initialisation sont un objet JSON contenant les éléments suivants:

ParamètreTypeValeur par défautRôle
fontbooleanfalseCharger le font de nfinic sur "Connexion avec nfinic"
iconbooleanfalsePlacer l'icône nfinic

"callback" est une fonction qui retourne un objet JSON ayant un "etat" qui est soit "1" soit "-2". Si le resultat est 1 alors la requêtte s'est bien passée et on peut lire "resultat". Dans le cas contraire, il faut plutôt lire "cause" pour savoir la raison de l'échec.

Voici un exemple de l'initialisation:

initNfinicAuth("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",{icon:true,font:true},function(d){
	if(d && d.etat){
		if(d.etat == 1){
			alert(JSON.stringify(d.resultat));
		}else{
			console.log("Echec de connexion, cause " + JSON.stringify(d.cause));
		}
	}
});

Note: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX est l'ID de votre site web sur dev.nf-nc.com

Exemple complet

Vous pouvez vous referer à cet exemple complet se trouvant sur notre Github, n'oubliez pas de nous donner une étoile ou de nous laisser des issues ou même de pull request si vous avez corrigé quelquechose.

Acceder à l'exemple ici

Securité plus

Javascript étant executé du côté client(dans le navigateur), il y a possibilité qu'un utilisateur change certaines données importantes dont votre système a besoin.

nfinic offre une possibilité d'échapper à ces genres des piêges. C'est pour cela que nous avons ajouté la signature. Les données provenant de nfinic possèdent une signature permettant de vous assurer que ces données sont authentiques. Gardez la clé de signature de façon secrète

Ajout la signature à son back-end grâce au MD5

Nous avons opté pour la fonction md5 car elle est implementée dans quasiment tous les langages de programmation modernes. Créez une variable dans laquelle vous concatenez la clé de signature, les différentes données que vous avez obtenues, la signature et le token d'accès.

Supposons que vous concantenez par le symbole "+", on aura donc:
signature = md5(cle_signature + nom_utilisateur + numero_de_telephone + ... + adresse_email + cle_signature + token_access)
Il suffit de vérifier que cette signature que vous générez est la mème que celle que vous avez récu dans l'object resultat.
Note: Cette vérification doit se passer dans le back-end et la clé de signature ne doit jamais être visible aux utilisateurs.

Ordre de la concanténation

Pour permettre de respecter l'ordre de différentes variables en créant la chaine qu'il faut entrer dans MD5, l'ordre se trouve dans l'object resultat.

Exemple d'un objet avec signature
{
	"etat": 1
	"resultat":{
		"etat": 1,
		"at": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyIwIjp7IiRvaWQiOiI1ZDgyOTU4MDhlNmU4Y2VlMGFiN2FjZDkifSwiMSI6eyIkb2lkIjoiNWU5MmY2ZGJhYjExYmFlY2FhM2IwZjgyIn0sIjIiOnsiJG9pZCI6IjVlOTJmYzM2YWIxMWJhZWNhMjQ1MzM0MyJ9LCIzIjpbIm5vbXMiLCJkYXRlZGVuYWlzc2FuY2UiLCJub3Rlc3VydXRpbGlzYXRldXIiLCJudW1lcm9kZXRlbGVwaG9uZSJdLCI0Ijp7Imh0dHBfaG9zdCI6ImxvY2FsaG9zdCIsImh0dHBfY29ubmVjdGlvbiI6ImtlZXAtYWxpdmUiLCJodHRwX29yaWdpbiI6Imh0dHA6Ly9sb2NhbGhvc3QiLCJodHRwX3VzZXJfYWdlbnQiOiJNb3ppbGxhLzUuMCAoTWFjaW50b3NoOyBJbnRlbCBNYWMgT1MgWCAxMF8xM182KSBBcHBsZVdlYktpdC81MzcuMzYgKEtIVE1MLCBsaWtlIEdlY2tvKSBDaHJvbWUvODAuMC4zOTQ3LjAgU2FmYXJpLzUzNy4zNiJ9LCJleHAiOjE1ODY2OTQ3Mjl9.-cYLZ7kFC8eeua1hNzG99wnfslNGUkhx8kg23GEyOks"
		"user": {
			"noms": "Edmundo Johnaa", 
			"notesurutilisateur": "J'aime bien m'amuser quand il le faut", 
			"numerodetelephone": "+2431978905322", 
			"datedenaissance": "06/04/2019"
		}
		"signature": "fe9b19a0eeb8542830ba8b0a7c24c813"
		"ordre": "noms, notesurutilisateur, numerodetelephone, datedenaissance, "
	}
}
Légende

  • etat : La connexion s'est bien passé
  • resultat : Resultat reç du serveur, objet
  • resultat.etat : L'utilisateur a été trouvé
  • resultat.at : Access token ou token d'acc&eagrave;s.
  • resultat.user : Objet représentant l'utilisateur
  • resultat.signature : La signature pour vous rassurer de l'authenticité des données reçues
  • resultat.ordre : Ordre dans lequel concatener les différentes valeurs.

Posez nous des questions sur Twitter @nfinic_