Autenticação de dois fatores (2FA) oferece uma camada adicional de segurança para usuários que acessam informações confidenciais.

Embora existam vários modos de autenticação com algo que você sabe, é ou possui, vamos nos concentrar exclusivamente no último. Neste tutorial, abordaremos como implementar a autenticação de dois fatores para o número de telefone de um usuário usando os endpoints da Verify API da Nexmo.

Depois de ler a postagem do blog sobre como configurar um servidor para usar o Nexmo Verify , você já está pronto para configurar um aplicativo iOS para se comunicar com o servidor.

O aplicativo precisará realizar algumas tarefas. Armazenar um request_id como um responseId para que uma solicitação de verificação possa ser cancelada ou concluída. Além disso, fazer uma chamada de rede para três endpoints:

• Inicie uma verificação.

• Verifique o código de verificação.

• Cancelar uma solicitação de verificação.

Configuração do Nexmo

Depois de ler a postagem do blog sobre como configurar um servidor para usar o Nexmo Verify , você já está pronto para configurar um aplicativo iOS para se comunicar com o servidor.

Configuração do ambiente

1. Baixe o projeto inicial, um aplicativo com uma única visualização:

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

2. Adicione um arquivo CocoaPods ao diretório raiz e instale o pod após modificar o arquivo podfile para incluir o seguinte:

pod 'Alamofire'

1. Certifique-se de ter um iPhone com um cartão SIM à mão.

2. Para configurar corretamente o ambiente, precisamos simular um servidor como no aplicativo de servidor Glitch. Para configurar, acesse o arquivo .env e defina os valores conforme necessário para API_KEY & API_SECRET

Analise a interface do usuário

Agora que a configuração já está pronta, vamos revisar a interface do usuário para verificação e confirmação.

1. Um arquivo do CocoaTouch chamado VerificationViewController que é uma subclasse de UIViewController; essa classe é atribuída a uma cena no Main.storyboard de modo que ela adote VerificationViewController como sua classe personalizada.

2. Três campos de texto em VerificationViewController, saídas chamadas inputEmailAddress, inputPassword, inputTelephoneNumber respectivamente.

3. Um botão em VerificationViewController chamado loginBtn.

4. Um botão em VerificationViewController, uma ação chamada cancelVerification.

5. Uma transição chamada authenticateWith2FACode, conectando VerificationViewController a ConfirmationViewController.

6. Um arquivo do CocoaTouch chamado ConfirmationViewController que é uma subclasse de UIViewController; atribuído a uma cena no Main.storyboard de modo que ele adote ConfirmationViewController como sua classe personalizada.

7. Um TextField, ConfirmationViewController, inputEmailAddress.

8. Um botão em VerificationViewController, uma ação chamada cancelVerification.

Observação: Você tem total liberdade para definir as restrições para os campos de texto, botões ou rótulos da maneira que quiser!

Configurando o servidor Glitch

Vamos analisar o que temos pela frente. A API de verificação da Nexmo consiste basicamente em dois links. O primeiro é https://api.nexmo.com/verify/json. Esse link Verify o número de telefone do usuário. O segundo link é https://api.nexmo.com/verify/check/json. Esse link verifica se o usuário está de fato com o aparelho, enviando um SMS com um PIN.

Neste tutorial, no entanto, não acessamos diretamente nenhum desses pontos de extremidade da API. Utilizamos um SDK chamado Alamofire para nos comunicarmos por meio de um servidor intermediário do Glitch.

Etapas para configurar o servidor

O primeiro passo para configurar o servidor do Glitch é remixar o servidor Glitch para sua própria implantação. No site, há um botão “remixar”.

Programação da interface do usuário

Com o servidor Glitch configurado, o próximo passo é programar a interface do usuário do aplicativo para enviar ou responder a solicitações do servidor.

1. No início de VerificationViewController inclua a linha import Alamofire.

2. No âmbito da VerificationViewControllerdeclaração da classe, adicione a linha var responseId = String(). Estamos inicializando uma string vazia onde manteremos uma referência à nossa responseId.

Observação: talvez você queira usar o NSUserDefaults ou uma das diversas classes disponíveis para armazenamento local. Como se trata de uma questão de preferência, deixamos a seu critério, como desenvolvedor, decidir como armazenar o responseId.

1. No @IBAction no arquivo verifyTelephoneNumber , adicione a seguinte linha: self.verifyViaAPI(), que é uma função que vamos programar para acessar o primeiro link.

2. Crie uma função chamada verifyViaAPI() com o seguinte código:

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

Quando a solicitação de verificação for enviada, nosso próximo passo será fazer a transição de um controlador de visualização para o próximo. Durante a transição, passaremos nosso responseId para que nosso servidor Glitch saiba com qual aplicativo está lidando. Veja a seguir como programar prepare(for:sender:):

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

À medida que passamos do responseId de um controlador de visualização para o próximo, chegamos ao ConfirmationViewController onde confirmamos se o usuário que está solicitando a autenticação possui o aparelho associado ao seu número.

Segundo link: SMS

1. No @IBAction para verifyPin , adicione a linha self.verifyPinViaAPI(), que é uma função que vamos programar para clicar no segundo link.

2. Crie uma função chamada verifyPinViaAPI() com o seguinte código:

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)

                    }
                }
            }
        }
    }

O código é semelhante ao da primeira solicitação. Neste trecho de código, analisamos a resposta para verificar se a verificação foi bem-sucedida. Se o status retornado na resposta for zero, o usuário está autenticado. Caso contrário, o usuário deverá recomeçar do início.

Cancelamento

Por último, mas não menos importante, temos o cancelamento. O cancelamento é programado de maneira semelhante:

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

O que foi alcançado e aprendido?

Agora você tem um número verificado e confirmou que o usuário é o titular do número do aparelho — e fez tudo isso com a API da Nexmo!

Com essa implementação, você só sabe, do lado do cliente, que o número foi verificado. Em um aplicativo real, você precisaria informar ao seu backend que o número foi verificado. Você poderia fazer isso de duas maneiras: chamando essa atualização no fluxo de sucesso, seja a partir do cliente, seja por meio de seus próprios callbacks.

Se você quiser ver o resultado final, pode baixar o projeto concluído aqui.

E agora?

Se desejar, você pode implementar os demais endpoints da Verify API. Observe que isso exigirá que você adicione mais endpoints no servidor proxy da API.

Você também pode adicionar pontos de extremidade adicionais para abranger a Number Insight API. Isso também exigirá que você adicione mais pontos de extremidade no servidor proxy da API.

Também há uma versão para Android desta publicação. Leia mais com nosso especialista em desenvolvimento, Chris Guzman.