MakeXYZ Fun

[Video Summary] Ch. 8.2 Firebase Email & Password Signup / Login in SwiftUI, Snacktacular App (2024)

Admin -

Mô tả nhanh

Video này hướng dẫn cách thiết lập dịch vụ xác thực trong ứng dụng Firebase và viết code SwiftUI để người dùng có thể tạo tài khoản bằng email và mật khẩu, sau đó sử dụng thông tin đăng nhập này để đăng nhập vào ứng dụng.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này hướng dẫn cách thiết lập dịch vụ xác thực trong ứng dụng Firebase và viết code SwiftUI để người dùng có thể tạo tài khoản bằng email và mật khẩu, sau đó sử dụng thông tin đăng nhập này để đăng nhập vào ứng dụng. Cụ thể:

  1. Thiết lập Firebase Authentication:

    • Vào Firebase console, chọn dự án Snacktacular.
    • Chọn "Authentication", sau đó "Get Started".
    • Chọn "Email/Password" và bật nó lên.

  2. Tạo Giao Diện Đăng Nhập (Login View) trong SwiftUI:

  • Đổi tên ContentView thành LoginView.
  • Import Firebase và Firebase/Auth.
  • Thêm một Image logo.
  • Tạo các @State variable email và password để lưu trữ dữ liệu người dùng nhập vào.
  • Thêm TextField cho email và SecureField cho mật khẩu.
    • Sử dụng modifier .keyboardType(.emailAddress) cho TextField email để hiển thị bàn phím email đặc biệt, và .autocorrectionDisabled() để tắt tự động sửa lỗi.
    • Sử dụng modifier .submitLabel(.next) để thay đổi label của nút return trên bàn phím thành "Next" trên TextField email và .submitLabel(.done) trên SecureField password.
  • Thêm Group để áp dụng modifier chung cho cả TextField và SecureField, bao gồm .textFieldStyle(.roundedBorder) và .overlay để tùy chỉnh đường viền.

  1. Thêm Button và Màu Sắc Tùy Chỉnh:

    • Thêm HStack để chứa hai button "Sign Up" và "Log In".
    • Thêm button style modifier .buttonStyle(.borderedProminent).
    • Tạo một color set mới tên snackColor trong Asset Catalog để tùy chỉnh màu sắc button.
    • Sử dụng modifier .tint(.snack) để áp dụng màu sắc tùy chỉnh cho button.
    • Thêm padding cho button để tạo khoảng cách.

  2. Xây Dựng Chức Năng Đăng Ký (Sign Up):

    • Tạo function register().
    • Sử dụng Auth.auth().createUser(withEmail:password:completion:) để tạo tài khoản mới.
    • Xử lý lỗi và in thông báo lỗi.
    • Tạo các @State variable showingAlert, alertMessage và sử dụng .alert để hiển thị thông báo lỗi.
    • Nếu đăng ký thành công, in thông báo "Registration Success".
    • Gọi hàm register() khi người dùng bấm nút "Sign Up".

  3. Xây Dựng Chức Năng Đăng Nhập (Log In):

    • Tạo function login().
    • Sử dụng Auth.auth().signIn(withEmail:password:completion:) để đăng nhập.
    • Xử lý lỗi và in thông báo lỗi.
    • Nếu đăng nhập thành công, in thông báo "Login Success".
    • Gọi hàm login() khi người dùng bấm nút "Log In".

  4. Kiểm Thử:

    • Chạy ứng dụng trên simulator.
    • Đăng ký tài khoản mới.
    • Kiểm tra thông tin người dùng trong Firebase console.
    • Đăng nhập bằng tài khoản đã tạo.
    • Kiểm tra kết quả trong console.

Chúc bạn có những trải nghiệm thú vị và thành công trên con đường chinh phục lập trình iOS/macOS với Swift và SwiftUI!