目標

react系でLineのログインまで実装 ソースだけをお求めの方はこちらgitをご利用ください。 サーバー側の実装はここから。

Lineアプリを作るきっかけ

• 日本はやっぱりLineが必ずと言っていいほど使用されている。
• 手軽に広告・宣伝をするにはやはりSNSを使用するのが一番。
• 既にLine公式を持っている人がいたのでLineのアプリを作ることにしました。

設定の流れ

Lineログインを使うために

1. 1.Line developerに登録
2. 2.LIFF_IDを確認する。
3. 3.liffを使ってinit
4. 4.ログインされてない場合login()を実行
5. 5.Lineの画面が出るので許可する。
6. 6.トークン付きのリダイレクトが発生
7. 7.リダイレクトされてliffの色々な機能が使用できる。

そのため、リダイレクト先の設定と、LIFF IDが間違って無ければできます。
動作確認はここでできます。

Lineの公式登録

まず初めにLINEログインまたは、LIFFを利用するには公式ページで登録をし、チャンネルを作成する必要があります。

1. 1.公式のコンソール画面からLineログインを実行します。

1. 2.新規のプロバイダーを作成します

2. 3.ログインのチャンネルを作成します。

　　 必要な情報を全て入力しチャンネルを作成します。ここのポイントは、ウェブアプリを作成するのでウェブアプリにチェックがついている必要があります。

1. 4.LIFFアプリを追加します。

2. 5.最後にスコープの設定とエンドポイントURLの設定を行います。
   エンドポイントのURLはLINEログイン完了後にリダイレクトされるページです。
   今回私のローカル開発マシーンのIPアドレスに設定してあります。

LINEloginを使うために必要な情報

先ほどの設定でLINEでAPIを利用する設定が終わりました。
Loginに必要な情報はLIFF IDになりますので環境ファイルに記述して置きましょう。

REACT_APP_VITE_APP_LIFF_ID="1654839226-x2NmkBeK"

liffidはここに書いてあります。

liffを使う

基本公式の物をそのままコピペをすれば大丈夫です。 公式gitにテンプレートがあるのでそのまま利用できます。
React系で使用する場合useEffectで使用する必要があり、使い方に癖がある。私も初めはこんな使い方おかしいのではないのかと思ってたのだが、useEffectを使う事がLine公式の正式な方法なので素直に従う事をオススメする。

import { useEffect, useState } from "react";
import liff from "@line/liff";
import "./App.css";

function App() {
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  useEffect(() => {
    liff
      .init({
        liffId: import.meta.env.VITE_LIFF_ID
      })
      .then(() => {
        setMessage("LIFF init succeeded.");
      })
      .catch((e) => {
        setMessage("LIFF init failed.");
        setError(`${e}`);
      });
  });
    //....
}

indexに書いてしまったら？

SPAであれば公式通りページに記載してもいいが、ReactDOMを使用してページが分かれている場合は「index.js」に書けばかなり負担が減る。最もこのような使い方をすることは稀だと思いますが...
以下はreact-domを使用した場合です。
ここのコードではuseContextを使用してログイン後のline.objを共有しているが、状態管理の「Redux」「Recoile」を使った方が楽に管理できる。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import liff from '@line/liff'
const root = ReactDOM.createRoot(document.getElementById('root'));
liff
  .init({liffId:process.env.REACT_APP_VITE_APP_LIFF_ID || '' })
  .then(() => {
root.render(

  <React.StrictMode>
    <App />
  </React.StrictMode>
)
})
.catch((e) => {
  alert(`LIFF error: ${e.message}`)
})

---

import { Mainpage } from './pages/main';
import React, { createContext } from "react"
import { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, } from "react-router-dom";
import liff from '@line/liff/dist/lib';
import './main.css';
import LoginPage from './pages/loginpage';
export const Lineobject = createContext();

function App() {
  const [Lineobj, setLineobj] = useState({});
  const Linevalue = { Lineobj, setLineobj };
  useEffect(() => {
    if (liff.isLoggedIn()) {
      console.log(liff.isLoggedIn())
      console.log("useEFFECTS_____START");
    }
  }, [])
  if (liff.isLoggedIn()){
    return (
      <Lineobject.Provider value={Linevalue}>
        <Router>
          <div>
            {
                <Routes>
                  <Route path="/" element={<Mainpage />} />
                </Routes>
            }
          </div>
          </Router>
      </Lineobject.Provider>
    );
  }
  else{
    return(<LoginPage/>)
  }
}
export default App;

---

import liff from '@line/liff'
function LoginPage() {
  const loginbuggon = async (e) => {
    console.log("logins_________")
    await liff.login();
  }
  return (
    <div>
      <button onClick={loginbuggon}>logins</button>
    </div>
  )
}
export default LoginPage;

解説

今回の目的はログインする。ログインしたユーザーの情報を得る事です。
LIFFはどのようにして使用すればいいのか。
まずLIFFの挙動の流れを説明します。

LIFFを使う方法

LIFFを読み込む手順としては liffを初期化して。

1. 1.初期化後に使用できるAPIが提供されているのでその中の１つであるログインチェックを実行する。
2. 2.ログインされていないのであればログインページに飛ばしてログインを促す。
3. 3.ログイン後は、ログイン後に利用できAPIを利用してユーザー情報等を取得することができるようになります。

コードの解説

コードが長く申し訳ないのだが、分けて解説していくと

1. 1.index.js読み込み後liffを初期化(init)
2. 2.App.jsが読み込まれログインされていることをまず確認している。
3. 3.ログインされていない場合はログインする画面にとばす。
4. 4.最後にログインされている場合はusestateでMainpage(./pages/main)を読み込むように設定している。

テスト環境

LineLoginをテストするためにはhttpsではなければならない。
Reactでhttpsを使用する一番簡単な方法はenvファイルを作成し、HTTPS=trueを記述することだ。

LIFFID記入

まずLIFFIDという情報が必要なのでこれも環境ファイルに追加しておく

REACT_APP_VITE_APP_LIFF_ID="1654839226-x2NmkBeK"

https化

Reactを使用した場合本当に簡単に利用ができる。

HTTPS=true
PORT=443

最終コード

そのため環境ファイルはHTTPS化するコード、「LIFFID」２つ記述します。

HTTPS=true
PORT=443
REACT_APP_VITE_APP_LIFF_ID="1654839226-x2NmkBeK"

HTTPS化の他の方法とすればプロキシを使用する方法だ。 Next.jsやプレーンのHTMLでも使うことができるので一度設することをおすすめする。 ローカルＳＳＬ構築

Line側の設定

Line登録のところでほとんど設定が終わっているが、本当に必要な部分だけを改めて確認します。

LIFF ID

今回作成したチャンネルでLIFFを使用してログインする際必要になるLIFFのIDです。
この情報を環境ファイルに記入しておきます。

REACT_APP_VITE_APP_LIFF_ID="1654839226-x2NmkBeK"

エンドポイントURL

ログインした後にどこにリダイレクトするかを設定します。
開発環境下では開発用のマシーンのipアドレスを設定することでLineでログインが可能になる。
もちろん本番環境ではドメイン名を指定しておく必要がある。

Nextjsで実装

Nextjsで実装したのだがかなり手間でした。
まず_app.tsxに記述しても上の方法ではダメだったので公式通りに実装する必要がありました。最終的にはLayoutを利用しましたが...
テスト環境を構築する場合もReactではHTTPSを簡単に構築できましたがNexjsではできないためプロキシを建てる必要があった。

ここは素直に公式のログイン方法に従う。
ログインまでの処理は公式通りほとんど一緒です。ログイン後のliffオブジェクトはusestateで登録しています。

    useEffect(() => {
        import('@line/liff').then((liff: any) => {
            console.log("LINE/LIFF");
            liff
                .init({ liffId: process.env.NEXT_PUBLIC_APP_LIFF_ID || '' })
                .then(() => {
                    setliffobj(liff);
                })
                .catch((error: string) => {
                    console.log(`liff.init() failed: ${error}`);
                });
                console.log("LINE/LIFF");
        });
    }, []);

LIFFAPI

ログインチェックを使いましたがそのほかにもできることは多くあります。
公式LIFFAPI

LIFFAPIは初期化後利用できるようになっているが、使用できる条件が設定されているAPIがほとんどです。
ログイン後に使えるAPI。ユーザーがチャンネル登録時に許可した場合使えるAPI、LIFFAPP（LIFFブラウザ）上で利用できるAPI等

公式のデモページで確認

APIのデモページが公開されているためここでAPIの使い方、戻り値を確認できる。 ログインするには一番上のliff.login()を実行する必要があるので、ログインしている時、していない時の挙動を確認することができる。

Login後は?

LIFFAPIでログインまでできたらliff.getProfile();でユーザーの情報を取得することができます。
しかしこれだけを利用する事はほとんどありません。ユーザーの固有情報はuserIdであるが、liff.getProfile()で取った情報をそのままサーバに投げて保存することは絶対にやってはいけない。公式ページでも何度も警告している。
ではどうすればいいのかここに記載されている通りアクセストークンまたは、IDトークンを利用する必要がある。
２つの方法どちらもサーバー側の実装のため、サーバー構築が必須になります。

まとめ

LIFFは簡単に利用はできるのだが、Reactで使用する場合はuseEffectを使用しなければならないので多少癖がある。
また、認証の関係上サーバーサイド構築は必須である。LIFFブラウザー上でのみ動くようにすれば、メッセージを送ることはできる。また、悪用されることが減る。
そのためユーザーには申し訳ないのだが、スマホ上のLIFFブラウザーでのみ利用することができるアプリを作る方がいいのではないだろうか？ 次回はサーバーサイドの認証を構築して行く。