Skip to main content

Yêu Cầu Bổ Sung: Nút Liên Kết Mạng Xã Hội Trên Màn Hình Chỉnh Sửa Hồ Sơ

Ngày cập nhật: 08/07/2026
Loại: UI/UX Feature Addition — Social Account Linking

Ảnh feedback & tham khảo:

1. Vấn Đề Hiện Tại​

Màn hình Chỉnh sửa thông tin (Edit Profile) hiện tại chỉ cho phép người dùng cập nhật các trường thông tin cá nhân cơ bản (họ tên, email, số điện thoại, ngày sinh, địa chỉ...) nhưng chưa có khu vực liên kết tài khoản mạng xã hội (Social Account Linking).

Việc thiếu tính năng này dẫn đến:

  • Người dùng không thể liên kết tài khoản Golden Lotus của họ với Google/Apple/Zalo/Facebook để có thể đăng nhập nhanh bằng các tài khoản xã hội đó ở lần sau.
  • Trải nghiệm đăng nhập kém linh hoạt và không đồng bộ với xu hướng ứng dụng hiện đại.

2. Yêu Cầu Chỉnh Sửa​

2.1 Thêm Section "Liên Kết Tài Khoản" vào màn hình Edit Profile​

  • Bổ sung một section mới có tiêu đề "Liên kết tài khoản" (hoặc "Đăng nhập nhanh bằng") vào cuối màn hình Chỉnh sửa thông tin, đặt phía trên nút "Cập nhật".
  • Section này hiển thị danh sách các nền tảng mạng xã hội được hỗ trợ, mỗi nền tảng bao gồm:
    • Icon nhận diện thương hiệu (màu sắc chuẩn của từng nền tảng).
    • Tên nền tảng (ví dụ: Google, Apple, Zalo, Facebook).
    • Trạng thái liên kết: Nút toggle hoặc nhãn trạng thái "Đã liên kết" / "Chưa liên kết".
    • Nút hành động: Nếu chưa liên kết → Hiển thị nút "Liên kết". Nếu đã liên kết → Hiển thị nút "Hủy liên kết".

2.2 Danh sách nền tảng hỗ trợ (ưu tiên theo thứ tự)​

#Nền tảngIconGhi chú
1GoogleLogo Google (đa màu)Ưu tiên cao — phổ biến nhất
2AppleLogo Apple (đen)Bắt buộc trên iOS (App Store Guidelines)
3ZaloLogo Zalo (xanh dương)Ưu tiên cao — thị trường VN
4FacebookLogo Facebook (xanh)Tham khảo style ở Ảnh Mời bạn bè

2.3 Tham khảo kiểu UI icon nút tròn​

Style nút icon tròn (Zalo xanh, Facebook xanh, WhatsApp xanh lá, Email đỏ) đang được dùng trên màn hình Mời bạn bè (ảnh đính kèm) là style tham chiếu cho khu vực này — icon tròn lớn, màu nền đặc trưng của từng nền tảng, tên nền tảng phía dưới.

3. Gợi Ý Luồng UX (Interaction Flow)​

Khi nhấn "Liên kết" một nền tảng:​

  1. App gọi OAuth flow của nền tảng tương ứng (ví dụ: Google Sign-In SDK / Apple Sign-In / Zalo SDK).
  2. Người dùng xác thực tài khoản mạng xã hội.
  3. Backend nhận token xác thực và lưu mapping {userId ↔ socialProvider, socialProviderId} vào database.
  4. Màn hình cập nhật hiển thị trạng thái "Đã liên kết ✓".
  5. Từ lần sau, người dùng có thể đăng nhập bằng nền tảng đó mà không cần nhập PIN/OTP.

Khi nhấn "Hủy liên kết":​

  1. Hiển thị hộp thoại xác nhận (Confirm Dialog): "Bạn có chắc muốn hủy liên kết tài khoản [Google/Apple/Zalo]? Bạn sẽ không thể đăng nhập bằng [nền tảng này] nữa."
  2. Nếu xác nhận → Backend xóa mapping liên kết.
  3. Lưu ý bảo mật: Chỉ cho phép hủy liên kết nếu tài khoản vẫn còn ít nhất một phương thức đăng nhập khác (PIN hoặc OTP qua SĐT/email). Không được để tài khoản không có phương thức đăng nhập nào.

4. Gợi Ý Cấu Trúc Code (React Native)​

// Component row hiển thị một nền tảng liên kết
const SocialLinkRow = ({ platform, icon, color, isLinked, onLink, onUnlink }) => (
  <View style={styles.socialRow}>
    {/* Icon nền tảng */}
    <View style={[styles.iconCircle, { backgroundColor: color }]}>
      <Image source={icon} style={styles.socialIcon} />
    </View>

    {/* Tên nền tảng + trạng thái */}
    <View style={styles.socialInfo}>
      <Text style={styles.platformName}>{platform}</Text>
      <Text style={[styles.linkStatus, isLinked && styles.linkedStatus]}>
        {isLinked ? '✓ Đã liên kết' : 'Chưa liên kết'}
      </Text>
    </View>

    {/* Nút hành động */}
    <TouchableOpacity
      style={[styles.actionBtn, isLinked ? styles.unlinkBtn : styles.linkBtn]}
      onPress={isLinked ? onUnlink : onLink}
    >
      <Text style={styles.actionBtnText}>
        {isLinked ? 'Hủy liên kết' : 'Liên kết'}
      </Text>
    </TouchableOpacity>
  </View>
);

// Section trong EditProfileScreen
const SocialLinkSection = () => (
  <View style={styles.sectionContainer}>
    <Text style={styles.sectionTitle}>Liên kết tài khoản</Text>
    <SocialLinkRow platform="Google"   color="#FFFFFF" isLinked={false} ... />
    <SocialLinkRow platform="Apple"    color="#000000" isLinked={false} ... />
    <SocialLinkRow platform="Zalo"     color="#0068FF" isLinked={false} ... />
    <SocialLinkRow platform="Facebook" color="#1877F2" isLinked={false} ... />
  </View>
);

Checklist Kỹ Thuật​

  • Thiết kế UI component SocialLinkRow hiển thị icon, tên, trạng thái và nút hành động cho từng nền tảng.
  • Tích hợp SDK xác thực: Google Sign-In, Sign in with Apple, Zalo SDK, Facebook SDK.
  • Xây dựng API endpoint POST /api/profile/social-link để lưu mapping và DELETE /api/profile/social-link/:provider để hủy liên kết.
  • Thêm logic kiểm tra bảo mật: không cho phép hủy liên kết phương thức cuối cùng còn lại.
  • Hiển thị trạng thái liên kết thực tế từ API (không hardcode).
  • Test trên cả iOS (đặc biệt Sign in with Apple — bắt buộc theo App Store Guidelines) và Android.