tags: 釣魚術 swift amplify AWS

前言

• 前面兩篇，我們已經將 Amplify Auth 給設定起來了，接下來我們要製作 SwiftUI 的註冊畫面

實作方式

• 先把註冊畫面的文字框框挖好

struct AuthView: View {
    
    @StateObject var viewModel: AuthView.ViewModel = .init()
    
    var body: some View {
        VStack {
            TextField("信箱或電話", text: $viewModel.username)
            TextField("暱稱", text: $viewModel.nickname)
            TextField("密碼", text: $viewModel.password)
            TextField("信箱", text: $viewModel.email)
            TextField("電話", text: $viewModel.phone)
            Button("取得驗證碼", action: viewModel.signUp)
            TextField("驗證碼", text: $viewModel.confirmationCode)
            Button("完成註冊", action: viewModel.confirm)
            Button("登入", action: viewModel.signIn)
        }
        .padding(.horizontal, 30)
    }
}

• 然後要做三個 function
  • signUp： 註冊功能
  • confirm： 確認驗證碼
  • singIn： 登入
• 這些程式碼，你在 console 上開好之後，會有給你參考用的原始碼（不過你還是需要客製化修改部分內容）
• 三個寫好之後會長得像下面這樣

extension AuthView {
    class ViewModel: ObservableObject{
        @Published var username: String = ""
        @Published var nickname: String = ""
        @Published var password: String = ""
        @Published var email: String = ""
        @Published var phone: String = ""
        @Published var confirmationCode: String = ""
        
        func signUp() {
            let userAttributes = [
                AuthUserAttribute(.email, value: email),
                AuthUserAttribute(.phoneNumber, value: phone),
                AuthUserAttribute(.name, value: username)
            ]
            let options = AuthSignUpRequest.Options(userAttributes: userAttributes)
            
            Amplify.Auth.signUp(
                username: username,
                password: password,
                options: options
            ) { result in
                switch result {
                case .success(let signUpResult):
                    if case let .confirmUser(deliveryDetails, _) = signUpResult.nextStep {
                        print("Delivery details \(String(describing: deliveryDetails))")
                    } else {
                        print("SignUp Complete")
                    }
                case .failure(let error):
                    print("An error occurred while registering a user \(error)")
                }
            }
        }
        
        func confirm() {
            Amplify.Auth.confirmSignUp(for: username, confirmationCode: confirmationCode) { result in
                switch result {
                case .success(let confirmResult):
                    print(confirmResult)
                case .failure(let error):
                    print(error)
                }
            }
        }
        
        func signIn() {
            Amplify.Auth.signIn(username: username, password: password) { result in
                switch result {
                case .success:
                    print("Sign in succeeded")
                case .failure(let error):
                    print("Sign in failed \(error)")
                }
            }
        }
    }
}

• Build Source code 用手機註冊看看
  
• 然後收信
  
• 你可以從 console 直接幹掉使用者
  
• 再註冊一次，再收信一次！
  
• 輸入驗證碼後，按下確認；從 Xcode dubug 訊息可以看到註冊成功
  
• 按下登入後，從 Xcode debug 訊息也看到登入成功
  

心得

• 功能串好了，只不過這個使用者介面，不直覺也不人性
• 明天再來繼續修改註冊和登入的畫面