[Video Summary] Ch. 8.4 Log Out & Finish Log In Navigation with Firebase Authentication, Snacktacular App (2024)

SwiftUI 6 Th02 2025

Mô tả nhanh

Video này hướng dẫn cách hoàn thiện chức năng đăng xuất và tự động bỏ qua màn hình đăng nhập nếu người dùng đã đăng nhập trước đó, sử dụng Firebase Authentication trong ứng dụng SwiftUI.

Video

Click vào hình dưới để mở:
Ch. 8.4 Log Out & Finish Log In Navigation with Firebase Authentication, Snacktacular App (2024)

Mô tả chi tiết

Video này hướng dẫn cách hoàn thiện chức năng đăng xuất và tự động bỏ qua màn hình đăng nhập nếu người dùng đã đăng nhập trước đó, sử dụng Firebase Authentication trong ứng dụng SwiftUI.




Các bước thực hiện bao gồm:

  1. Tạo View mới (ListView):
    • Chuyển đổi Project Navigator thành Group để dễ dàng sắp xếp các file. Bạn có thể bỏ qua bước này nếu không cần thiết.
    • Tạo một SwiftUI View mới tên là ListView.
    • Import Firebase vào ListView để sử dụng các hàm của Firebase.
    • Thêm NavigationView để quản lý điều hướng.
    • Thêm List để hiển thị danh sách (chưa có dữ liệu).
    • Thêm navigationTitle để đặt tiêu đề cho thanh điều hướng.
    • Thêm toolbar để tạo nút "Sign Out" ở bên trái và nút "+" ở bên phải.
      • Nút "Sign Out" sẽ thực hiện chức năng đăng xuất và quay lại màn hình đăng nhập.
      • Nút "+" sẽ có chức năng thêm bản ghi (sẽ được thêm vào sau).
    • Sử dụng @Environment(\.dismiss) để tạo biến dismiss giúp quay lại màn hình đăng nhập sau khi đăng xuất.
    • Trong action của nút "Sign Out":
      • Sử dụng do-catch để xử lý lỗi khi đăng xuất.
      • Gọi hàm Auth.auth().signOut() để đăng xuất.
      • In thông báo thành công nếu đăng xuất thành công.
      • Gọi dismiss() để đóng sheet và quay lại màn hình đăng nhập.
      • In thông báo lỗi nếu đăng xuất không thành công.

  2. Thay đổi LoginView:
    • Thêm @State private var presentSheet = false để kiểm soát việc hiển thị sheet full màn hình.
    • Thêm .fullScreenCover(isPresented: $presentSheet) { ListView() } để hiển thị ListView khi presentSheet là true.
    • Trong hàm register()login() thành công, set presentSheet = true để chuyển sang ListView.
    • Thêm .onAppear để kiểm tra xem người dùng đã đăng nhập trước đó chưa. Nếu đã đăng nhập, set presentSheet = true để hiển thị ListView.
    • Thêm print message ở mỗi lần đăng nhập thành công để dễ theo dõi.

Sau khi thực hiện các bước trên, ứng dụng sẽ có chức năng:
* Đăng nhập bằng email & password. * Tự động chuyển đến `ListView` nếu đã đăng nhập trước đó. * Đăng xuất từ `ListView` và quay lại màn hình đăng nhập.

Chúc bạn học tập hiệu quả và có những sản phẩm tuyệt vời!

Tags