LINEログインをしてbotからプッシュメッセージをもらうまで

単純にbotから送信したら、友達登録している人全員にメッセージが送られてしまう
botに対してメッセージを送れば返信してくれるけど向こうからはメッセージをくれない

今回はNEXT.js + TypeScriptで実装していきます
プッシュメッセージの実装のみ記事にしていますのでNEXT.jsの環境構築には一切触れていません
ご了承ください

LINE Developersの登録
botの作成
LINEログインの作成
LINEログインの実装
IDトークンの検証
プッシュメッセージの送信
おわりに

LINE Developersの登録

LINE Developersの登録を行いましょう
LINEログインで簡単に登録できます
https://developers.line.biz/ja/

開発者名とメールアドレスの入力が求められます

botの作成

プロバイダーを作成して機能を追加していきます

まずはMessaging APIの作成をします
特に困るような項目はないと思います

登録が完了したらMessaging APIの設定画面でチャネルアクセストークンを確認しておきましょう
このトークンで送信元のbotの設定をします

LINEログインの作成

続いてLINEログインの作成をします

作成はMessaging APIとほぼ同じですが、その後の設定が少し必要になります

作成したらチャネルIDとチャネルシークレットを確認しておきます

ログイン時に友達追加をするためのbotを関連付けておきます

ログイン処理を行なった後にリダイレクトするURLを設定します
今回はローカルで動かすため「127.0.0.1」を設定します
以前は「localhost」が使えましたが今は使えないみたいです

LINEログインの実装

LINEログインページに遷移するだけのページです
トークンは直接コードに書かずenvファイルなどで管理しておくといいと思います

識別に必要なデータはURL上に載せる必要があります
パラメータは公式ドキュメントを参照してください
https://developers.line.biz/ja/docs/line-login/integrate-line-login/#making-an-authorization-request

client_idではLINEログインのチャネルIDを設定してください（process.env.NEXT_PUBLIC_CLIENT_ID）

/* index.tsx */
import type { NextPage } from 'next'

const Home: NextPage = () => {

  const url = `https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_CLIENT_ID as string}&redirect_uri=http%3A%2F%2F127.0.0.1%3A3000%2Fline&state=hoge&bot_prompt=normal&scope=profile%20openid&nonce=foobar&prompt=consent`

  return (
    <div>
      <a href={url}>
        Lineログイン
      </a>
    </div>
  )
}

export default Home

IDトークンの検証

トークンの検証です

URLにトークンが載っているため取得します

process.env.NEXT_PUBLIC_CLIENT_ID：LINEログインのチャネルID
process.env.NEXT_PUBLIC_CLIENT_SECRET：LINEログインのチャネルシークレット

/* line.tsx */
import axios from "axios";
import { useRouter } from "next/router";

const Line = () => {

  const route = useRouter();

  const getToken = async () => {

    // アクセストークンの発行
    var params = new URLSearchParams()
    params.append('grant_type', "authorization_code")
    params.append('code', route.query.code as string)
    params.append('redirect_uri', "http://127.0.0.1:3000/line")
    params.append('client_id',  process.env.NEXT_PUBLIC_CLIENT_ID as string)
    params.append('client_secret', process.env.NEXT_PUBLIC_CLIENT_SECRET as string)

    const token = await axios.post("https://api.line.me/oauth2/v2.1/token", params);
    console.log("token: ", token.data)


    // IDトークンの検証
    var params_second = new URLSearchParams()
    params_second.append("id_token", token.data.id_token)
    params_second.append("client_id", process.env.NEXT_PUBLIC_CLIENT_ID as string)
    const userdata = await axios.post("https://api.line.me/oauth2/v2.1/verify", params_second);
    console.log("userdata: ", userdata.data)


    const data = {
      params: {
        to: userdata.data.sub
      }
    }

    const result = await axios.get('http://127.0.0.1:3000/api/push', data)
    console.log(result)

  }

  return (
    <div>
      <button onClick={getToken}>send message</button>
    </div>
  ) 
}

export default Line

アクセストークンの発行→IDトークンの検証という流れでユーザーIDを取得しています

最後のGETリクエストでプッシュメッセージの送信処理を行なっています
本当はPOSTでやった方がいいですが

プッシュメッセージの送信

プッシュメッセージの送信処理です
サーバでの処理になるのでNEXT.jsのAPIで作成します

トークン検証のようにAPIを利用することもできますがライブラリを使った方がスッキリするのでこちらを使います

process.env.NEXT_PUBLIC_CHANNEL_ACCESS_TOKEN：Messaging APIのチャネルアクセストークン

/* push.ts */
import type { NextApiRequest, NextApiResponse } from 'next'

import * as line from "@line/bot-sdk"
import type {Message} from "@line/bot-sdk"

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {

  try {
    if (req.method === 'GET') {
      const client = new line.Client({
        channelAccessToken: process.env.NEXT_PUBLIC_CHANNEL_ACCESS_TOKEN as string
      })

      const message: Message = {
        type: 'text',
        text: 'Hello World!'
      };
      
      const hoge = await client.pushMessage(req.query.to as string, message)

      res.json([req.query.to, hoge])
    }

  }catch (err: any) {
    res.json(err)
  }

}

処理が正常に完了した場合戻り値は空になります

これでbotから”Hello World！”が送られたはずです
お疲れ様でした