Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Hướng dẫn cài Đăng nhập với Google, Facebook, Instagram cho Discourse

Hướng dẫn cài Đăng nhập với Google, Facebook, Instagram cho Discourse. Do là một diễn đàn nên việc đăng nhập của các thành viên có nhanh chóng hay thuận tiện hay không là một trong những yếu tố quan trọng không kém. Discourse hỗ trợ rất nhiều kiểu đăng nhập khác nhau và bạn chỉ cần lấy 2 mã ID lẫn Secret của một dịch vụ nào đó như Facebook, Google, Instagram,… để sử dụng tính năng này.

Bài viết này là một phần của bài viết:

Mình đã xây dựng một website Forum bằng Discourse như thế nào?

Trong bài này mình sẽ hướng dẫn chúng ta phải làm những bước gì để cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse. Tất nhiên, những bước làm thì gần như tương tự nhau cả, đôi khi khác một vài bước bởi những thằng khác nhau nhưnng chung quy thì cũng chỉ để lấy 2 đoạn mã quan trọng:

  • Client ID
  • Client Secret

Bạn đừng lo lắng là nó sẽ ảnh hưởng bảo mật hay mất thông tin gì cả, tất cả những điều này đều được làm thông qua API do chính Facebook, Google, Instagram cung cấp. 2 đoạn mã đó giống như chìa khóa quan trọng để họ hỗ trợ chúng ta. Mình cũng sẽ cập nhật thêm nhiều loại đăng nhập khác như Github – Twitter – … trong bài này khi có thời gian 😎

Ok bắt đầu thôi.

Cài đặt Đăng nhập bằng Google cho trang Discourse

Đầu tiên, cài đặt Đăng nhập bằng Google cho trang Discourse. Thật ra, chúng ta đã được hỗ trợ ban đầu bởi Discourse là đăng nhập bằng Email rồi, tuy nhiên để thuận tiện hơn thì đăng nhập bằng Google là một lựa chọn khá ok hơn. Discourse sẽ dùng thông tin Gmail để tạo tài khoản mà user không cần phải làm những việc giống như nhập liệu bằng tay. Để bắt đầu, trước tiên bạn truy cập vào:

https://console.developers.google.com

Đây là trang dành cho những Developer các sản phẩm của Google. Hiện tại, Google có thể đòi hỏi bạn phải cung cấp thẻ VISA để xác nhận tài khoản Google Cloud Service thì mới có thể sử dụng. 😆Mấy năm trước, Google cho làm bước này miễn phí, tuy nhiên từ khi họ thu phí Google Maps API và dần chuyển mọi thứ về Google Cloud Service, để lấy được key thì bạn phải xác nhận thanh toán trước. Bạn yên tâm, chỉ là add thẻ VISA/MasterCard/… vào thôi, không mất tiền đâu (nếu có thì sẽ bị trừ $1 để họ kiểm tra thẻ, sau đó họ sẽ trả lại ngay.)

Sau khi bạn đã đăng nhập vào Dashboard, giao diện của Google sẽ giống như bên dưới, bạn chọn vào vùng khoanh đỏ để tạo một project mới.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Tại đây, Google cũng sẽ list ra tất cả những Project mà bạn đang sử dụng kèm với ID. Hiện tại thì mình có 4 project đang dùng Google.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen
Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Tại đây, bạn có thể điền tên Project theo ý thích. Lưu ý là Google cũng giới hạn số lượng Project được tạo, mình hiện tại đang ở 21 projects, đối với tài khoản mới là 5 thì phải. Tuy nhiên, nếu cần thì bạn cứ liên hệ họ sẽ mở giới hạn ra giống như Amazon Web Services ấy 😎Mở nhiều trừ khi bạn có nhiều dự án thôi, chứ nó tốn lúa phết đấy.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Sau khi đã tạo Project, bạn chọn theo các bước ở trên để tiến hành điền thông tin OAuth cho project, những bước cơ bản trong thiết lập thôi nên không có gì khó cả.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Kéo xuống dưới là phần khá quan trọng đấy, bởi phần này bao gồm 3 link liên quan đến trang của bạn như Quyền riêng tư và Điều khoản dịch vụ. Thật ra cả 3 link này đều được Discourse tạo cả rồi, chúng ta chỉ cần copy thôi, còn về nội dung thì sau này bạn có thể tự viết theo ý mình 😂hoặc thuê luật sư.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Để có được link các trang, bạn vào trang discourse và chọn vào logo Hamburger, gần cuối có thấy mục giới thiệu. Bấm vào thì sẽ thấy chuyển sang trang có mấy nút này. 🤗Copy link và paste vào thôi. Đây hình hướng dẫn ở dưới này. ❤️

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Sau khi Save xong, bạn kéo lên để sang Tab đầu tiên là Credentials. Tại đây bạn bấm vào nút xanh để chọn option phù hợp nhu cầu.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen
Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Do chúng ta hiện tại đang tạo Đăng nhập bằng Google cho trang Discourse nên bạn chọn vào phần OAuth client ID nhé 😄Mấy cái kia thì cũng dễ, mò đi bạn sẽ thấy nó “Blown your mind”.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

OAuth hiện tại đang ở phiên bản 2.0 và có các lựa chọn ứng dụng như vậy. Chúng ta đang cần dùng cho website Discourse nên chọn Web application

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Sau khi chọn Web application, bạn sẽ có thêm một phần gọi là Restrictions. Đây là phần quan trọng nhất trong quá trình tạo Đăng nhập bằng Google cho trang Discourse nhé.

  • Ở link đầu tiên thì bạn copy url của trang Discourse bỏ vào, nó là link url trang chủ luôn.
  • Ở link thứ 2 bạn copy một url theo dạng như sau:

https://example.com/auth/google_oauth2/callback

Nghĩa là url thứ 2 bạn thêm phần tiền tố in đậm sau url trang chủ. Đây là Url giúp Google gọi lại trang web của bạn để xác nhận đăng nhập. Nếu như bạn điền sai Url này thì sẽ không thể đăng nhập bằng Google được bởi nó sẽ xảy ra lỗi, Google không xác minh được Website của bạn đấy.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Sau khi bấm Create thì Google sẽ trả cho bạn 2 thông tin quan trọng nhất mà chúng ta cần ở ban đầu đã nói 🎉Đó là Client IDClient Secret.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Sau khi có thông tin, bạn quay trở lại trang Discourse và truy cập vào Bảng điều khiển (Admin). Search cụm từ “google oauth” để tìm các option cần thiết.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Thường thì trang Discourse sẽ trả lại bạn 3 thông tin như trên. Bạn check để bật Đăng nhập bằng Google và paste 2 mã Google vừa cho vào 2 ô này. Nhớ bấm Check hết để lưu lại.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Đấy, vậy là xong rồi. Bạn đăng xuất ra nếu đang có tài khoản, bạn sẽ thấy một nút mới Đăng nhập với Google. Bấm vào thì Google sẽ mở cửa sổ nhỏ để bạn đăng nhập bằng tài khoản Google thôi. Điều này tương tự như các website thông thường. 🎉

Cài đặt Đăng nhập bằng Facebook cho trang Discourse

Kế tiếp, cài đặt Đăng nhập bằng Facebook cho trang Discourse. Cụm từ “Login with Facebook” có lẽ đã quá quen thuộc rồi nên chúng ta không cần giới thiệu gì nữa. Khá nhiều website hiện nay từ trong nước cho đến quốc tế, họ đều cung cấp một lựa chọn đăng nhập bằng tải khoản Facebook để tạo tài khoản. Đây là một yếu tố gần như mặc định bởi số người sử dụng Facebook đã là hơn 2,5 tỉ người, mọi người cũng đều muốn đăng nhập bằng Facebook chứ không muốn nhập tay. Chính vì lý do này mà chúng ta cần phải tích hợp Đăng nhập bằng Facebook cho trang Discourse, một trang phát triển diễn đàn là chính. Cũng giống như Google, chúng ta cũng phải cần truy cập vào:

https://developers.facebook.com/

Đây là trang dành cho những Developer xài các sản phẩm của Facebook. Với Facebook, chúng ta không cần phải add thẻ thanh toán như Google, bạn chỉ cần đăng nhập và sử dụng thôi.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Sau khi vào trang này, bạn chọn mục Ứng dụng của tôiThêm ứng dụng mới để tiến hành tạo Project giống như phần trên thôi. Facebook không gọi Project giống Google mà họ gọi là Ứng dụng.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Vẫn là những thông tin cơ bản ban đầu thôi. Bạn điền xong thì chọn Tạo ID ứng dụng

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Trong Bảng điều khiển, bạn sẽ thấy rất nhiều ứng dụng của Facebook. 😎Từ từ mò và sử dụng hết thử xem, họ có một hệ sinh thái không thua gì Google đâu. Hiện tại, nhu cầu của chúng ta là tạo nút Đăng nhập bằng Facebook cho trang Discourse nên mình chọn Thiết lập trong phần Đăng nhập Facebook.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Facebook cũng hỏi bạn tạo Đăng nhập Facebook để dùng cho mục đích gì. Tất nhiên, chúng ta chọn Web rồi 🎉

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Sau khi chọn. bạn đến phần Cài đặt và bỏ url callback vào mục URL chuyển hướng OAuth hợp lệ. Phần này tương tự như phần url callback cho Google ấy. Đường dẫn callback của Facebook sẽ có dạng:

https://example.com/auth/facebook/callback

Lưu ý là bước này rất quan trọng nhé. Nếu nhập sai URL callback là bạn sẽ không thể Đăng nhập bằng Facebook cho Discourse được bởi Facebook không xác minh được trang của bạn. Bạn có thể xem các nút ở phía trên để tinh chỉnh cho phù hợp nhu cầu, mặc định Facebook đã chỉnh sẵn rồi, mình thấy cũng không cần chỉnh gì nhiều.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Kế tiếp, bạn vào tab Thông tin cơ bản để điền những thông tin lum la khác như Quyền riêng tư và Điều khoản dịch vụ. Phần trên, mình đã chỉ bạn cách lấy những thông tin này rồi đó.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen
Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Bạn lấy và paste vào cho hợp lệ thôi. 🚀

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Sau khi điền xong và lư lại. nhìn lên trên xíu bạn sẽ thấy ID ứng dụngKhóa bí mật của ứng dụng. Đó chính là Client IDClient Secret mà chúng ta đang cần. À bạn cũng cần phải bật nút gạt bên trên để mở ứng dụng nha, quên là bạn sẽ gặp lỗi đó.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Sau khi có thông tin cần thiết. Bạn vào Admin – Xác lập trong trang Discourse và search cụm từ “facebook ” để lọc ra các option quan trọng cho phần này. Check vào ô kích hoạt và paste 2 đoạn mã chúng ta đã có vào sau đó Check để lưu lại.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

🎉Bạn đã có nút Đăng nhập bằng Facebook rồi đó, nút này hoạt động tương tự như các trang mà bạn thường thấy thôi. Dễ dàng đúng hông!.

Cài đặt Đăng nhập bằng Instagram cho trang Discourse

Với hơn 1 tỉ người dùng thường xuyên hiện nay, Instagram đang dần trở thành một trong những mạng xã hội phổ biến nhất thế giới. Nhiều người thậm chí dùng mạng xã hội hình ảnh này chính và bỏ luôn cả Facebook. Chính vì điều này mà nhiều trang hiện nay tích hợp nút đăng nhập bằng Instagram cho trang web để giúp cho mọi người dễ dàng hơn trong quá trình sử dụng sản phẩm.

Hiện tại, Instagram đã thay đổi API và không cho các ứng dụng bên thứ 3 có thể lấy được Email để tạo nút đăng nhập. Chính vì điều này mà chúng ta hiện tại vẫn chưa thể tạo nút này được và gặp phải lỗi mặc dù có nút Đăng nhập bằng Instagram. Mạng xã hội hình ảnh này nói đang tìm giải pháp để giúp các bên có thể tích hợp nút đăng nhập trong thời gian sớm nhất. Chúng ta cần phải chờ thôi.

Trong phần này, mình sẽ hướng dẫn cách tạo nút Đăng nhập bằng Instagram cho trang Discourse. Đôi khi nút này khiến cho các thành viên của diễn đàn cảm thấy thích hơn đó 🎉

Để tạo nút Đăng nhập bằng Instagram cho trang Discourse. Đầu tiên bạn vào đường dẫn dưới đây, đó là trang của Instagram dành cho các Developer để phát triển.

https://www.instagram.com/developer/

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Sau khi đăng nhập tài khoản, bạn chọn Register Your Application

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Hoặc bạn vào mục Manage Clients và chọn Register a New Client. Tại đây thì Instagram cũng list ra các ứng dụng bạn đang có.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Vẫn là những thông tin quan trọng mà chúng ta cần điền vào như url callback hay url trang Quyền riêng tư. Bạn có thể xem lại 2 phần trên để hiểu cách lấy những thông tin này ra. Cũng khá dễ dàng thôi.

Url callback của Instagram sẽ có dạng:

https://example.com/instagram/callback

Bạn lưu ý là phải điền đúng nhé. Url callback của Instagram có phần khác so với Google và Facebook.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Sau khi điền đầy đủ thông tin và tạo. Bạn sẽ được list ra hộp thông tin ứng dụng mà mình đã tạo. Chọn Manage để quản lý và xem các thông tin khác.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Tại đây bạn sẽ lấy được Client IDClient Secret mà chúng ta cần để thêm vào cho trang Discourse.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Bạn copy thông tin đó và paste vào tương tự như tạo Đăng nhập bằng Google hay Facebook thôi. Check để lưu lại. Vậy là xong rồi 🎉

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Bạn sẽ thấy một nút nữa là Đăng nhập bằng Instagram. That’s it!!!!!!

Hướng dẫn đăng nhập bằng nhiều dịch vụ khác

Discourse hiện tại hỗ trợ rất nhiều kiểu đăng nhập khác và 3 kiểu trên là phổ biến nhất. Ngay cả diễn đàn của Discourse cũng sử dụng rất nhiều kiểu đăng nhập khác nhau giúp cho các thành viên có thể dễ dàng hơn tham gia cộng đồng.

Hướng dẫn cài đặt đăng nhập bằng Google, Facebook, Instagram cho Discourse - HuuPhongNguyen

Tất nhiên mình sẽ viết bài hướng dẫn hết tất cả, hoặc bạn có thể tự mày mò để nâng cao kỹ năng. Chung quy thì chúng ta vẫn sẽ cần 2 thông tin Client ID và Client Secret thôi và cách lấy cũng giống như 3 thằng trên. Những anh tài này sẽ có đầy đủ hướng dẫn cả, bạn cứ mò là được.

  • Cài đặt Đăng nhập bằng Github cho trang Discourse (coming soon)
  • Cài đặt Đăng nhập bằng Yahoo cho trang Discourse (coming soon)
  • Cài đặt Đăng nhập bằng Twitter cho trang Discourse (coming soon)

Kết 🎉

Vậy là mình đã hướng dẫn xong cách cài đặc đăng nhập bằng Google, Facebook, Instagram cho trang Discourse rồi đó. Thật ra cũng không có gì khó hay đòi hỏi kỹ năng Tech nhiều quá. Tất nhiên những cách này áp dụng cho cả những trang web tự built hay xây bằng WordPress luôn chứ không riêng gì Discourse cả. Giờ thì pha cà phê uống thôi 😉

Nguồn mình tham khảo để viết bài này:

  • Lalonde, N. (2014) Configuring Google login for Discourse, Available at: https://meta.discourse.org/t/configuring-google-login-for-discourse/15858 (Accessed: 21 Feb. 2019)
  • Atwood, J. (2014) Configuring Facebook login for Discourse, Available at: https://meta.discourse.org/t/configuring-facebook-login-for-discourse/13394 (Accessed: 21 Feb. 2019)
  • EW (2016) Configuring Instagram login for Discourse, Available at: https://meta.discourse.org/t/configuring-instagram-login-for-discourse/51642 (Accessed: 21 Feb. 2019)
  • Cheng (2018) Tạo đăng nhập bằng Google cho diễn đàn Discourse, Available at: https://cheng.vn/discource/tao-dang-nhap-bang-google-cho-dien-dan-discourse/ (Accessed: 21 Feb. 2019)
  • Cheng (2018) Tạo đăng nhập bằng Facebook cho diễn đàn Disourse, Available at: https://cheng.vn/discource/tao-dang-nhap-bang-facebook-cho-dien-dan-disourse/ (Accessed: 21 Feb. 2019)

Bài viết tương tự nên đọc:

Đánh giá bài viết:

Twitter
Facebook
LinkedIn
Email
Print