シェア:
){kind=small}
エリック・ジャンニーニはNexmoでiOS開発者のアドボケイトを務めていた。彼はObjective-CとSwiftの両方、特に後者に情熱を持っている。エリックは、iOSのあれこれ、アプリのハッキング、SDKの構築、あるいは迅速なプロトタイピングについてよくブログを書いている。彼はまた、カンファレンスやミートアップ、その他の様々なイベントで、iOSデベロッパーや他の強力なSwiftタイプと会っている。
SwiftとNexmoのVerify APIを使ってiOSアプリに2FAを追加する
所要時間：1 分
二要素認証(2FA)は、機密情報にアクセスするユーザーのセキュリティをさらに強化します。
知っているもの、いるもの、持っているもので認証する方法は複数ありますが、ここでは特に最後の方法に焦点を当てます。このチュートリアルでは、Nexmo の Verify API エンドポイントを使用して、ユーザーの電話番号に対して二要素認証を実装する方法を説明します。
についてのブログ記事を読んだ後 Nexmoベリファイを使うためにサーバーをセットアップする方法を使用するためにサーバーをセットアップする方法についてのブログ記事を読んだ後、サーバーとネットワークするためにiOSアプリをセットアップする準備ができました。
アプリはいくつかのことをする必要がある。を request_idを responseIdとして保存し、検証リクエストをキャンセルまたは完了できるようにする。また、3つのエンドポイントにネットワークコールを行う：
検証を開始する。
検証コードを確認する。
検証リクエストをキャンセルする。
についてのブログ記事を読んだ後 Nexmoベリファイを使うためにサーバーをセットアップする方法を使用するためにサーバーをセットアップする方法についてのブログ記事を読んだ後、サーバーとネットワークするためにiOSアプリをセットアップする準備ができました。
スターター・プロジェクトをダウンロードしてください：
git clone https://github.com/nexmo-community/verify-ios-demo/
そのルート・ディレクトリにCocoaPodsファイルを追加し、そのPodfileに以下を含めるように修正した後、Podをインストールする：
pod 'Alamofire'SIMカード付きのiPhoneを手元に用意しておくこと。
環境を正しく設定するためには、次のようにサーバーをシミュレートする必要がある。 グリッチ・サーバー・アプリのようにサーバーをシミュレートする必要があります。設定するには、.envファイルを開き、以下の値を設定します。
API_KEY&API_SECRET
セットアップが終わったところで、確認と確認のためにユーザー・インターフェースを見てみよう。
というCocoaTouchファイル。
VerificationViewControllerこのクラスは、UIViewControllerのサブクラスです。Main.storyboardこのクラスはVerificationViewControllerをカスタムクラスとするようにシーンに割り当てられます。の3つのTextFields。
VerificationViewControllerというアウトレットがある。inputEmailAddress,inputPassword,inputTelephoneNumberと呼ばれる。のボタン
VerificationViewControllerというloginBtn.のボタン
VerificationViewControllerと呼ばれるアクションcancelVerification.というセグエがある。
authenticateWith2FACodeセグエはVerificationViewControllerに接続するConfirmationViewController.というCocoaTouchファイル。
ConfirmationViewControllerUIViewControllerのサブクラスです。Main.storyboardのシーンに割り当てられている。ConfirmationViewControllerをカスタムクラスとしてシーンに割り当てます。テキストフィールド、
ConfirmationViewController,inputEmailAddress.のボタン
VerificationViewControllerと呼ばれるアクションcancelVerification.
注意してください：TextFields、Buttons、Labelsの制約を自由に設定できます！
この先にあるものを分解してみよう。Nexmoの検証用APIは基本的に2つのリンクで構成されている。最初のリンクは https://api.nexmo.com/verify/json.このリンクはユーザーの電話番号を検証する。二つ目のリンクは https://api.nexmo.com/verify/check/json.このリンクでは、PIN付きのSMSを送信することで、ユーザーがデバイスを所有していることを確認します。
しかしこのチュートリアルでは、これらのAPIエンドポイントを直接叩くことはしない。というSDKを使います。 Alamofireと呼ばれるSDKを使用し、仲介のGlitchサーバーを介して通信を行います。
Glitchサーバーをセットアップする最初のステップは Glitchサーバーをリミックスすることだ。サイトにはリミックスボタンがあります。
Glitchサーバーのセットアップが完了したら、次のステップは、アプリのUIをサーバーにリクエストしたり、リクエストに応答したりするようにプログラムすることです。
の先頭に
VerificationViewControllerの先頭にimport Alamofire.のスコープ内に
VerificationViewControllerクラス宣言の範囲内にvar responseId = String().空の文字列を初期化している。responseId.
注意：NSUserDefaults または多くの異なるクラスのいずれかをローカルストレージに使用したいかもしれません。をどのように保存するかは開発者の好みに任せることにします。 responseId.
での
@IBActionにverifyTelephoneNumberに次の行を加える：self.verifyViaAPI()これは、最初のリンクをヒットするようにプログラムする関数である。以下のコードで
verifyViaAPI()という関数を作成する：
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)
}
}
}検証リクエストが送信されたら、次のステップとして、ビューコントローラーから次のビューコントローラーに移行します。移行中に responseIdを渡すことで、Glitchサーバーがどのアプリを扱っているのかを知ることができます。以下はプログラム方法です。 prepare(for:sender:):
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
let confirmationVC = segue.destination as! ConfirmationViewController
confirmationVC.responseId = responseId
}ビューコントローラから次のビューコントローラへ responseIdにたどり着きます。 ConfirmationViewControllerここで、認証を要求しているユーザーが、自分の番号に関連付けられたデバイスを持っているかどうかを確認します。
での
@IBActionにverifyPin行を追加する。self.verifyPinViaAPI()これは、2番目のリンクを打つようにプログラムする関数である。以下のコードで
verifyPinViaAPI()という関数を作成する：
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)
}
}
}
}
}コードは最初のリクエストと似ている。このコード・スニペットでは、認証に成功したレスポンスを解析します。レスポンスで返されたステータスがゼロであれば、ユーザーは認証されたことになる。そうでない場合、ユーザーは最初からやり直さなければならない。
最後はキャンセルだ。キャンセルも同様にプログラムされている：
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")
}
}
}
}
NexmoのAPIを使用することで、あなたは番号を確認し、ユーザーがデバイスの番号を所有していることをダブルチェックすることができます！
この実装では、クライアント側からは、番号が検証済みであることしかわからない。実際のアプリでは、バックエンドに番号が確認されたことを伝える必要がある。成功フローの更新をクライアントから呼び出すか、独自のコールバックから呼び出すか、2つの方法があります。
完成品をご覧になりたい方は、こちらからダウンロードできます。 こちらから.
必要であれば、Verify APIに残りのエンドポイントを実装することもできる。この場合、APIプロキシサーバーにさらにエンドポイントを追加する必要があることに注意。
エンドポイントを追加して、Number Insights API をカバーすることもできます。この場合も、API プロキシサーバーにエンドポイントを追加する必要があります。
この記事にはAndroid版もあります。 デベロッパー・アドボケイトのChris Guzmanからもっと読む。