Hoàng Web

Thiết Kế Website WordPress

Trang chủ » Web Development » Chèn hệ thống ứng dụng chat vào website với FireChat

Chèn hệ thống ứng dụng chat vào website với FireChat

by

Firebase là một cơ sở dữ liệu thời gian thực, bạn có thể làm rất nhiều thứ liên quan đến tích hợp tin nhắn thời gian thực vào website ví dụ thông báo có thành viên đăng ký mới.

Firebase đang xây dựng kho ứng dụng giúp bạn có nhiều lựa chọn hơn dựa trên nền tảng lưu trữ database của họ và FireChat là một ứng dụng chat mã nguồn mở mà họ đang phát triển. Bạn có tin không, việc tích hợp chat facebook vào website là điều không tưởng nhưng với FireChat bạn khá dễ dàng đưa hệ thống chat được viết bằng javascript tương tác sử dụng firebase location của bạn cung cấp, mọi dữ liệu bạn sẽ quản lý trên cơ sở dữ liệu của mình. Thật tuyệt vời phải không nào !

Với thư viện FireChat bạn không cần lập trình bên phía server, code được xây dựng và vận hành bởi firebase bạn hoàn toàn yên tâm nhưng nếu muốn sử dụng lưu lượng băng thông và dung lượng lưu trữ nhiều hơn bạn phải trả phí nâng cấp tài khoản.

Trước tiên bạn tải thư viện FireChat tại đây.

Yêu cầu

Để bắt đầu bạn cần có tài khoản firebase, nếu chưa có thì đăng ký lấy một tài khoản.

Sau khi tải về bạn up lên host và Chèn các file yêu cầu vào thẻ head như sau:

<script src='https://cdn.firebase.com/js/client/1.0.21/firebase.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js'></script>

Đừng quên thiếu thư viện jquery.
Thêm 2 file khởi tạo firechat có trong folder tải về gồm firechat-default.js và firechat-default.css.

<!-- Download from https://github.com/firebase/firechat -->
    <link rel='stylesheet' href='firechat-default.css' />
    <script src='firechat-default.js'></script>

Chuẩn bị ứng dụng lưu dữ liệu tin nhắn chat, tạo firebase db mới với tài khoản bạn đăng ký. Cái này mình có nói nguyên lý hoạt động cơ bản ở bài tạo ứng dụng thời gian thực với firebase.

Sử dụng lớp khởi tạo chat app FirebaseSimpleLogin, khai báo firebase location cho ứng dụng. Database này sẽ kết nối và sử dụng để lưu trữ trong quá trình firechat hoạt động.

var chatRef = new Firebase('https://<YOUR-FIREBASE>.firebaseio.com/chat');
var auth = new FirebaseSimpleLogin(chatRef, function(err, user) {
	
});

Thay địa chỉ firebase db của bạn.

Authentication

Firechat sử dụng Firebase Authentication và Security Rules, cung cấp giải pháp đăng nhập tài khoản linh hoạt bằng cách sử dụng tài khoản tự tạo hoặc sử dụng openID với hầu hết các nhà cung cấp dịch vụ hiện nay như: facebook, google, twitter, github..

Đoạn code đăng nhập ở trên sử dụng cách đăng nhập bằng dịch vụ thứ 3. FirebaseSimpleLogin có tích hợp các dịch vụ cho phép bạn đăng nhập với Facebook, Twitter, GitHub, Persona hoặc email / password.

Để bắt đầu sử dụng dạng authentication này bạn chèn thư viện firebase-simple-login.js vào trang web:

<script src="https://cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js"></script>

Tiếp theo, kích hoạt nhà cung cấp sẽ được phép đăng nhập vào ứng dụng firechat. Truy cập vào địa chỉ database https://.firebaseio.com và nhấn vào tab Login & Auth.
firebase-login-auth

Sử dụng hàm auth.login bạn có thể yêu cầu người dùng đăng vào một tài khoản chỉ định, chấp nhận 5 loại tài khoản: ‘twitter’, ‘facebook’, ‘github’, ‘persona’, ‘password’

var firechatRef = new Firebase('https://<your-firebase>.firebaseio.com');
var auth = new FirebaseSimpleLogin(firechatRef, function(error, user) { ... });
...
auth.login('twitter'); // or 'facebook', 'github, 'persona', 'password'

Ví dụ: tạo file chat.html và copy đoạn code dưới đây:

<!doctype html>
<html>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.firebase.com/js/client/1.0.21/firebase.js'></script>
    <script src='https://cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js'></script>

    <!-- Download from https://github.com/firebase/firechat -->
    <link rel='stylesheet' href='firechat-default.css' />
    <script src='firechat-default.js'></script>
  </head>
  <body>
    <script type='text/javascript'>
      // Create a new Firebase reference, and a new instance of the Login client
      var chatRef = new Firebase('https://<YOUR-FIREBASE>.firebaseio.com/chat');
      var auth = new FirebaseSimpleLogin(chatRef, function(err, user) {
        // Once authenticated, instantiate Firechat with our user id and user name
        if (user) {
          var chat = new FirechatUI(chatRef, document.getElementById('firechat-wrapper'));
          chat.setUser(user.uid, user.displayName);
        }
      });
    </script>
    <div id='firechat-wrapper'>
      <a href='#' onclick='auth.login("google");'>Login</a>
    </div>
  </body>
</html>

Nhớ là Sửa lại địa chỉ firebase app của bạn.
Nếu dịch vụ bạn đang đăng nhập được firebase authentication hỗ trợ, khi bạn nhấn vào login mà gặp lỗi Error: FirebaseSimpleLogin: The specified authentication type is not enabled for this Firebase, lỗi này thông báo trên Javascript console.
FirebaseSimpleLogin-error

Nghĩa là dịch vụ chưa kích hoạt, ví dụ ở trên mình authenticate bằng tài khoản google bạn truy cập vào https://.firebaseio.com (login nếu yêu cầu) chọn vào tab “Login & Auth” chuyển sang tab Google và check vào Enable Google Authentication.
firebase-login-auth-enable
Điền 2 thông tin Client ID và Client Secret của ứng dụng bạn tạo trên google tương ứng với tài khoản google của bạn, để lấy thông tin này bạn truy cập trang quản lý auth google console, chọn một trong các project bạn muốn làm việc với firechat dùng để xác nhận đăng nhập cùng trên tài khoản google của người dùng.
google-console-project
Nhấn tiếp APIs & auth->Credentials nhấn vào Create New Client ID nếu chưa có, sau đó copy lấy thông tin client ID và client secret rồi điền vào phần firebase login & auth ở trên.
google-console-project-credentials

Tải lại trang và nhấn vào link ‘login’. Bạn đăng nhập vào google bình thường và được chuyển qua popup xác nhận cho phép ứng dụng.
authenticate-firechat
Click vào nút chấp nhận để đi tiếp, ban có thể gặp lỗi này.
oauth2-error-redirect_uri_mismatch

Lỗi trên cho biết bạn khai báo sai thông số “REDIRECT URIS” trong project. Theo gợi ý ứng dụng firechat yêu cầu giá trị redirect uri là https://auth.firebase.com/auth/google/callback, sửa lại URI này vào mục REDIRECT URIS của google project.
Thực hiện đăng nhập lại, nếu vẫn gặp lỗi đó bạn khai báo địa chỉ oauth redirect chính là web đang chạy firechat, vào ô “Authorized Domains for OAuth Redirects” ví dụ của mình đang test trên localhost tạo file có URL: http://localhost/test/firechat
firebase-oauth-redirect

Giờ bạn thử đăng nhập lần cuối chắc chắn sẽ thành công và kết quả bạn thấy giao diện chat đã mở ra. Thật tuyệt !
firechat-demo

Bạn có thể login 2 tài khoản google ở 2 trình duyệt chrome & firefox để thử chat với nhau, chọn nick mới online trong danh sách và mời họ tham gia phiên chat private.
firechat-demo1

firechat-demo2

Lưu ý: bạn có thể giới hạn thời gian sử dụng phiên đăng nhập của tài khoản Facebook, Twitter, GitHub or Google sử dụng cho firebase bằng cách đặt giá trị Session Length. Mặc định tài khoản đăng nhập có thể duy trì trong 1 ngày (24h).
Bạn cũng thiết lập trong tab Login & Auth.
firebase-session-length

Khi bạn logout google cũng là thoát ứng dụng firechat. Cách đăng nhập tương tự với tài khoản facebook, twitter..

Dữ liệu firechat tổ chức trong firebase app

Bạn hoàn toàn xem dữ liệu lịch sử chat và những user đã sử dụng trong ứng dụng chat của bạn. Firechat sử dụng dữ liệu firebase của bạn để lưu giữ thông tin. Nếu bạn sử dụng tài khoản miễn phí sẽ giới hạn dung lượng lưu trữ và bằng thông, bạn có thể đặt chu kỳ và xóa các tin nhắn của người dùng khi không cần thiết tránh vượt quá giới hạn free account.
firechat-base-on-firebase

Custom Authentication

Nếu website bạn muốn tich hợp sẵn tính năng authentication, bạn có thể kết nối với firebase bằng cách tạo ra chuỗi bảo mật JSON Web Tokens (JWT).
Firebase cung cấp các thư viện trợ giúp bạn tạo ra chuỗi này với nhiều ngôn ngữ khác nhau:

.NET, Java, Node.js, PHP, Python, Ruby.

Ví dụ sau mình sử dụng PHP.
Bạn tải thư viện PHP ở trên và chép vào thư mục của xampp để thử nghiệm.
Thư viện yêu cầu cài đặt PHP-JWT và bạn có thể cài đặt nó sử dụng trình quản lý thư viện cho ứng dụng PHP.
Tại trang đăng ký user mới bạn cho chạy qua thư viện này để tạo chuỗi mật khẩu (token), lưu ý rằng bởi vì token cần cung cấp thông tin Firebase Secret của bạn do vậy không được để lộ thông tin này cho bất kỳ ai, chạy code php trên server bạn tin cậy tránh đánh cắp thông tin.

Tạo tokens

Tạo chuỗi token bạn truy cập vào ứng dụng Firebase, nhấn vào tab Secrets và nhấn nút Show bạn copy chuỗi bí mật đó vào đoạn code dưới đây. Tạo file Generating-Tokens.php với nội dung sau:

<?php
  include_once "firebase-token-generator-php-master/FirebaseToken.php";

  $tokenGen = new Services_FirebaseTokenGenerator("your-firebase-secret");
  $token = $tokenGen->createToken(array("uid" => "exampleID"), array("admin" => True));
  echo $token;
?>

Chuỗi token sinh ra sẽ là thông tin đầy đủ về user gồm các trường do bạn tự định nghĩa như nickname, fullname,..
Khai báo user meta vào tham số mảng đầu tiên của hàm createToken

Firebase cho phép bạn tạo và quản lý nhiều mã secret đề phòng trường hợp mã bị đánh cắp bạn có thể vô hiệu hóa nó bằng cách xóa chúng đi ngay lập tức.

firebase-secrets

Sau khi có được chuỗi token.
firebase-generate-tokens

Chúng ta không sử dụng cách đăng nhập bằng tài khoản dịch vụ với class FirebaseSimpleLogin, vì FirebaseSimpleLogin dành riêng cho hỗ trợ authenticate từ google, facebook, ‘github, ‘persona’, ‘password’ được quản lý trong ứng dụng firebase của bạn.

Thay vào đó bạn gọi hàm .auth với chuỗi token đại diện cho thông tin user vừa tạo ở trên. Ví dụ:

chatRef.auth('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhZG1...', function(error, authData) {
  if (error) {
    console.log("Login Failed!", error);
  } else {
    console.log("Login Succeeded!", authData);
	
  }
});

hoặc đăng nhập bằng token và firebase secret với hàm ‘authWithCustomToken’. Hai hàm đều thực hiện công việc login user tuy nhiên một số phiên bản mới hàm .auth không còn được sử dụng và thay thế bởi hàm authWithCustomToken.

var dataRef = new Firebase('https://samplechat.firebaseio-demo.com');
// Log me in
dataRef.authWithCustomToken(AUTH_TOKEN, function(error, authData) {
  if (error) {
    console.log('Login Failed!', error);
  } else {
    console.log('Authenticated successfully with payload:', authData);
  }
});

Một khi đăng nhập thành công bạn khởi tạo giao diện chat (firechat) và thiết lập phiên làm việc với user bởi đoạn code sau:

var chat = new FirechatUI(chatRef, document.getElementById('firechat-wrapper'));
chat.setUser(authData.auth.uid, "my user");

Copy vào hàm callback của auth khi error=false

chatRef.auth('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhZG1...', function(error, authData) {
  if (error) {
    console.log("Login Failed!", error);
  } else {
    console.log("Login Succeeded!", authData);
	var chat = new FirechatUI(chatRef, document.getElementById('firechat-wrapper'));
	chat.setUser(authData.auth.uid, "my user");	
  }
});

Gọi hàm setUser cần 2 giá trị: nick và tên hiển thị.
Kết quả:
firebase-own-auth

Bạn nên lưu thông tin token vào database, mỗi token gồm thông tin mặc định là:
expires: là một chuỗi timestamp đo lượng thời gian sử dụng, hoặc DateTime cho biết ngày hết hạn sử dụng. Mặc định sau 24h kể từ thời điểm tạo. Bạn có thể thiết lập giá trị timestamp này trong khi sinh chuỗi token. Ví dụ:

<?php
  include_once "FirebaseToken.php";

  $tokenGen = new Services_FirebaseTokenGenerator("<YOUR_FIREBASE_SECRET>");
  $token = $tokenGen->createToken(array("uid" => "exampleID"), array("expires" => mktime(1, 2, 3, 4, 5, 2006)));
?>

Thêm một số tùy chọn vào chuỗi token nên nhớ tôi nhắc lại mọi thông tin về user đều nằm trong chuỗi token, xem chi tiết. Ngoài ra, bạn có thể thiết lập quyền sử dụng cho user, nếu khai báo admin=>true mọi cảnh bảo bảo mật đều bỏ qua user được phép sử dụng những tính năng như admin.

<?php
  include_once "FirebaseToken.php";

  $tokenGen = new Services_FirebaseTokenGenerator("<YOUR_FIREBASE_SECRET>");
  $token = $tokenGen->createToken(array("uid" => "exampleID"), array("admin" => True));
?>

Nếu token hết hạn bạn sẽ phải tạo lại chuỗi cho user. Tùy theo cách bạn phát triển module đăng nhập cho firechat, mỗi user căn cứ vào nick và mật khẩu lưu các thông tin này vào nơi nào đó, đằng sau đó bạn lưu thêm giá trị token cho user. Nếu bạn đang sử dụng wordpress thì có thể tích hợp ngay vào trường user meta bằng cách tạo tùy biến user meta trong wordpress.

Các hàm tiện ích

Firebase.getAuth
Hàm kiểm tra tồn tại thông tin phiên làm của user.

var chatRef = new Firebase('https://your-db.firebaseio.com/chat');
if(chatRef.getAuth()){..}

Hàm getAuth() trả về đối tượng chứa thông tin user đã logined vào firechat, chính là đối tượng truyền vào hàm chatRef.auth(..) sau khi authenticate thành công. Sử dụng hàm này để kiểm tra người dùng trước đó nếu chưa có thì hiển thị giao diện đăng nhập.
Lưu ý: hàm getAuth mới được cập nhật ở phiên bản gần đây, phiên bản cũ mình demo trong bài viết là 1.0.21 chưa bổ xung hàm này, hàm có trong bản 1.1.3

<script src='https://cdn.firebase.com/js/client/1.1.3/firebase.js'></script>

Firebase.unauth
Sử dụng hàm này nếu bạn muốn Đăng xuất tài khoản người dùng hiện tại.

//không callback
chatRef.unauth();

//callback thông báo logout thành công
chatRef.unauth(function(){
console.log(‘logout success!’);
});

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 – 0868 292 303 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI