2022-06-16

リッチメニューから自社サービスとのLINE ID連携

leaf

こんにちは、SmartShoppingでスマートマットライトの開発を担当している @leafです。 スマートマットライトでは今年の3月末に、LINE通知機能をリリースし、買い物を安心して任せられるサービスを目指して日々進化を続けております。

今回は、LINE通知機能で作成したリッチメニューからLINE ID連携を行う方法についてご紹介していきたいと思います。

LINE ID連携を利用したサービス連携の流れ

まず初めに、全体のイメージをご紹介させていただきます。 ユーザーのフローとしては以下のような流れを想定しており、公式の友達追加後にリッチメニューから自社サービスのログインのみでID連携が可能な想定です。

LINE ID連携 サービスフロー

そもそもLINE ID連携とは

LINEが公開しているMessaging APIに含まれている機能の一部で、自社サービスに登録されているアカウントに対してLINEのアカウントを紐づけることにより、ユーザーのアクションに応じてメッセージを送信することが可能になります。

今回は対応しませんでしたが、ユーザーから送られたメッセージに応じて処理を動かすこともできるようです。

LINE Developers

LINE ID連携を開発するにあたり、LINE Developersという公式のドキュメントを参考にさせていただきました。

LINE DevelopersではLINEが外部企業や開発者に向けてLINEと連携が可能になる様々なAPIを提供されており、そのAPIの仕様や開発手順などのドキュメントが公開されているサイトになります。

今回は、その一部のAPIを利用させていただきましたので、利用したAPIについても簡単にご紹介していきます。

詳細は公式のドキュメントが充実しておりますので、それぞれのリンク先を参照していただければと思います。

LINEログイン

LINEログイン はLINEのソーシャルログインサービスで、ウェブサイトに組み込むことでログインの体験を向上させることができます。

また、ログイン時にLINE ID連携のフローを追加することで、会員登録の流れで連携処理を完了することも可能なようです。

LINE Front-end Framework(LIFF)

LINE Front-end Framework(LIFF) はLINEが提供するウェブアプリのプラットフォームです。

LIFFを利用することで、LINEユーザーIDなどLINEに登録されているユーザーの情報を活用することが可能になります。

Messaging API

Messaging API はユーザーのLINEアカウントに対して個別にメッセージを送信することが可能なAPIです。

ボット運用も想定されており、ユーザーの送信メッセージに対して特定の応答メッセージを返答することなどができます。

また、レイアウトの自由度も高くFlex Messageを利用すると以下の様に独自のメッセージを送信することもできます。

LINE通知_自動発注通知

LINE ID連携とメッセージ送信

ここからは具体的な実装方法についてご紹介していきます。

実装開始前の事前準備

実装開始前に、LINEが公開しているAPIを利用するためにいくつか登録が必要になります。

LINE Developers にて会員登録をすることで、同じサイトからコンソールページを開くことができます。

そこで以下の登録を行う必要があります。基本GUIで案内通りに入力をすれば問題ないと思います。

  • LINE ログイン
  • LIFF
  • Messaging API

また、Messaging APIを作成した時点でLINEのアカウントが作成され友達追加時の自動メッセージやリッチメニューの作成など様々な設定が可能になります。

LINE通知_自動応答設定

LINE ID連携

いよいよLINE ID連携の実装になります。

LINE ID連携部分は処理のやりとりが多いため、以下のシーケンス図を元に記述します。

LINE通知_シーケンス図

  1. LINE APPから、自社サービスのアカウントとのトークページを開く

    シーケンス図記載の通り、まず初めにユーザー側でMessaging API作成時に作られたアカウントの友達登録が必要となります。

    自社サービスなどから案内する場合は、以下のURLを利用することで案内が可能です。

    https://line.me/R/ti/p/{{ 公式LINEアカウントのID }}

  2. リッチメニューに配置したLINE ID連携から遷移

    次にリッチメニューなどからLINE ID連携用のURLにアクセスを案内します。

    ここで設定するURLはLINE ログインを実装したLIFFのURLを指定しておきます。

    LINE通知_リッチメニュー

  3. 初期化・LINEログイン

    今回のようにリッチメニューなどから連携をする場合、連携対象のLINEアカウントを特定するためにLINEログインが必要です。

    LINE APPからLIFFを開きLINEログインを実行した場合、自動でログインがされるためスムーズに連携処理を進めることができます。

    LIFFの実装については、以下の公式ドキュメントをご参照ください。

    利用する関数の挙動は以下のページで簡単に確認することができます。

  4. 権限許可画面表示(プロフィール)

    LINEログイン後、初回のみユーザープロフィールへのアクセス許可を求めるページが表示されます。

    ここで許可をしていただくことによりLINEユーザーIDなどユーザーの情報が取得できる状態になります。

    また、必要な権限に関してはLINE Developer ConsoleのLIFFから設定が可能です。

    LINE通知_権限許可

  5. LINEユーザー情報取得用アクセストークン取得

    LINE ID連携を行うユーザーを特定するためにユーザー情報を取得するために必要なアクセストークンを取得します。

    これはLIFFに liff.getAccessToken()という関数が用意されているのでそれを利用します。

  6. LINEユーザー情報用アクセストークンの有効性チェック

    LIFFから取得したアクセストークンをバックエンド側に渡し、アクセストークンの有効性をチェックします。

    公式で有効性チェック用にAPIが公開されているのでそれを利用します。

    また、この時にresponseで client_id というものが返却されます。

    client_id はLINE Developer ConsoleのMessaging APIから確認できるチャネルIDになっており、一致を確認することで正しく発行されていることを担保できます。

  7. ユーザープロファイル取得(req: LINEユーザー情報用アクセストークン)

    アクセストークンの検証に問題がなければ、アクセストークンを利用してユーザー情報を取得します。

    ここで今後メッセージ送信時などに利用するLINEユーザーIDを取得することができます。

  8. ID連携用Token取得(req: LineUserId)

    次にLINE ID連携に利用するトークンの取得を行います。

    先程取得したLINEユーザーIDを利用して取得することが可能です。

    連携トークンを発行する

  9. 自社サービスログイン画面表示

    LINE ID連携用のトークン発行後、自社サービス側の連携対象アカウントの特定を行います。

    自社サービスのログインページなどを利用して対象アカウントを特定します。

  10. Nonceと対象ユーザーを紐付ける仮レコードを作成

    対象のユーザーが特定できてから、nonceを生成して対象ユーザーと紐付けて記録しておきます。

    LINE ID連携の結果はWebhookで非同期に通知されるため、ここで紐づけておくことで特定できるようになります。

  11. 連携完了ページへリダイレクト

    ここまでで連携の準備は完了です。

    以下のURLにユーザーをリダイレクトさせることで連携処理が実行されます。

    https://access.line.me/dialog/bot/accountLink?linkToken={LINE ID連携用トークン}&nonce={nonce}

  12. Webhook用エンドポイントに結果通知(res: 連携結果, Nonce,UserId など)

    LINE側でLINE ID連携の処理が実行され、ユーザーには処理結果の画面が表示されます。

    LINE通知_連携成功

    自社サービスに対しては LINE Developer ConsoleのMessaging APIで設定できる WebhookURLに対して以下の通知がされます。

     {
     "destination": "xxx",
     "events": [
         {
         "type": "accountLink",
         "link": {
             "result": "ok",
             "nonce": "ID連携前に作成したユニークな文字列"
         },
         "timestamp": 1647936877429,
         "source": {
             "type": "user",
             "userId": "対象のLINEユーザーID"
         },
         "replyToken": "xxx",
         "mode": "active"
         }
     ]
 }

    typeがaccountLinkでresultもokであれば連携処理成功になります。

    最後にnonceを参照して自社サービスのアカウントとLINEユーザーIDの紐付けを記録して連携完了となります。

以上がLINE ID連携の流れになります。 上記は一例になりますので、以下の公式資料を元にカスタマイズしていただければと思います。

メッセージ送信

LINE ID連携ができたところで、実際にメッセージを送信していきます。

メッセージ送信の実装には大きく2パターンあり、初めはcurl又はツールなどを利用してPOSTで送ってみるとすぐに確認できると思います。

  1. メッセージごとにJSONを生成し、POSTで送信する
  2. 公式が公開しているBOT用のSDKを利用する

送信の事前準備

ユーザーに対してメッセージを送信するために必要な情報が2つあるので送信前に準備します。

  • LINEユーザーID

    LINE ID連携時に取得した情報を利用します。

  • チャネルアクセストークン

    LINE Developersのコンソールから事前に作成したMessaging APIを選択し、Messaging API設定のタブから発行することができます。

  • チャネルシークレット(SDK利用時)

    LINE Developersのコンソールから事前に作成したMessaging APIを選択し、チャネル基本設定タブから確認することができます。

メッセージごとにJSONを生成し、POSTで送信する

こちらは非常に簡単で、curlやツールなどで以下のサンプルのように定義をすることでメッセージを送信することができます。

APIの詳細については公式の「プッシュメッセージを送る」をご参照ください。

curl -v -X POST https://api.line.me/v2/bot/message/push \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {channel access token}' \
-d '{
    "to": "{LINEユーザーID}",
    "messages":[
        {
            "type":"text",
            "text":"Hello, world1"
        },
        {
            "type":"text",
            "text":"Hello, world2"
        }
    ]
}'

LINE通知_メッセージテスト

公式が公開しているBOT用のSDKを利用する

LINE Messaging API SDKにて各言語毎に用意されたSDKについて案内がされています。

Flex Messageなどを送る場合は少し定義が面倒になりますが、簡単なテキストであればシンプルに送信することが可能です。

以下は、goを利用した簡単なメッセージ送信のサンプルになります。

// go
import (
    "github.com/line/line-bot-sdk-go/v7/linebot"
)

func LINESendSample() error {
    bot, err := linebot.New(【channel seacret】, 【channel access token】)
    if err != nil {
        return err
    }
    if _, err := bot.PushMessage(【LINEユーザーID】, linebot.NewTextMessage(【ここに送りたいメッセージ】)).Do(); err != nil {
        return err
    }
    return nil
}

まとめ

今回は、LINE ID連携を利用してリッチメニューから自社サービス連携をする方法についてご紹介させていただきました。

実は設計初期段階ではLINEログインが必要なことに気づかずにLINEユーザーIDの取得方法がわからず迷走しておりましたが、LINEログインでの取得を見つけてからは公式のドキュメントが充実していたこともあり、非常にスムーズに開発を進めることができたと思います。

リッチメニューのカスタマイズなどまだまだ使いこなせていない部分はありますので、引き続きスマートマットライトの進化につなげていければと思います。

最新の記事