iOSで生体認証ロックを作ろう

iOS における生体認証

iOS では FaceID と TouchID の二つの生体認証がパスコード認証とは別に利用できる。

今回はその生体認証をアプリに組み込む方法について学ぶ。まず前提として、パスコードを含めた認証システムを使うにはimport LocalAuthenticationを読み込む必要がある。

認証のプロセス

生体認証が可能かどうかチェックする
- ここでパスコード認証を許可するかどうかを設定できる
可能であれば生体認証を行なう
- または生体認証をキャンセルしてパスコード認証を行なう

パスコード認証を許可するかどうかのフラグが何故あるかというと、iPhone5 以前のデバイスでは TouchID や FaceID が使用不可であり、そもそもそれ以降のデバイスでも生体認証を登録していないユーザがいるためである。

というわけで、全通りパターン分けをするとこのようになる。

1
func biometricsAuth() {
2
    let context = LAContext()
3
    let reason = "This app uses Touch ID / Face ID to secure your data."
4
    var authError: NSError?
5

6
    if context.canEvaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, error: &authError) {
7
        context.evaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, localizedReason: reason) { success, error in
8
            if success {
9
                // 生体認証が成功した場合
10
            } else {
11
                // 生体認証が失敗した場合
12
            }
13
        }
14
    } else {
15
        // 生体認証ができない場合
16
    }
17
}

指紋認証のためのボタンは SF symbols で定義されているtouchidというやつが使える。

前回のコードとくっつける

パスコード入力画面に追加して動作チェックをしてみる。

1
import SwiftUI
2
import LocalAuthentication
3

4
struct PasscodeView: View {
5

6
    typealias CompletionHandler = (Result<Bool, Error>) -> Void
7
    let completionHandler: CompletionHandler
8
    let passcode: Int
9

10
    init(passcode: Int, completionHandler: @escaping CompletionHandler) {
11
        self.completionHandler = completionHandler
12
        self.passcode = passcode
13
    }
14

15
    var body: some View {
16
        GeometryReader { geometry in
17
            LazyVGrid(columns: Array(repeating: .init(.flexible(minimum: 60, maximum: 80), spacing: 0), count: 3), alignment: .center, spacing: 10, pinnedViews: []) {
18
                ForEach(Range(1...9)) { number in
19
                    Button(action: { addSign(sender: number)}, label: { Text("\(number)").frame(width: 60, height: 60, alignment: .center) })
20
                        .overlay(Circle().stroke(Color.blue, lineWidth: 1))
21
                }
22
                .buttonStyle(CircleButtonStyle())
23
                Button(action: { biometricsAuth() }, label: { Image(systemName: "touchid").resizable().frame(width: 40, height: 40, alignment: .center) })
24
                Button(action: { addSign(sender: 0) }, label: { Text("0").frame(width: 60, height: 60, alignment: .center) })
25
                    .buttonStyle(CircleButtonStyle())
26
                Button(action: {}, label: { Text("Delete").frame(width: 60, height: 60, alignment: .center) })
27
            }
28
            // 認証画面を真ん中に表示
29
            .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
30
        }
31
        .edgesIgnoringSafeArea(.all)
32
        .background(Color.white)
33
    }
34

35
    func addSign(sender: Int) {
36
        if sender == passcode {
37
            completionHandler(.success(true))
38
        } else {
39
            completionHandler(.success(false))
40
        }
41
    }
42

43
    func biometricsAuth() {
44
        let context = LAContext()
45
        let reason = "This app uses Touch ID / Face ID to secure your data."
46
        var authError: NSError?
47

48
        if context.canEvaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, error: &authError) {
49
            context.evaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, localizedReason: reason) { success, error in
50
                if success {
51
                    // 生体認証が成功した場合
52
                    print("SUCCESS")
53
                } else {
54
                    // 生体認証が失敗した場合
55
                    print("FAILURE")
56
                }
57
            }
58
        } else {
59
            // 生体認証ができない場合
60
            print("FAILURE")
61
        }
62
    }
63
}
64

65
struct CircleButtonStyle: ButtonStyle {
66
    func makeBody(configuration: Configuration) -> some View {
67
        configuration.label
68
            .foregroundColor(configuration.isPressed ? Color.white : Color.blue)
69
            .overlay(Circle().stroke(Color.blue, lineWidth: 1))
70
            .contentShape(Circle())
71
            .background(Circle().foregroundColor(configuration.isPressed ? Color.blue : Color.clear))
72
    }
73
}