Nút Đăng nhập

Nút Đăng nhập là cách đơn giản để kích hoạt quá trình Đăng nhập Facebook trên trang web hoặc ứng dụng web.

Nếu ai đó chưa đăng nhập ứng dụng, họ sẽ nhìn thấy nút này. Nhấp vào nút đó sẽ mở ra hộp thoại Đăng nhập, bắt đầu quy trình đăng nhập. Những người đã đăng nhập sẽ không nhìn thấy bất kỳ nút nào hoặc bạn cũng có thể chọn hiển thị nút đăng xuất cho họ.

Nếu bạn hiển thị nút đăng xuất, khi mọi người sử dụng nút đó để đăng xuất, họ sẽ đăng xuất khỏi cả ứng dụng của bạn và Facebook.

Nút Đăng nhập chỉ được thiết kế để hoạt động cùng JavaScript SDK - nếu bạn đang tạo ứng dụng di động hoặc không thể dùng JavaScript SDK của chúng tôi, bạn nên làm theo hướng dẫn quy trình đăng nhập dành cho loại ứng dụng đó.

Nút Tiếp tục với Facebook thay thế cho các phiên bản trước đó của nút Đăng nhập. Để biết thêm thông tin, hãy xem Chuyển.

Bộ cấu hình plugin

Nút Tiếp tục dưới tên {Name}

Nút Tiếp tục dưới tên {Name} có nội dung "Tiếp tục dưới tên {persons' name}" và có thể bao gồm ảnh đại diện của người đó trên Facebook nếu họ đã đăng nhập Facebook trong cùng một trình duyệt. Để sử dụng nút Tiếp tục dưới tên {Name}, trước tiên bạn phải tải JavaScript SDK. Để biết hướng dẫn về cách thiết lập JavaScript SDK, hãy xem Bắt đầu nhanh JavaScript SDK. Cho phép Tiếp tục dưới tên {Name} bằng cách thêm data-use-continue-as="true" vào mục cài đặt dành cho nút của bạn.

Không thể tùy chỉnh chiều cao của nút Tiếp tục dưới tên {Name}.

Nếu bạn chọn một kích thước vượt quá thông số tối đa, nút này sẽ đặt mặc định về chiều rộng tối đa.

Thực tiễn tốt nhất cho nút Tiếp tục dưới tên {Name}

Nút Tiếp tục dưới tên {Name} có thể là cách hữu ích để tăng số lượt click và tương tác. Nhờ có nút này, người dùng có thể nhìn thấy ảnh đại diện và tên của họ trên nút Đăng nhập của chúng tôi và ứng dụng của bạn sẽ trở nên cá nhân hóa hơn.

Do đó, người dùng có thể bối rối nếu không mong đợi sẽ nhìn thấy tên và ảnh đại diện của họ trong ngữ cảnh này. Vui lòng cân nhắc những điều sau để xem liệu nút Tiếp tục dưới tên có là lựa chọn tốt nhất cho ứng dụng của bạn hay không.

Ngay cả khi nút Tiếp tục dưới tên {Name} không phù hợp với ứng dụng của bạn, bạn vẫn có thể thử các nút JavaScript SDK mới có dòng chữ "Tiếp tục với Facebook".

Trường hợp sử dụng được đề xuất

Chúng tôi phục vụ cơ sở người dùng toàn cầu và những khu vực khác nhau có kỳ vọng người dùng khác nhau. Hãy tôn trọng các kỳ vọng đó khi sử dụng nút này.

Phù hợp nhất khi

• Ứng dụng của bạn là ứng dụng xã hội:
  Khi mọi người dùng ứng dụng xã hội, họ mong đợi được kết nối với người khác. Chúng tôi đã thấy nút Tiếp tục dưới tên {Name} mang lại hiệu quả cao trong những trường hợp sau.

• Mọi người ở thị trường mục tiêu dùng chung điện thoại:
  Khi nhiều người dùng chung điện thoại, nút Tiếp tục dưới tên {Name} có thể giúp họ yên tâm rằng họ đang sử dụng đúng tài khoản.

Tránh khi

• Ứng dụng của bạn là ứng dụng mới:
  Nếu ứng dụng của bạn là ứng dụng mới trên thị trường, người dùng có thể cảm thấy bối rối hơn về lý do tên và ảnh đại diện của họ tự động hiển thị, so với một ứng dụng quen thuộc hoặc đã có uy tín mà người dùng định sử dụng thường xuyên.

• Mọi người ở thị trường mục tiêu lo ngại về quyền riêng tư:
  Ở nhiều quốc gia, ảnh đại diện được xem là rất riêng tư. Có thể bạn sẽ muốn tránh sử dụng nút Tiếp tục dưới tên {Name} trong trường hợp này vì nút sẽ hiển thị ảnh đại diện của người đang đăng nhập.

Thực tiễn tốt nhất dành cho nút Đăng nhập

Vui lòng tuân thủ các Thực tiễn tốt nhất nói chung khi sử dụng Đăng nhập Facebook. Cần tuân thủ 2 thực tiễn tốt nhất sau đây khi sử dụng nút Tiếp tục dưới tên {Name}:

• Cung cấp cách đăng xuất (bắt buộc theo chính sách)
• Thử nghiệm và đo lường - Xác định tác động của nút này lên nhận thức và chuyển đổi của người dùng

Một số thực tiễn tốt nhất khác có thể có:

• Rõ ràng về những gì thao tác Đăng nhập sẽ tiến hành
• Sử dụng phần giữ chỗ/hình xoay tròn khi nút Đăng nhập đang tải và xóa khi nút được tải. Một ví dụ về mã này:

<script>
var finished_rendering = function() {
  console.log("finished rendering plugins");
  var spinner = document.getElementById("spinner");
  spinner.removeAttribute("style");
  spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
    style="
        background: #4267b2;
        border-radius: 5px;
        color: white;
        height: 40px;
        text-align: center;
        width: 250px;">
    Loading
    <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="large"
    data-button-type="continue_with"
    data-use-continue-as="true"
    ></div>
</div>

Cài đặt

Ngoài những cài đặt trên, bạn cũng có thể thay đổi các cài đặt sau:

Chuyển

Các nút cũ sẽ được chuyển thành nút mới. Bảng sau sẽ hiển thị ánh xạ.

Nút Tiếp tục với tư cách {Name} mới sẽ có thông số gọi là button_type mà các nút cũ không yêu cầu. Đây là cách bạn chỉ định nút Tiếp tục với Facebook hoặc Đăng nhập bằng Facebook. Nếu bạn không chỉ định loại nút, nút này sẽ được hiển thị là nút nhỏ mới. Kích thước này là trung bình khi so sánh với các nút cũ. Với trường hợp x-large, kích thước sẽ thu gọn một chút. Nếu bạn chỉ định thông số button_type, các nút của bạn sẽ hiển thị như chỉ định.

Bạn có thể khiến các nút tải nhanh hơn bằng cách khởi chạy SDK JavaScript sớm nhất có thể. Tuy nhiên, hệ thống sẽ không thể tải các nút cho đến khi trang web và JavaScript đã tải xong, sau đó, hệ thống có thể tạo iframe và tải các tài nguyên để hiển thị nút.

 <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="<medium, large>"
    data-button-type="continue_with"
    data-width="<100% or px>"
    data-scope="<comma separated list of permissions, e.g. public_profile, email>"
></div>
}

Bản địa hóa:

Việc tải nút ở ngôn ngữ khác yêu cầu tải SDK JavaScript cho ngôn ngữ đó. Để biết thêm thông tin về bản địa hóa SDK JavaScript, hãy xem Bản địa hóa bằng Plugin xã hội và SDK JavaScript.

Câu hỏi thường gặp

Sử dụng nút này như thế nào để đăng nhập người dùng?

Sau khi ai đó nhấp vào nút Đăng nhập và chấp nhận hộp thoại đăng nhập - hoàn tất quy trình Đăng nhập - ứng dụng của bạn hiện có thể dùng SDK Facebook dành cho JavaScript để thực hiện các lệnh gọi API thay mặt người đó.

Chúng tôi không yêu cầu thiết lập thêm ở đây, tuy nhiên, bạn có thể dùng tùy chọn cài đặt onlogin trong nút này để kích hoạt hàm JavaScript của riêng mình. Hàm này sẽ chạy khi đăng nhập.

Tôi có thể sử dụng nút Đăng nhập với mã đăng ký phía máy chủ không?

Bạn có thể, tuy nhiên, bạn vẫn cần dùng một phần SDK JavaScript. Sau khi quá trình đăng nhập bắt đầu bằng cách nhấp vào nút, SDK sẽ có quyền truy cập vào đối tượng authResponse bằng FB.getLoginStatus(). Bạn có thể sử dụng chức năng này để chuyển đối tượng phản hồi đến mã phía máy chủ nhằm hoàn tất mọi đăng ký có tại đó.

Tôi có thể sử dụng nút Đăng nhập để yêu cầu lại một quyền mà người dùng đã từ chối không?

Nút Đăng nhập không hỗ trợ yêu cầu lại vì việc yêu cầu quyền đã bị từ chối không phù hợp với mô tả trên nút. Nếu bạn cần yêu cầu lại một quyền, hãy thiết lập nút tùy chỉnh và sử dụng FB.login() như mô tả trong tài liệu Đăng nhập Facebook dành cho Web.

Nút không hiển thị.

Các thẻ <div> được chuyển thành nút hiển thị bằng công nghệ chúng tôi gọi là XFBML. Công nghệ này dựa vào JavaScript trong SDK để phân tích cú pháp trang và thực hiện thay thế. Nếu bạn sửa đổi nội dung trang theo cách động để thêm div sau khi phương thức SDK init đã chạy (ví dụ: trong một hộp thoại được cấu trúc động), bạn cần gọi lại FB.XFBML.parse() để quá trình chuyển đổi có hiệu lực.