L'authentification à deux facteurs L'authentification à deux facteurs (2FA) ajoute une couche supplémentaire de sécurité pour les utilisateurs qui accèdent à des informations sensibles.

Bien qu'il existe plusieurs modes d'authentification avec quelque chose que vous connaissez, que vous êtes ou que vous avez, nous nous concentrerons exclusivement sur le dernier. Dans ce tutoriel, nous verrons comment mettre en œuvre l'authentification à deux facteurs pour le numéro de téléphone d'un utilisateur avec les points d'extrémité de l'API Verify de Nexmo.

Après avoir lu l'article de blog sur comment configurer un serveur pour utiliser Nexmo Verify vous êtes maintenant prêt à configurer une application iOS pour travailler en réseau avec le serveur.

L'application devra faire plusieurs choses. Stocker un request_id en tant que responseId afin qu'une demande de vérification puisse être annulée ou complétée. Elle doit également effectuer un appel réseau vers trois points d'extrémité :

• Commencer une vérification.

• Vérifier un code de vérification.

• Annuler une demande de vérification.

Mise en place de Nexmo

Après avoir lu l'article de blog sur comment configurer un serveur pour utiliser Nexmo Verify vous êtes maintenant prêt à configurer une application iOS pour travailler en réseau avec le serveur.

Configuration de l'environnement

1. Téléchargez le projet de démarrage, une application à vue unique :

   git clone https://github.com/nexmo-community/verify-ios-demo/

2. Ajoutez un fichier CocoaPods à son répertoire racine, et installez le pod après avoir modifié son fichier podfile pour inclure ce qui suit :

pod 'Alamofire'

1. Assurez-vous d'avoir un iPhone avec une carte SIM à portée de main.

2. Pour configurer correctement l'environnement, nous devons simuler un serveur comme dans l'application Glitch server app. Pour configurer, allez dans le fichier .env et définissez les valeurs requises pour API_KEY & API_SECRET

Revoir l'interface utilisateur

Une fois l'installation terminée, examinons l'interface utilisateur à des fins de vérification et de confirmation.

1. Un fichier CocoaTouch appelé VerificationViewController qui est une sous-classe de UIViewController ; cette classe est assignée à une scène dans Main.storyboard de manière à ce qu'elle prenne VerificationViewController comme classe personnalisée.

2. Trois champs TextFields dans VerificationViewController, points de vente appelés inputEmailAddress, inputPassword, inputTelephoneNumber respectivement.

3. Un bouton dans VerificationViewController appelé loginBtn.

4. Un bouton dans VerificationViewController, une action appelée cancelVerification.

5. Une transition appelée authenticateWith2FACodequi relie VerificationViewController à ConfirmationViewController.

6. Un fichier CocoaTouch appelé ConfirmationViewController qui est une sous-classe de UIViewController ; assigné à une scène dans Main.storyboard afin qu'il prenne ConfirmationViewController comme classe personnalisée.

7. Un champ de texte, ConfirmationViewController, inputEmailAddress.

8. Un bouton dans VerificationViewController, une action appelée cancelVerification.

Remarque : Vous êtes libre de définir les contraintes pour les champs de texte, les boutons ou les étiquettes comme vous le souhaitez !

Mise en place du serveur Glitch

Voyons ce qui nous attend. L'API de Nexmo pour la vérification se compose essentiellement de deux liens. Le premier est https://api.nexmo.com/verify/json. Ce lien vérifie le numéro de téléphone de l'utilisateur. Le second lien est https://api.nexmo.com/verify/check/json. Ce lien permet de vérifier que l'utilisateur est en possession de l'appareil en envoyant un SMS avec un code PIN.

Dans ce tutoriel, cependant, nous n'utilisons pas directement l'un ou l'autre de ces points d'accès à l'API. Nous utilisons un SDK appelé Alamofire pour communiquer par l'intermédiaire d'un serveur Glitch.

Étapes de la mise en place du serveur

La première étape de la mise en place du serveur Glitch consiste à remixer le fichier serveur Glitch pour votre propre déploiement. Sur le site, il y a un bouton de remixage.

Programmation de l'interface utilisateur

Une fois le serveur Glitch mis en place, l'étape suivante consiste à programmer l'interface utilisateur de l'application pour qu'elle demande ou réponde à des requêtes avec le serveur.

1. Au début de VerificationViewController inclure la ligne import Alamofire.

2. Dans la portée de la déclaration de classe de VerificationViewControllerajouter la ligne var responseId = String(). Nous initialisons une chaîne vide qui contiendra une référence à notre fichier responseId.

Note : Vous pouvez utiliser NSUserDefaults ou l'une des nombreuses classes différentes pour le stockage local. Comme il s'agit d'une question de préférence, nous vous laissons le soin, en tant que développeur, de décider comment stocker le fichier responseId.

1. Dans la @IBAction pour verifyTelephoneNumber ajoutez la ligne suivante : self.verifyViaAPI()qui est une fonction que nous programmerons pour frapper le premier lien.

2. Créez une fonction appelée verifyViaAPI() avec le code suivant :

func requestVerificationWithAPI() {
        //Sending SMS
        let param = ["telephoneNumber": telephoneTextField.text]

        Alamofire.request("https://nexmo-verify.glitch.me/request", parameters: param as Any).responseJSON { response in

            print("--- Sent SMS API ----")
            print("Response: \(response)")

            if let json = response.result.value as? [String:AnyObject] {

                self.responseId = json["request_id"] as! String
                self.performSegue(withIdentifier: "authenticateWith2FA", sender: self)
            }
        }
    }

Lorsque la demande de vérification est envoyée, la prochaine étape consiste à passer d'un contrôleur de vue à l'autre. Pendant la transition, nous passerons notre responseId afin que notre serveur Glitch sache à quelle application il a affaire. Voici comment programmer prepare(for:sender:):

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
  let confirmationVC = segue.destination as! ConfirmationViewController
  confirmationVC.responseId = responseId
}

Lorsque nous passons le responseId d'un contrôleur de vue à l'autre, nous arrivons à la section ConfirmationViewController où nous confirmons que l'utilisateur qui demande l'authentification possède bien l'appareil associé à son numéro.

Deuxième lien : SMS

1. Dans la @IBAction pour verifyPin ajoutez la ligne self.verifyPinViaAPI()qui est une fonction que nous programmerons pour atteindre le deuxième lien.

2. Créez une fonction appelée verifyPinViaAPI() avec le code suivant :

func verifyPinViaAPI() {

        guard let requestId = requestId,
                let code = codeTextField.text else { return }

        let url = "https://nexmo-verify.glitch.me/check"
        let parameters = ["request_id": requestId,
                          "code": code]

        guard let request = URLRequestManager.getRequest(url, parameters: parameters) else { return }

        Alamofire.request(request).responseJSON { [weak self] response in

            print("--- Verify SMS API ----")
            print("Response: \(response)")

            if let json = response.result.value as? [String:AnyObject],
                let status = json["status"] as? String {

                // if status is zero, then success; if not something
                // went wrong
                if Int(status) == 0 {
                    DispatchQueue.main.async {
                        self?.dismiss(animated: true)

                    }
                }
            }
        }
    }

Le code est similaire à celui de la première demande. Dans cet extrait de code, nous analysons la réponse pour vérifier si la vérification a réussi. Si le statut renvoyé dans la réponse est zéro, l'utilisateur est authentifié. Dans le cas contraire, l'utilisateur doit tout recommencer.

Annulation

La dernière étape, et non des moindres, est l'annulation. L'annulation est programmée de la même manière :

func cancelRequest() {

        guard let requestId = requestId else { return }

        let parameters = ["request_id": requestId]
        let url = "https://nexmo-verify.glitch.me/cancel"

        guard let request = URLRequestManager.getRequest(url, parameters: parameters) else { return }

        Alamofire.request(request).responseJSON { response in

            print("--- Cancel Request API ----")
            print("Response: \(response)")

            if let json = response.result.value as? [String:AnyObject],
                let status = json["status"] as? String {

                if Int(status) == 0 {
                    print("Request Cancelled Successfully")
                }
            }
        }
    }

Quels sont les résultats obtenus et les enseignements tirés ?

Vous disposez désormais d'un numéro vérifié et vous avez doublement vérifié que votre utilisateur est en possession du numéro de l'appareil - et vous avez fait tout cela avec l'API de Nexmo !

Avec cette implémentation, vous savez seulement du côté client que le nombre est vérifié. Dans une application réelle, vous auriez besoin de dire à votre backend que le nombre est vérifié. Vous pouvez le faire de deux façons, en appelant cette mise à jour sur le flux de succès à partir du client ou de vos propres callbacks.

Si vous souhaitez voir le produit final, vous pouvez télécharger le projet achevé ici.

Quelle est la prochaine étape ?

Si vous le souhaitez, vous pouvez mettre en œuvre le reste des points de terminaison dans l'API Verify. Notez que cela vous obligera à ajouter d'autres points de terminaison dans le serveur proxy de l'API.

Vous pouvez également ajouter des points de terminaison supplémentaires pour couvrir l'API Number Insight. Pour ce faire, vous devrez également ajouter d'autres points d'extrémité dans le serveur proxy de l'API.

Il existe également une version Android de cet article. Pour en savoir plus, lisez les commentaires de notre défenseur des développeurs, Chris Guzman.