Zwei-Faktor-Authentifizierung (2FA) bietet eine zusätzliche Sicherheitsebene für Benutzer, die auf sensible Informationen zugreifen.

Es gibt zwar mehrere Arten der Authentifizierung mit etwas, das Sie kennen, sind oder haben, aber wir konzentrieren uns ausschließlich auf die letzte Möglichkeit. In diesem Tutorial wird beschrieben, wie die Zwei-Faktor-Authentifizierung für die Telefonnummer eines Benutzers mit den Verify-API-Endpunkten von Nexmo implementiert wird.

Nach dem Lesen des Blogbeitrags über wie man einen Server für die Verwendung von Nexmo Verify einrichtet gelesen haben, sind Sie nun bereit, eine iOS-App für die Vernetzung mit dem Server einzurichten.

Die App muss ein paar Dinge tun. Speichern einer request_id als eine responseId speichern, damit eine Überprüfungsanfrage abgebrochen oder abgeschlossen werden kann. Außerdem muss sie einen Netzanruf an drei Endpunkte tätigen:

• Starten Sie eine Überprüfung.

• Überprüfen Sie einen Verifizierungscode.

• Stornieren Sie eine Überprüfungsanfrage.

Nexmo-Einrichtung

Nach dem Lesen des Blogbeitrags über wie man einen Server für die Verwendung von Nexmo Verify einrichtet gelesen haben, sind Sie nun bereit, eine iOS-App für die Vernetzung mit dem Server einzurichten.

Umgebung einrichten

1. Laden Sie das Starterprojekt herunter, eine Anwendung mit einer einzigen Ansicht:

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

2. Fügen Sie eine CocoaPods-Datei in ihr Stammverzeichnis ein und installieren Sie den Pod, nachdem Sie seine Poddatei so geändert haben, dass sie Folgendes enthält:

pod 'Alamofire'

1. Stellen Sie sicher, dass Sie ein iPhone mit einer SIM-Karte zur Hand haben.

2. Um die Umgebung richtig zu konfigurieren, müssen wir einen Server simulieren, wie in der Glitch-Server-Anwendung. Zur Konfiguration gehen Sie in die .env-Datei und setzen die Werte wie erforderlich für API_KEY & API_SECRET

Überprüfen Sie die UI

Nachdem wir die Einrichtung hinter uns gebracht haben, wollen wir uns die Benutzeroberfläche zur Überprüfung und Bestätigung ansehen.

1. Eine CocoaTouch-Datei namens VerificationViewController die eine Unterklasse von UIViewController ist; diese Klasse wird einer Szene in Main.storyboard zugewiesen, so dass sie VerificationViewController als seine benutzerdefinierte Klasse.

2. Drei TextFields in VerificationViewController, Ausgänge namens inputEmailAddress, inputPassword, inputTelephoneNumber jeweils.

3. Eine Schaltfläche in VerificationViewController namens loginBtn.

4. Eine Schaltfläche in VerificationViewController, eine Aktion namens cancelVerification.

5. Eine Überleitung namens authenticateWith2FACode, die VerificationViewController zu ConfirmationViewController.

6. Eine CocoaTouch-Datei namens ConfirmationViewController die eine Unterklasse von UIViewController ist; zugewiesen einer Szene in Main.storyboard zugewiesen, so dass sie ConfirmationViewController als seine benutzerdefinierte Klasse.

7. A TextFeld, ConfirmationViewController, inputEmailAddress.

8. Eine Schaltfläche in VerificationViewController, eine Aktion namens cancelVerification.

Anmerkung: Sie können die Einschränkungen für die TextFields, Buttons oder Labels nach Belieben festlegen!

Einrichten des Glitch-Servers

Lassen Sie uns aufschlüsseln, was vor uns liegt. Die Nexmo-API für die Verifizierung besteht im Wesentlichen aus zwei Links. Der erste ist https://api.nexmo.com/verify/json. Dieser Link verifiziert die Telefonnummer des Nutzers. Der zweite Link ist https://api.nexmo.com/verify/check/json. Über diesen Link wird überprüft, ob der Nutzer im Besitz des Geräts ist, indem eine SMS mit einer PIN gesendet wird.

In diesem Lernprogramm greifen wir jedoch nicht direkt auf einen dieser API-Endpunkte zu. Wir verwenden ein SDK namens Alamofire um über einen zwischengeschalteten Glitch-Server zu kommunizieren.

Schritte zur Einrichtung des Servers

Der erste Schritt zum Einrichten des Glitch-Servers besteht darin, den Glitch-Server für Ihren eigenen Einsatz zu remixen. Auf der Website gibt es eine Remix-Schaltfläche.

Programmierung der Benutzeroberfläche

Nach der Einrichtung des Glitch-Servers besteht der nächste Schritt darin, die Benutzeroberfläche der App so zu programmieren, dass sie Anfragen an den Server stellt oder darauf antwortet.

1. Am Anfang von VerificationViewController steht die Zeile import Alamofire.

2. Innerhalb des Geltungsbereichs von VerificationViewControllerder Klassendeklaration die Zeile var responseId = String(). Wir initialisieren einen leeren String, in dem wir eine Referenz auf unsere responseId.

Hinweis: Möglicherweise möchten Sie NSUserDefaults oder eine der vielen anderen Klassen für die lokale Speicherung verwenden. Da dies eine Frage der Präferenz ist, überlassen wir es Ihnen als Entwickler, wie Sie die responseId.

1. In der @IBAction für verifyTelephoneNumber die folgende Zeile ein: self.verifyViaAPI()Dies ist eine Funktion, die wir programmieren werden, um den ersten Link zu treffen.

2. Erstellen Sie eine Funktion namens verifyViaAPI() mit dem folgenden Code:

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)
            }
        }
    }

Wenn die Überprüfungsanforderung gesendet wurde, besteht unser nächster Schritt darin, von einem View-Controller zum nächsten überzugehen. Während des Übergangs übergeben wir unsere responseId übergeben, damit unser Glitch-Server weiß, mit welcher App er es zu tun hat. So wird programmiert prepare(for:sender:):

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

Wenn wir die responseId von einem View-Controller zum nächsten weitergeben, landen wir bei der ConfirmationViewController wo wir bestätigen, ob der Benutzer, der die Authentifizierung anfordert, das mit seiner Nummer verbundene Gerät besitzt.

Zweiter Link : SMS

1. In der @IBAction für verifyPin fügen Sie die Zeile self.verifyPinViaAPI()ein, die eine Funktion ist, die wir programmieren werden, um den zweiten Link zu treffen.

2. Erstellen Sie eine Funktion namens verifyPinViaAPI() mit dem folgenden Code:

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)

                    }
                }
            }
        }
    }

Der Code ist ähnlich wie bei der ersten Anfrage. In diesem Codeschnipsel wird die Antwort auf eine erfolgreiche Überprüfung analysiert. Wenn der in der Antwort zurückgegebene Status Null ist, ist der Benutzer authentifiziert. Wenn nicht, muss der Benutzer wieder von vorne anfangen.

Stornierung

Zu guter Letzt die Annullierung. Die Stornierung wird auf ähnliche Weise programmiert:

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")
                }
            }
        }
    }

Was wurde erreicht und was wurde gelernt?

Sie haben nun eine verifizierte Nummer und doppelt überprüft, dass Ihr Benutzer im Besitz der Gerätenummer ist - und das alles mit Nexmos API!

Bei dieser Implementierung wissen Sie nur auf der Client-Seite, dass die Zahl verifiziert ist. In einer realen Anwendung müssten Sie Ihrem Backend mitteilen, dass die Zahl verifiziert ist. Das können Sie auf zwei Arten erreichen, indem Sie die Aktualisierung des Erfolgsflusses entweder vom Client oder von Ihren eigenen Callbacks aus aufrufen.

Wenn Sie das Endprodukt sehen möchten, können Sie das fertige Projekt hier herunterladen hier.

Was kommt als Nächstes?

Wenn Sie möchten, können Sie den Rest der Endpunkte in der Verify-API implementieren. Beachten Sie, dass Sie dazu weitere Endpunkte im API-Proxy-Server hinzufügen müssen.

Sie können auch zusätzliche Endpunkte hinzufügen, um die Number Insights API abzudecken. Dazu müssen Sie auch weitere Endpunkte im API-Proxy-Server hinzufügen.

Es gibt auch eine Android-Version dieses Beitrags. Lesen Sie mehr von unserem Entwickler-Befürworter Chris Guzman.