Tích hợp tính năng Login của LIFF (LINE Front-end Framework) vào ứng dụng Web

toan.nguyen

2021.01.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

I. Tiền đề

Ở phần Demo chúng ta sẽ thử tích hợp tính năng Login của LIFF (LINE Front-end Framework) vào ứng dụng web có sẵn.

Tiền đề:

  • Chúng ta đã có 1 project ứng dụng web
  • Ứng dụng: React Native
  • Ngôn ngữ: Typescript
  • Chúng ta có 1 tài khoản LINE

Mục đích demo:

Tích hợp tính năng Log in của LIFF (LINE Front-end Framework) vào ứng dụng có sẵn.

II. Demo

Bước 1:

Chắc chắn rằng ứng dụng của mình chạy thành công. Trong ví dụ thì project được chạy thành công ở http://localhost:3000/

Bước 2:

  • Tải và cài đặt ngrok (công cụ tạo đường hầm (tunnel) giữa localhost của bạn và internet) ở https://ngrok.com/download
  • Như ở bước 1, vì ứng dụng của mình chạy trên cổng http://localhost:3000/ nên mình sẽ chạy lệnh tương ứng là

$ngrok http 3000

Terminal sẽ hiển thị như sau:

ngrok sẽ giúp tạo kết nối giữa server local tới internet. địa chỉ mới sẽ dùng để đăng kí Endpoint URL cho ứng dụng LIFF ở bước sau. Chúng ta sẽ note lại phần đường dẫn https như trong hình để sử dụng ở bước 2. Ví dụ: https://abcde12345.ngrok.io

Bước 3:

  • Tạo 1 Login channel

  • Thêm 1 LIFF app mới

  • Trong phần này chúng ta chú trọng nhất thông tin Endpoint URL. Ở đây chúng ta sẽ nhập vào URL đã tạo ra ở bước 1.

  • Sau khi Add thành công, chúng ta sẽ thấy màn hình hiển thị như sau:

Chúng ta sẽ note lại phần LIFF ID để sử dụng ở bước 3

Bước 4:

  • Cài đặt LIFF sdk vào project

$ npm install --save @line/liff

hoặc

$ yarn add @line/liff

  • Ở file index.tsx của project, import SDK với myLiffIdlà LIFF ID đã note lại ở Bước 2
import liff from '@line/liff';
liff.init({ liffId: 'myLiffId' });
  • Thêm phần logic Login
function login() {
    if (!liff.isLoggedIn()) {
        liff.login();
    }
}
setTimeout(login, 1000);});
  • Save lại và chạy project. Chúng ta sẽ được redirect ngay tới màn hình login của LINE trước khi vào trong ứng dụng.

Sau khi login xong thì màn hình chúng ta sẽ được redirect lại tới màn hình chính của ứng dụng.

III. Kết luận

Như vậy chúng ta đã hoàn thành việc tích hợp trang LINE Login vào ứng dụng của của bạn. Chúng ta có thể tích hợp thêm cách tính năng khác của LIFF (LINE Front-end Framework) vào ứng dụng thông qua việc tham khảo tài liệu tham khảo bên dưới

Link tham khảo thêm: https://developers.line.biz/en/docs/liff/

AWS