Nút Đăng nhập

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

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

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

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

Nút Tiếp tục với Facebook sẽ thay thế các phiên bản cũ hơn của nút Đăng nhập. Hãy xem phần Di chuyển để biết thêm thông tin.

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 là "Tiếp tục dưới tên {persons' name}" và có thể bao gồm ảnh đại diện trên Facebook của người đó nếu họ đã đăng nhập vào Facebook bằng 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 phần Bắt đầu nhanh dành cho JavaScript SDK. Để kích hoạt nút Tiếp tục dưới tên {Name}, hãy thêm data-use-continue-as="true" vào cài đặt cho nút của bạn.

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 kích thước vượt quá thông số tối đa, nút này sẽ mặc định đặt về chiều rộng tối đa.

Cách làm 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 để gia tăng số lượt click và lượt 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ũng có thể thấy bối rối nếu không mong 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ử dùng các nút JavaScript SDK mới có nội dung là "Tiếp tục với Facebook".

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

Chúng tôi phục vụ cơ sở người dùng trên toàn cầu và mỗi khu vực sẽ có kỳ vọng người dùng khác nhau. Hãy tôn trọng những 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 được kết nối với người khác. Chúng tôi nhận 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 sử dụng 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, nhiều khả năng người dùng sẽ 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 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ư. Bạn nê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.

Cách làm tốt nhất cho nút Đăng nhập

Vui lòng tuân thủ các Cách làm tốt nhất chung khi sử dụng phương thức Đăng nhập bằng Facebook. Bạn cần tuân thủ 2 cách làm 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 của người dùng và lượt chuyển đổi

Một số cách làm tốt nhất khác mà bạn có thể áp dụng:

• Nêu rõ những gì thao tác Đăng nhập sẽ tiến hành
• Sử dụng phần giữ chỗ/biểu tượng xoay khi nút Đăng nhập đang tải và gỡ khi tải xong nút. Dưới đây là ví dụ minh họa 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. Dưới đây là bảng trình bày quá trình đối ghép.

Nút Tiếp tục dưới tên {Name} mới có một thông số tên là button_type mà các nút cũ không yêu cầu. Dưới đâ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 so 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ể thúc đẩy tốc độ tải nút bằng cách khởi chạy JavaScript SDK 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:

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

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 Facebook SDK 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?

Có thể, nhưng bạn vẫn cần dùng một phần JavaScript SDK. 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 thông qua FB.getLoginStatus(). Bạn có thể dùng hàm này để chuyển đối tượng phản hồi vào 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 về phương thức Đăng nhập bằng Facebook dành cho web.

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

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 đang 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() thì quá trình chuyển đổi mới có hiệu lực.