Skip to main content

Line Platform

The @machinat/line platform enable your app to receive/send messages as a LINE official account.

Install​

Install the core, http and line packages:

npm install @machinat/core @machinat/http @machinat/line

Setup​

tip

You can check setup section in the tutorial. It brings you to set up everything step by step.

First, you need to apply a LINE messaging API channel for the chatbot. Follow the official guide for the setup procedures.

Then set up the http and line module like this:

import Machinat from '@machinat/core';
import Http from '@machinat/http';
import Line from '@machinat/line';

const {
  LINE_PROVIDER_ID,
  LINE_CHANNEL_ID,
  LINE_ACCESS_TOKEN,
  LINE_CHANNEL_SECRET,
} = process.env;

const app = Machinat.createApp({
  modules: [
    Http.initModule({ port: 8080 }),
  ],
  platforms: [
    Line.intiModule({
      webhookPath: '/webhook/line',       // webhook path
      channelId: LINE_CHANNEL_ID,         // messaging API channel id
      providerId: LINE_PROVIDER_ID,       // provider id of the channel
      accessToken: LINE_ACCESS_TOKEN,     // channel access token
      channelSecret: LINE_CHANNEL_SECRET, // channel secret
    }),
  ],
});

Usage​

Here's an example to receive events and send replies back:

import Machinat from '@machinat/core';
import * as Line from '@machinat/line/components';
import app from './app';

app.onEvent(async ({ platform, event, reply }) => {
  if (platform === 'line' && event.type === 'text') {
    await reply(
      <Line.Expression
        quickReplies={
          <Line.QuickReply>
            <Line.PostbackAction label="I want 🐶" data="doggo" />
          </Line.QuickReply>
        }
      >
        Hello LINE! 👋
        <Line.ButtonTemplate
          altText="You daily 🐱: https://cataas.com/cat"
          thumbnailImageUrl="https://cataas.com/cat"
          actions={
            <Line.PostbackAction label="More" data="catto" />
          }
        >
          You daily 🐱
        </Line.ButtonTemplate>
      </Line.Expression>
    );
  }
});

Check API references for the details of events and components.

Webview​

Auth Setup​

To use webviews in LINE, configure the app with these steps:

  1. Create a LIFF app with URL to the webview page with platform=line query. Like https://your.server.domain/webview?platform=line.
  2. Set up line and webview platform like this:
import Webview from '@machinat/webview';
import Line from '@machinat/line';
import LineAuth from '@machinat/line/webview';

const { LINE_LIFF_ID } = process.env;

const app = Machinat.createApp({
  platforms: [
    Line.initModule({
      // add the login channel id
      liffId: LINE_LIFF_ID,
      // ...
    }),
    Webview.initModule({
      authPlatforms: [
        // add the auth provider
        LineAuth,
      ]
      // ...
    }),
  ],
});
  1. Expose LIFF id in next.config.js:
const { LINE_LIFF_ID } = process.env;

module.exports = {
  publicRuntimeConfig: {
    LINE_LIFF_ID,
  },
};
  1. Set up the WebviewClient in the webview page:
import getConfig from 'next/config';
import WebviewClient from '@machinat/webview/client';
import LineAuth from '@machinat/line/webview/client';

const {
  publicRuntimeConfig: { LINE_LIFF_ID },
} = getConfig();

const client =  new WebviewClient({
  authPlatforms: [
    new LineAuth({ liffId: LINE_LIFF_ID }),
  ],
});

Open the Webview​

The webview can be opened by a WebviewAction in the chatroom. Like:

import * as Line from '@machinat/line/components';
import { WebviewAction as LineWebviewAction } from '@machinat/line/webview';

app.onEvent(async ({ reply }) => {
  await reply(
    <Line.ButtonTemplate
      altText="Hello World"
      actions={
        <LineWebviewAction label="Open 📤" />
      }
    >
      Hello Webview!
    </Line.ButtonTemplate>
  );
});

The users will be logged in with LINE account in the webview. Check the webview document to learn more.

Assets Manager​

LineAssetsManager service helps you to manage resources on the LINE platform, like richmenu.

To use it, you have to install a state provider first. Then register LineAssetsManager like this:

import RedisState from '@machiniat/redis';
import LineAssetsManager from '@machinat/line/asssets';

const app = Machinat.createApp({
  services: [
    LineAssetsManager,
  ],
  platforms: [
    Line.initModule({/* ... */}),
  ],
  modules: [
    RedisState.initModule({
      clientOptions: { url: REDIS_URL },
    }),
  ],
});

Here is an example to reuse a richmenu:

import { makeContainer } from '@machinat/core';
import * as Line from '@machinat/line/components';
import LineAssetsManager from '@machinat/line/asssets';

app.onEvent(
  makeContainer({ deps: [LineAssetsManager] })(
    (assetsManager) =>
      async ({ reply }) => {
        const fooMenuId = await assetsManager.getRichMenu('foo.menu');
        await reply(<Line.LinkRichMenu id={fooMenuId} />);
      }
  )
);

Resources​

Here are some resources for further reading: