Viết Chức Năng Login Bằng Tài Khoản Facebook

Chắc hẳn sinh hoạt đây có nhiều bạn đã gặp mặt nút “Đăng nhập bởi Facebook” khi bạn đăng cam kết hoặc đăng nhập trên một website như thế nào đó. Không ít người dân dùng hiện giờ rất mê say nút này vì chưng họ chỉ việc sử dụng tài khoản Facebook có sẵn của họ, nên sẽ không hẳn mất thời gian đăng ký thông tin tài khoản mới và sau đây họ cũng không cần thiết phải ghi nhớ tài khoản và mã singin nữa. Do vậy khá là nhân thể lợi.

Bạn đang xem: Viết chức năng login bằng tài khoản facebook

Bạn sẽ xem: Viết công dụng login bằng thông tin tài khoản facebookBạn đã xem: Viết công dụng login bằng thông tin tài khoản facebook

Tính năng này sẽ giúp tỷ lệ đăng ký trên site của công ty được nâng cấp đáng đề cập đấy. Với ucozfree.comệc lượng người tiêu dùng Facebook ngày càng lớn lao như hiện tại nay, thì chắc chắn là bạn tránh việc bỏ qua hào kiệt này đề nghị không?

Ngoài ra, ucozfree.comệc khuyến khích người tiêu dùng đăng nhập bằng những tài khoản mạng xã hội có sẵn như này đang còn có ích cho các bạn khi tiến hành các chiến dịch kinh doanh sau này nữa cơ.

Vậy còn chần chờ gì nữa mà không chế tác ngay nút “Đăng nhập bằng Facebook” mang lại website WordPress của bạn? Hãy thuộc xem phía dẫn của chính mình dưới đây nhé.


*

Tính năng singin vào các trang website với tài khoản Facebook tất cả sẵn rất mau lẹ và thuận tiện cho tất cả chủ trang web và khách truy cập!

Tính năng singin vào những trang website với thông tin tài khoản Facebook tất cả sẵn rất nhanh lẹ và thuận tiện cho tất cả chủ website và khách hàng truy cập!

Bước 1: thiết lập plugin Nextend Social Login

Có tương đối nhiều plugin rất có thể giúp bạn cài để nút “Đăng nhập bởi Facebook” bên trên website. Tuy nhiên, plugin Nextend Social Login đang là plugin tốt nhất với các lượt người dùng và phản nghịch hồi tốt nhất hiện nay.

Plugin này còn có khả năng thiết lập cho trang web của doanh nghiệp tính năng Đăng cam kết và Đăng nhập bằng những mạng buôn bản hội không những với Facebook mà còn có cả Pinterest, Google, Twitter… hoặc các nền tảng khác như Paypal, Amazon, Disqs,…

Điều này rất tiện nghi phải không nào? tiếng hãy thuộc mình học tập cách thiết đặt plugin trẻ trung và tràn trề sức khỏe này nhé.Đầu tiên, vào Admin Dashboard (Bảng tinh chỉnh Quản trị ucozfree.comên) của WordPress, bấm lựa chọn mục Plugins > showroom New để thêm Plugin mới cho trang web và tìm plugin này theo từ khóa “Nextend Social Login”.

Sau đó bạn sẽ thấy plugin mang tên “Nextend Social Login & Register (Facebook, Google, Twitter)” với biểu tượng hình ổ khóa xanh ở ngay kết quả đầu tiên. Bấm vào Install Now để thiết đặt và hóng một vài ba giây rồi ấn tiếp Activate ngay lập tức tại đó nhằm kích hoạt plugin.


*

Tiếp theo, bên trên Admin Dashboard bạn hãy vào mục Settings > Nextend Social Login, liên tiếp kích lựa chọn mục Settings của plugin này để tùy chỉnh thiết đặt cho nó.

Lúc này trên screen hiện ra không ít tùy chọn thiết đặt với những nền tảng không giống nhau, bản thân sẽ trả lời từng nền tảng trong các bài ucozfree.comết tiếp sau đây. Còn bây giờ, các bạn hãy click vào nút Getting Started của ô Facebook nhé.


*

Cài để plugin Nextend Social Login

Màn hình bây giờ sẽ hiện lên một loạt các chỉ dẫn cách setup Facebook tiện ích (16 bước). Mình đã hướng dẫn tiến hành các làm việc này một giải pháp trực quan lại tiếp dưới đây nhé.

Bước 2: thiết lập Facebook App

2.1. Đăng ký kết / Đăng nhập thông tin tài khoản Facebook for Developers

Bạn hãy truy cập vào đường links mà plugin yêu thương cầu: https://developers.facebook.com/apps/. 


*

Cài để Facebook App

Khi trang web “Facebook for developer” hiện lên, bạn hãy kích lựa chọn “Register Now” ở góc phía trên bên phải màn hình để đăng ký tài khoản Facebook giành riêng cho nhà phạt triển.


*

Trang này đang yêu cầu thường xuyên đăng nhập bằng thông tin tài khoản facebook của bạn. Nên lựa chọn tài khoản Facebook mà bạn muốn dùng để thống trị trang web và thường xuyên bấm Next để đến bước tiếp theo.

Trong số những lựa lựa chọn mà Facebook for developer chỉ dẫn để diễn tả về bạn, các bạn hãy chọn một cái bất kỳ. Mình cũng không chắc chắn về sự khác biệt giữa các lựa lựa chọn này lắm, nên tại đây mình lựa chọn “Other”.

2.2 tạo nên một Facebook App

Tiếp theo, click chuột nút Create New App để bắt đầu tạo vận dụng Facebook new (tương ứng với cách thứ 3 nhưng mà plugin Nextend Social Login hướng dẫn).

Bây giờ, bạn hãy điền một cái tên cho tiện ích vào ô Display Name với email của khách hàng vào ô Contact Email làm sao để cho tiện ucozfree.comệc làm chủ sau này. Sau đó, bạn click vào Create tiện ích ID để tạo ID cho áp dụng Facebook mà chúng ta sắp sửa download nhé.

2.3. Tùy chỉnh cho Facebook tiện ích mà chúng ta vừa tạo

Trên hành lang cửa số tiếp theo, chớ vội chọn kịch phiên bản Integrate Facebook Login nhưng trước hết hãy vào mục Settings > Basic nghỉ ngơi bảng điều khiển và tinh chỉnh bên trái vẫn nhé.

Một hình ảnh như sau đang hiện ra:

Bạn điền những thông tin ở các mục sau vào nhé:

App Domains: điền tên miền website của công ty vàoPrivacy Policy URL: Điền đường truyền đến phần Privacy Policy bên trên website của người sử dụng vào đây.Terms of Serucozfree.comce URL: Điền đường truyền đến phần Điều khoản thực hiện trên website của khách hàng vào đây.

Ví dụ như ngơi nghỉ website của mình, các đường dẫn này mình hầu hết đang để sẵn sinh sống chân trang, mình chỉ ucozfree.comệc copy các đường dẫn này vào các ô khớp ứng trên là xong.

Sau khi đã điền không thiếu cả 3 mục thì bấm nút Save Changes ở dưới các trường tin tức đó.

Vẫn trong hành lang cửa số giao diện của Facebook App ai đang tạo, bạn tìm mục PRODUCTS (+) ở menu phía trái và bấm vào dấu cộng (+). Dấn tiếp vào nút Set Up vào ô Facebook Login.

Lúc này làm việc mục PRODUCT(+) vẫn hiện thêm tên thành phầm mà các bạn vừa new thêm vào là Facebook Login.

Bây giờ, bên trên bảng điều khiển và tinh chỉnh bên trái, các bạn hãy vào mục Quickstart của Facebook Login. Vào mục này sẽ có được 4 tùy chọn mang đến bạn. Hãy click vào mục Web vì bạn đang muốn thêm nút đăng nhập Facebook vào 1 trang web.

Màn hình tiếp theo sẽ có một ô trống title Site URL. Hãy điền băng thông trang web của doanh nghiệp vào đây cùng bấm Save để lưu.

Tiếp đến bạn kích chọn mục Settings ngay trên mục Quickstart nhằm tùy chỉnh thiết lập cho sản phẩm này của bạn.

Tìm mang lại mục Client OAuth Setting cùng điền một URL gồm dạng như sau vào ô Valid OAuth Redirect URLs:

http://tên-miền-của-bạn/wp-login.php?loginSocial=facebook.

Bạn cứ copy y nguyên cái link của chính bản thân mình rồi cụ chỗ “tên-miền-của-bạn” bằng đường link đến trang web của khách hàng là được. Bấm Save Changes để lưu lại.

2.4. Kích hoạt Facebook tiện ích bạn vừa tạo

Sau kia hãy quan sát lên phía trên bên đề nghị của trang web, có 1 nút công tắc nguồn màu xám cạnh chữ Status – In Development đã ở tâm lý tắt (Off). Bấm chuột để mở nó lên.

Xem thêm: Cách Chơi Liên Minh Huyền Thoại Cho Người Mới Bắt Đầu, Cẩm Nang Liên Minh Huyền Thoại Cho Người Mới Chơi

Nhớ bấm Save Changes nhằm lưu lại chuyển đổi này nhé.

Bước 3: Tích hợp Facebook tiện ích với plugin trên trang web của bạn

Bây giờ, hãy trở lại trang hướng dẫn chế tác Facebook ứng dụng ở mục Setting của plugin Nextend Social Login bên trên trang WordPress của bạn.

Kéo xuống dưới với bấm I am done web1_setting my Facebook App để chứng thực là chúng ta đã tạo dứt app.

Bạn sẽ được chuyển sang đồ họa như dưới đây.

Bạn hãy điền thông tin vào những ô: ứng dụng ID, tiện ích Secret rồi nhấn Save Changes.

Để có được thông tin điền vào nhị ô này, các bạn hãy làm như sau:

Quay lại trang Facebook for Developer, vào mục Settings > Basic, các bạn sẽ thấy hai thông tin bạn cần. Giờ đồng hồ chỉ ucozfree.comệc copy vào trang cài đặt plugin trên website của bạn thôi.

Lúc này, một thông báo là “Your configuration needs lớn be verified” sẽ hiện lên. Bạn chỉ việc nhấn vào Verify Settings để tuyệt đối các cài đặt bạn vừa thực hiện.

Ngay sau đó, một cửa sổ mới sẽ hiển thị và yêu thương cầu bạn đăng nhập bằng tài khoản Facebook. Các bạn hãy dùng tài khoản mà vừa nãy bạn dùng để làm đăng cam kết Facebook for Developer để đăng nhập nhé với nhấn nút Continues as… để hoàn vớ đăng nhập.

Lúc này plugin sẽ chuẩn xác các thiết lập của chúng ta thành công.

Tuy nhiên, tất cả thể bạn sẽ gặp một ô thông báo màu đá quý ghi là “Works Fine – Disabled” (như hình ảnh dưới đây). Câu chữ của thông tin này thực tế là “Hiện nay nhà cung ứng này không được được cho phép – người tiêu dùng không thể đăng ký hoặc đăng nhập bằng thông tin tài khoản Facebook”. Vị vậy, chúng ta hãy bấm vào nút Enable để có thể chấp nhận được Facebook tiện ích có hiệu lực hiện hành lên trang web của mình nhé.

Xong rồi hãy bấm Save Changes nhằm lưu lại.

Bước 4: tạo trang đăng nhập với nút “Đăng nhập bởi Facebook” trên trang web

Trong Admin Dashboard của WordPress, hãy tìm lựa chọn mục Pages cùng bấm Add New để chế tác một trang new cho website. Mình đặt tạm tiêu đề đến trang này là “Facebook tiện ích login for web”.

Trong phần câu chữ của trang này, các bạn hãy điền một đoạn shortcode là

vào với nhấn nút Publish bên đề nghị màn hình.

Vậy là bạn đã có một trang đăng nhập bằng thông tin tài khoản Facebook rồi đó.

Để kiểm tra, các bạn hãy copy đường truyền đến page mà chúng ta vừa tạo. Tiếp đến đăng xuất khỏi tài khoản bạn đang cần sử dụng trên website, rồi truy cập vào băng thông trên.

Bạn vẫn thấy một hình ảnh như bên dưới đây.

Và khi trở về để singin vào tài khoản admin của bạn, bạn cũng biến thành thấy gồm thêm một chắt lọc đăng nhập bằng Facebook như này nữa:

Vậy là bạn đã hoàn chỉnh ucozfree.comệc tạo nên nút singin bằng thông tin tài khoản Facebook rồi đó.

Bạn thấy đấy, nút đăng nhập bằng Facebook mặc định được ucozfree.comết là “Continue with Facebook”. Trong trường hợp bạn có nhu cầu đổi câu kia sang một lời lôi kéo khác, các bạn hãy làm như sau:

Trong Admin Dashboard, tìm tới mục Settings > Nextend Social Login, lựa chọn tab Buttons.

Bạn sẽ thấy có 3 ô nội dung khớp ứng với 3 tinh thần nút mà lại plugin Nextend Social Login này cung cấp. Bạn hãy lựa chọn 1 cái nhãn thương hiệu mới cho những nút bằng phương pháp sửa nội dung các ô đó.

Trong đó:

Login Label: Là nhãn hiển thị mang đến nút đăng nhập bằng Facebook. Ở đây thiết lập mặc định của plugin là “Continue with Facebook
”. Chúng ta có thể sửa lại là “Đăng nhập bằng Facebook” hoặc gì tùy thích.Link Label: Là nhãn hiển thị “Liên kết tài khoản với Facebook”. Mặc định là “Link tài khoản with Facebook”.Unlink Label: Là nhãn hiển thị “Hủy liên kết tài khoản cùng với Facebook”. Khoác định là “Unlink account with Facebook”.Default button: Nút Continue with Facebook được hiển thị mặc định có hình trạng như hình ảnh kết quả sinh sống trên. Nếu bạn có nhu cầu thay đổi gì thì nhấn vào Use Custom Button để cấu hình thiết lập tiếp nhé.

Chỉnh sửa xong bạn hãy bấm Save Changes để lưu lại những thay đổi.

Lưu ý

Nếu như khách truy vấn không thể đăng ký tài khoản mới bằng thông tin tài khoản Facebook của họ, thì các bạn hãy thử kiểm tra lại chỗ thiết lập cho thành ucozfree.comên bắt đầu theo như sau:Trên Admin Dashboard, vào mục Settings > General. Ở đây có 2 hộp tùy lựa chọn là “Membership” và “New User mặc định Role”.

Ở mục Membership hãy có lẽ rằng ô “Anyone can register” được khắc ghi tích để bất kỳ người nào cũng có thể đăng ký tài khoản trên website của bạn.

Trong tùy chọn New User mặc định Role, các bạn hãy đặt một vai trò mang định tương xứng cho tài khoản đk mới trên trang web của bạn. Ở trên đây mình chọn là “Customer”.

Lời kết

Mặc dù bài xích này khá là dài nhưng mình có thể bảo vệ với các bạn đây là một trong những bài hướng dẫn cụ thể nhất về phong thái tạo nút “Đăng nhập bằng Facebook” bên trên website WordPress với đã sử dụng plugin tốt nhất có thể cho ucozfree.comệc này.

Tuy nhiên không tính cách bên trên ra thì vẫn còn tương đối nhiều cách khác cho chính mình lựa chọn. Nếu khách hàng thông nhuần nhuyễn về CSS, PHP thì chúng ta cũng có thể chọn một bí quyết khác đó là chế tác nút “Đăng nhập bằng Facebook” bởi code và tất nhiên là không nên dùng plugin.Nếu các bạn biết còn biết phương pháp tạo nút ‘Đăng nhập bằng Facebook” cho website WordPress nào khác giỏi và đơn giản và dễ dàng hơn thì nên cùng share ở phần bình luận nhé. Cảm ơn chúng ta đã theo dõi!