これはなに

LIFFアプリの作成手順の説明
LIFFの動作検証に必要なhttps対応をvite-plugin-mkcertを使ってやってみた記事です

とりあえず対応したコードのみを知りたい！人はこちら

やること

プロジェクト作成
LIFFアプリ作成
https対応

この記事で書かないこと

以下の内容を詳しくは書きません
- LIFFとはなにか
- viteてとはなにか

https対応について

mkcert や ngrokでも対応可能ですがインストールが必要だったり手順も多いので
簡単に対応できるvite-plugin-mkcertを利用します。

LIFFアプリでlocalhostをhttps化できると、チームで一つのLIFFアプリで同時に開発できる等の
メリットがあるのでLIFFアプリ開発をされる方にはおすすめです。

環境

mac
node v16.16.0
npm 8.11.0

プロジェクトの作成

今回は、vite-plugin-mkcertを使って https対応をしていきます。

公式ドキュメントの手順で進めていきます。

1. プロジェクト生成

$ npm create vite@latest liff-app

その後、対話式でテンプレートの選択をします
以下のように選択しました

✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

2. セットアップ

$ cd liff-app
$ npm install

vite-plugin-mkcertを入れて後で設定するために、
vite.config.jsファイルを生成しておきます。

Vite の設定

$ touch vite.config.js
$ echo "// vite.config.js
export default {
  // config options
}" >> vite.config.js

3. 動作確認

$ npm run dev

デフォルトだと、https://localhost:5173で起動されると思うので
https://localhost:5173もしくは表示されたURLでサイトにアクセスできればOKです

LIFFアプリ作成

1. チャンネルの作成

Channel type
- LINE Login
App types
- Web app

残りの項目はなんでもいいです

2. LIFFアプリの追加

先ほど作成したLINE LoginチャンネルのLIFFのタブを開きます。

Sizeはなんでもいいですが、Fullにしています。

Scopesに関しては、今回LIFFアプリの起動まで検証できればいいのでopenidにします。

設定項目	内容
Size	Full
Scopes	openid
Endpoint URL	`npm run dev`で起動したURL
Bot link feature	Off

Sizeはなんでもいいですが、Fullにしています。

Scopesに関しては、今回LIFFアプリの起動まで検証できればいいのでopenidにします。

Bot linkはなんでもいいですが、今回は必要なのでOffにしています。

LIFF SDKのセットアップ

1. npm パッケージのインストール

$ npm install --save @line/liff

2. SDKをアプリに組み込む

作成したLIFFアプリのLIFF IDをコピーして、main.jsを編集し追記します。

main.js

import './style.css'
import javascriptLogo from './javascript.svg'
import { setupCounter } from './counter.js'
+ import liff from '@line/liff';

+ liff.init({
+    liffId: 'LIFF_ID', // Use own liffId
+ }).then(() => {
+   if (!liff.isLoggedIn()) {
+    return liff.login();
+   } else {
+     console.log(liff.getDecodedIDToken());
+   }
+ })
.catch((err) => {
  console.log(err.code, err.message);
});;

document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`

setupCounter(document.querySelector('#counter'))

3. LIFF URLにアクセスしてみる

$ npm run dev

https://liff.line.me/LIFF_IDとなっているURLにアクセスしてみますが、
https対応していないのでnpm run devで起動したURLにアクセスできません。
次で対応してきます。

https対応

1. vite-plugin-mkcert のセットアップ

$ npm install -D vite-plugin-mkcert

vite.config.js

+ import mkcert from 'vite-plugin-mkcert';
// vite.config.js
export default {
  // config options
+ server: {
+  https: false,
+ },
+ plugins: [mkcert()],
}

https: false, としている理由について trueにすればデフォルトhttpsですが
falseにしておきデフォルトhttpにして起動時のオプションでhttpsと選択できるようにしています。

package.json

{
  "name": "liff-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
+   "dev:https": "vite dev --https",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^3.2.3",
    "vite-plugin-mkcert": "^1.10.1"
  },
  "dependencies": {
    "@line/liff": "^2.21.3"
  }
}

2. httpsになっているか確認

$ npm run dev:https

  VITE v3.2.4  ready in 1272 ms

  ➜  Local:   https://localhost:5173/
  ➜  Network: use --host to expose

httpsになってそうですね！アクセスしてみましょう

アクセスできたらOKです

LINE ログインの記述を加えているので
ログイン画面が出ると思います。

3. LIFF URLにアクセス

先ほどアクセスに失敗したhttps://liff.line.me/LIFF_IDにアクセスしてみましょう

同じようにアクセスできればOKです。

編集したファイル一覧