Những hướng dẫn này diễn đạt cách phong cách thiết kế một thưởng thức đăng nhập rõ ràng, bảo đảm an toàn và đồng nhất trên những thiết bị và dịch vụ .
Đầu tiên, hãy xem xét bạn muốn nhu yếu mọi người đăng nhập hoặc liên kết với Facebook ở đâu trong thưởng thức người dùng. Đối với 1 số ít thiết bị, đây sẽ là hành vi ngay lập tức còn so với những thiết bị khác, hành vi này hoàn toàn có thể xảy ra sau trong thưởng thức .
Để bảo vệ thưởng thức người dùng tiện nghi, đồng nhất và đáng đáng tin cậy nhất, hãy phong cách thiết kế nút này giống tối đa hoàn toàn có thể với nút Đăng nhập Facebook chính thức .
Từ khía cạnh thiết kế trực quan, điều này nghĩa là bạn nên
- Dán nhãn nút là “Đăng nhập bằng Facebook” hoặc “Kết nối với Facebook”.
- Sử dụng màu trắng và màu xanh lam thương hiệu chính thức của Facebook: #1877F2.
- Nếu thiết bị của bạn hỗ trợ hiển thị đồ họa, bạn cũng có thể kết hợp logo chữ “f” chính thức. Theo Nguyên tắc về thương hiệu của Facebook, logo luôn phải là màu trắng hoặc xanh lam của Facebook (#1877F2).
Nếu tương thích, hãy miêu tả quyền lợi của việc đăng nhập. Ví dụ : “ khám phá nội dung bạn hữu đang xem ” hoặc ” xem ảnh từ album của bạn trên Facebook ” .
2. Hiển thị mã
Khi ai đó nhấp vào nút lôi kéo hành vi, thiết bị thực thi lệnh gọi đến API của Facebook. API này trả về một mã .Trong giao diện của bạn, cho mọi người biết rằng họ cần truy vấn một website và nhập mã bằng thông tin sau : “ Tiếp theo, hãy truy vấn facebook.com/device ( http://facebook.com/device ) trên máy tính hoặc điện thoại thông minh mưu trí và nhập mã này ”. Hiển thị hàng loạt mã bạn đã nhận được từ API Đăng nhập thiết bị của Facebook. Mã này dài từ 6 đến 12 ký tự .
Bạn có thể thêm nút Close hoặc Cancel để mọi người có thể hủy quy trình đăng nhập thiết bị. Hành động này sẽ đưa họ về màn hình đăng nhập ban đầu.
Khi mã hiển thị trên màn hình, thiết bị sẽ thăm dò API Đăng nhập thiết bị để xem ai đó đã ủy quyền cho ứng dụng của bạn chưa. Sau vài phút, nếu họ không nhập mã, API Đăng nhập thiết bị sẽ trả về một lỗi code_expired. Khi thiết bị nhận được lỗi này, bạn nên hủy quy trình đăng nhập và giao diện nên hiển thị nút kêu gọi hành động.
Bạn cũng có thể tạo mã QR bằng mã người dùng nhúng trong URL. Cách thực hiện điều này là thêm thông số user_code vào URL:
https://www.facebook.com/device?user_code=
3. Ủy quyền
Đây là luồng mọi người nhìn thấy khi họ truy vấn facebook.com/device trên máy tính hoặc trình duyệt di động của mình. Đầu tiên, họ sẽ nhìn thấy một trường văn bản để nhập mã :
Sau khi nhập mã và nhấp vào Continue, họ có thể chọn quyền mình muốn cấp:
Thông báo xác nhận sẽ hiển thị để mọi người biết quy trình đăng nhập của mình thành công xuất sắc :
4. Xác nhận đăng nhập thành công
Trên giao diện của thiết bị, bạn cũng sẽ nhìn thấy một thông tin xác nhận. Thông báo lý tưởng gồm có tên và ảnh đại diện thay mặt của họ trên Facebook, nếu hoàn toàn có thể .
Hiển thị xác nhận này trên thiết bị đến khi người đó nhấp vào nút Continue. Ai đó có thể phải nhập mã vào máy tính ở vị trí khác nên họ có thể cần thời gian để quay lại thiết bị của bạn và xem xác nhận trước khi tiếp tục.
Sau khi người đó nhấp vào Continue, thiết bị của bạn có thể hiển thị một trải nghiệm người dùng tuyệt vời dành riêng cho từng cá nhân.
5. Đăng xuất hoặc ngắt kết nối
Mọi người phải đăng xuất được khỏi thiết bị và thiết bị của bạn không được lưu trữ kết nối của họ với Facebook. Để thực hiện việc này, hãy cung cấp một tùy chọn Log out from Facebook hoặc Disconnect from Facebook trong menu của thiết bị.
Khi ai đó chọn tùy chọn này, thiết bị của bạn phải xóa mã truy vấn đã tàng trữ khỏi bộ nhớ. Nếu bạn tàng trữ mã truy vấn trong cơ sở tài liệu hoặc dịch vụ tàng trữ đám mây, bạn cũng nên xóa dữ liệu tại đó. Bạn không cần triển khai lệnh gọi API để vô hiệu hóa mã truy vấn .
Sau khi ai đó đăng xuất, thiết bị phải hiển thị nút lôi kéo hành vi khởi đầu trong Bước 1 .
