CryptoKit in SwiftUI - 비밀번호 암호화

A tutorial on Password Encryption

 

앱을 만들기 위해서 보안은 매우 중요하다. iOS 개발을 하는데 비밀번호를 암호화하여 유저의 데이터를 보호하는 것은 매우 중요하다.

 

Why Encrypt Password?

비밀번호를 암호화하는 것은 매우 중요하다. 왜냐면 유저는 앱의 계정을 만들게 되면 전형적으로 사용자는 비밀번호를 쉽게 설정하고 보안이 뚫리게 되면 다른 사람한테 계정에 대한 정보를 바로 들키기 때문이다. 만약 비밀번호가 암호화되지 않았다면 악의적인 사람한테 쉽게 털릴 수 있다. 비밀번호를 암호화하는 것은 공격자가 계정에 대한 정보를 알게 되더라도 사용하는 것을 어렵게 만들기 때문에 중요하다.

 

Chossing an Encryption Algorithm

암호화 알고리즘은 매우 많이 존재한다, 하지만 모든 알고리즘이 비밀번호 암호화에 적합하지는 않는다. 비밀번호를 암호화하는데 주로 사용하는 암호화 기법은 bcrypt 라고 한다. Bcrypt 는 느린 해싱 알고리즘으로 비밀번호 저장을 위해 특별하게 만들어졌다. 그것은 계산적으로 비싸서, 브르투포스(노가다)를 훨씬 더 어렵게 만든다. 

 

SwiftUI에는 bcrypt 암호화 기법에 대한 지원이 내장되어 있지 않지만, 사용하기 쉬운 라이브러리가 있습니다. 인기 있는 라이브러리 중 하나는 CryptoKit이다.

 

Using CryptoKit to Encrypt Passwords

CryptoKit 으로 비밀번호를 암호화하기 위해서 먼저 CryptoKit을 import 해야한다.

import CryptoKit

 

다음으로는 비밀번호 문자열을 입력으로 받아들이고 암호화된 비밀번호 문자열을 반환하는 함수를 만든다.

func encryptPassword(password: String) -> String {
    let salt = "mysalt"
    let saltedPassword = password + salt

    guard let saltedPasswordData = saltedPassword.data(using: .utf8) else {
        return ""
    }

    let hashedPassword = SHA256.hash(data: saltedPasswordData)
    let hashedPasswordString = hashedPassword.compactMap { String(format: "%02x", $0) }.joined()

    return hashedPasswordString
}

 

위에 코드에서 CryptoKit에서 지원하는 SHA256 해싱 함수를 사용하여 암호화된 비밀번호를 반환받는다.

 

비밀번호 암호화를 사용하여 보안을 향상시키고 있다. 위에 코드에서 salt 값은 해싱되기 전에 임의로 만든 문자열 비밀번호 "mysalt"다.

이것은 공격자가 미리 계산된 해싱 테이블을 사용하여 암호를 해독하는 것을 훨씬 더 어렵게 만든다.

 

Using the Encrypt Password Function in SwiftUI

이제 view에서 사용할 수 있는 encryptPassword 함수를 만들 차례다. 사용자가 비밀번호를 입력할 수 있는 텍스트 필드와 비밀번호를 암호화하는 버튼이 있는 간단한 보기를 만드는 코드다.

struct ContentView: View {
    @State var password: String = ""
    @State var encryptedPassword: String = ""

    var body: some View {
        VStack {
            TextField("Password", text: $password)

            Button("Encrypt Password") {
                encryptedPassword = encryptPassword(password: password)
            }

            Text("Encrypted Password: \(encryptedPassword)")
        }
    }
}

 

위에 코드에서 @State 프로퍼티 래퍼를 사용하여 2개의 state 변수들을 만들어 암호화 되기 전 비밀번호, 암호화 된 후 비밀번호를 생성.

다음으로는 비밀번호를 입력할 수 있는 TextField를 사용하여 button을 눌렀을 경우 암호화된 값을 반환받을 수 있도록 만든다.

 

Redaction

암호화 기능을 구현한 후, 우리는 편집을 통해 암호화된 비밀번호를 숨기는 버튼을 추가하여 논리를 개선할 수 있다.

Redaction은 설정한 특정 뷰를 화면에서 보이지 않게 설정하는 것이다 (콘텐츠 모자이크)

struct ContentView: View {
    @State var password: String = ""
    @State var encryptedPassword: String = ""
    @State var hideEncryptedPassword: Bool = false

    var body: some View {
        VStack {
            TextField("Password", text: $password)

            Button("Encrypt Password") {
                encryptedPassword = encryptPassword(password: password)
            }

            Text("Encrypted Password:")
                .bold()
            Group {
                if hideEncryptedPassword {
                    Text("\(encryptedPassword)")
                        .redacted(reason: .placeholder)
                } else {
                    Text("\(encryptedPassword)")
                }
            }
            Button(hideEncryptedPassword ? "Show" : "Hide") {
                hideEncryptedPassword.toggle()
            }
        }
    }
}

위의 예에서, 우리는 암호화된 비밀번호 텍스트가 숨겨져 있는지 나타내기 위해 Bool 유형의 @State 속성을 추가했다. 그런 다음 암호화된 비밀번호 텍스트를 hideEncryptedPassword가 true이면 텍스트를 편집하는 조건부 그룹으로 교체했습니다. 그리고hideEncryptedPassword의 Bool 값을 전환하기 위해 또 다른 버튼을 추가했다.

 

 

UI Enhancement

마지막으로 테두리, 프레임, bolding, 색상 추가를 하여 UI를 꾸미는 것이다.

struct ContentViewEnhanced: View {
    @State var password: String = ""
    @State var encryptedPassword: String = ""
    @State var hideEncryptedPassword: Bool = false
    var body: some View {
        VStack {
            TextField("Password", text: $password)
                .frame(width: 200, height: 40, alignment: .center)
                .border(.black)
            Button("Encrypt") {
                encryptedPassword = encryptPassword(password: password)
            }
            .bold()
            .foregroundColor(.white)
            .frame(width: 200, height: 40, alignment: .center)
            .background(Color.blue.cornerRadius(10))
            Text("Encrypted Password:")
                .bold()
            Group {
                if hideEncryptedPassword {
                    Text("\(encryptedPassword)")
                        .redacted(reason: .placeholder)
                } else {
                    Text("\(encryptedPassword)")
                }
            }
            Button(hideEncryptedPassword ? "Show" : "Hide") {
                hideEncryptedPassword.toggle()
            }
            .bold()
            .foregroundColor(.white)
            .frame(width: 200, height: 40, alignment: .center)
            .background(Color.blue.cornerRadius(10))
        }
        .padding(.horizontal)
    }
}

 

 

 

 

 

 

 

 

 

 

 

해석한 사이트

https://xavier7t.com/cryptokit-in-swiftui