目次
概要
最近のパスワード登録画面では、入力されている文字列がパスワードとして複雑かどうかが表示されている。
Zxcvbnというライブラリを使用すると現在入力されているパスワードが強力かどうかをリアルタイムで反映することができる。
しかし、SwiftUIで、しかもカスタマイズできるような形では記事がなかったので作成する。
基礎編ということで、ここでは以下のライブラリの例に則って実装する。
【GitHub】toddheasley/zxcvbn
下準備
さて、今回はすでに実装されているプログラム、つまりライブラリを使用する。
まずはライブラリを取り入れよう！
Swift Package Managerでライブラリを導入
CocoaPodsなどもあるが、最近はSwift Package Managerで取り入れる方が多いのではないかと思っている。
それに、色々シンプルだと思っている。
まずは、プロジェクトファイルの「General」を表示して、この赤枠の「＋」ボタンを押下してSwift Package Managerを立ち上げる。
そうすると以下のようなウィンドウが表示されるので、「Add Other」を押下して、
「Add Package Dependency」を選択する。
このようにライブラリ一覧が出てくるので、赤枠の部分にGitのURL「https://github.com/toddheasley/zxcvbn」を入力して検索をかける。
すると、「zxcvbn」というライブラリが出てくるので、それを選択して「Add Package」を選択する。
そうすると以下のように表示されるので「Add Package」を選択する。
すると、以下のようにライブラリ一覧に表示されるようになる。
これでプログラム上で「import zxcvbn」と書くことでこのライブラリの機能を使うことができる。
ソースコード
import SwiftUI
@main
struct TestApp: App {
@UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
var body: some Scene {
WindowGroup {
SecurityPasswordView()
}
}
}
import Foundation
class SecurityPasswordViewModel: ObservableObject {
@Published var password: String = ""
}
import SwiftUI
import Zxcvbn
struct SecurityPasswordView: View {
@ObservedObject private var viewModel = SecurityPasswordViewModel()
@State private var isBlankPassword: Bool = true
private let passwordPlaceholder: String = "パスワード"
var body: some View {
ZStack {
VStack(alignment: .leading) {
Text("パスワード")
HStack {
if isBlankPassword {
SecureField(passwordPlaceholder, text: $viewModel.password)
.textFieldStyle(.roundedBorder)
.keyboardType(.asciiCapable)
.overlay(ResultView(viewModel.password), alignment: .trailing)
} else {
TextField(passwordPlaceholder, text: $viewModel.password)
.textFieldStyle(.roundedBorder)
.keyboardType(.asciiCapable)
.overlay(ResultView(viewModel.password), alignment: .trailing)
}
Toggle(isOn: $isBlankPassword) {
Image(systemName: isBlankPassword ? "eye.slash.fill" : "eye.fill")
}
.toggleStyle(.button)
}
}
.padding()
}
}
}
デモ動画
詳細
ここはライブラリの例に則って書いたからとても簡単だ！
TextFieldの右端にタイルを表示して、パスワードの強度が高くなるにつれてタイルに色がついていくというもの。
しかし、これでは少々不親切だし、少し味気ない感じがある。
次回はもっとこのタイルの部分をカスタマイズしていこう。
例えば、メーターのように表示したり、パスワード強度に応じて表示するメッセージを変えたり。