LINE と AWS Lambda function URLs を活用してデジタル会員証を実現

LINE Developers の Messaging API にアクセスして、「 今すぐはじめよう 」のボタンをクリックします。

次の画面で LINE のログイン情報を入力し、「 ログイン 」ボタンをクリックします。

「チャネルの種類」が「Messaging API」になっているか確認します。

「 プロバイダー 」選択画面では、既にプロバイダーを作っている場合、利用するプロバイダーを選択します。

初めての場合は、「 新規プロバイダー作成 」を選択しプロバイダー名を入力します。

注 : LINE という文字は含められません。

「 会社・事業者の所在国・地域 」の選択で「 日本 」を選択します。

チャネルアイコンを登録します。(今回は必須ではありません)

「 チャネル名、チャネル説明 」の画面で下記を入力します。

• チャネル名 : デジタル会員証
• チャネル説明 : デジタル会員証を AWS x LINE で実現
  

「 大業種、小業種 」の選択画面では、今回は「 個人 」を選択します。(リスト下の方にあります。)

「 メールアドレス 」の欄に有効なメールアドレスを入力します。

「 プライバシーポリシー URL 」、「 サービス利用規約 URL 」の欄は今回はハンズオンのため、 空欄にしていますが、実際は必要に応じて入力ください。

次の確認画面で「 OK 」をクリックします。

内容を確認の上、「 同意する 」をクリックします。

これで、チャネルが作成できました。

作成したチャネルの「 Messaging API 設定 」タブに移動し、QR コードで LINE Bot (LINE 公式アカウント) を友だち追加します。

下部にスクロールして、「 アクセストークン 」を発行します。発行したアクセストークンは後で使用するので、メモしましょう。

LINE Front-end Framework (LIFF) は、LINE が提供するウェブアプリのプラットフォームです。LINE ミニアプリにも関連する技術でもあります。詳細は下記の URL 先をご覧ください。

・ https://developers.line.biz/ja/docs/liff/overview/
・ https://www.youtube.com/watch?v=QD_M52ATbb8

チャネル作成を行います。
こちら にアクセスして、「 今すぐはじめよう 」のボタンをクリックします。

「 チャネルの種類 」で「 LINE ログイン 」になっているか確認しましょう。

「 プロバイダー 」選択では、Messaging API チャネルで使用したプロバイダーを選択します。

「 サービスを提供する地域 」、「 会社・事業者の所在国・地域 」で「 日本 」を選択します。

チャネルアイコンを登録します。(今回はハンズオンのため必須ではありません)

「 チャネル名 」、「 チャネル説明 」で下記を入力します。

• チャネル名 : デジタル会員証
• チャネル説明 : デジタル会員証を AWS x LINE で実現
  

「 アプリタイプ 」 は「 ウェブアプリ 」にチェックを入れます。

「 メールアドレス 」に有効なメールアドレスを入力します。

今回はハンズオンのため、「 プライバシーポリシー URL ]、「 サービス利用規約 URL 」は空欄にしていますが、実際は必要に応じて入力します。

「 LINE 開発者契約 」 の内容を確認の上チェックを入れ、「 作成 」ボタンをクリックします。

これでチャネルが作成できました。

作成したチャネルの「 チャネル ID 」をメモしておきます。

画面下部にスクロールして、「 リンクされたボット 」でさきほど作成した Messaging API のチャネルを選択し、更新を行います。(同じプロバイダーに存在するチャネルと関連付けられたボットのみをリンクできます。)

LIFF の作成を行います。

「 LIFF 」タブに移動して「 追加 」ボタンをクリックします。

基本情報を入力します。

「 LIFF アプリ名 」には「 デジタル会員証 」と入力し、サイズは「 Full 」を選択します。

「 Scope 」の選択で、「 openid 」にチェックをつけます。

「 ボットリンク機能 」では、LINE ログイン時に、作成した Messaging API を友だち追加できるよう設定します。

「 On (aggressive) 」にチェックをつけ、 最後に「 追加 」ボタンをクリックします。

※ボットリンク機能の詳細は こちらのドキュメント をご覧ください。

LIFF が作成できました。

後ほど使用するので、「 LIFF ID 」と「 LIFF URL 」をメモしましょう。

Messaging API から LIFF が呼び出せるように、LINE 公式アカウントの管理画面にアクセスし、リッチメニューを作成していきます。

作成した Messaging API チャネルに戻り、「 LINE Official Account Manager 」にアクセスします。

「 ホーム 」→ 「 リッチメニュー 」→ 「 リッチメニューを作成」 の順に進みます。

リッチメニューの「 表示設定 」の項目を下記のように入力します。

• タイトル  : デジタル会員証
• 表示期間 : リッチメニューの表示開始日〜表示終了日
  ※ リッチメニューが表示され無い場合は、ここで指定している期間を見直してみてください
• メニューバーのテキスト : 「 メニュー 」を選択
• メニューのデフォルト表示 : 「 表示する 」を選択
  

コンテンツ設定で「 テンプレートの選択 」を行います。

次にリッチメニューに使用する画像を作成します。

「 画像を作成 」ボタンから、フレームに背景とテキストを入力し、文字色や配置を調整します。最後に右上の「 適用 」ボタンをクリックします。

※簡単な画像はこちらの画面上で作成可能です。もちろん、用意いただいた画像をアップロードして設定することもできます。

「 アクション 」 の項目を下記のように設定します。最後に「 保存 」ボタンをクリックします。

• タイプ :「 リンク 」を選択し、メモしておいた LIFF URL を入力 (例 : https://liff.line.me/xxxx)

• アクションラベル : デジタル会員証

リッチメニューが設定されました。

ここから先は AWS Cloud9 上で作業を行います。

まず、AWS CDK 実行時に容量不足でエラーになってしまうので、事前に Amazon EBS ボリュームのサイズを増やしましょう。

※Amazon EBS ボリュームのサイズ変更の詳細情報は こちらのドキュメント をご覧ください。

Terminal でコマンドを実行します。

git clone https://github.com/liner-takashi-kawamoto/LINE-Digital-MembersCard-on-AWS.git
cd LINE-Digital-MembersCard-on-AWS
chmod +x resize.sh
./resize.sh 20

コピー

注意 :
今回使用するコードはハンズオン用を想定しており非常にシンプルな内容になっています。本番環境で利用する場合は適宜、必要なコードを追加・修正してください。

Lambda functions URLs は 2 種類の認証モードを提供します。認証なしモードと IAM 認証モードです。このハンズオンでは手順を簡略化させるため認証モードを用いていますが、本番環境での利用の際には、IAM 認証モードを検討いただくことで、リプレイ攻撃などに強いシステム構築が可能です。また、Amazon API Gateway との連携を行うことで AWS WAF (ウェブアプリケーションファイアウォール) との連携も可能となり、DDos 攻撃耐性を高めることができます。

必要なモジュールをインストール、LINE 側セットアップでメモした値を「cdk deploy」に入力し、Terminal でコマンドを実行します。
(途中「Do you wish to deploy these changes (y/n)?」と確認メッセージが出ますので「y」を入力します。)

npm install
cdk synth
cdk bootstrap

LIFF_CHANNEL_ID=メモしておいた[チャネルID]
CHANNEL_ACCESS_TOKEN=メモしておいた[アクセストークン]
cdk deploy \
-c LIFF_CHANNEL_ID=${LIFF_CHANNEL_ID} \
-c CHANNEL_ACCESS_TOKEN=${CHANNEL_ACCESS_TOKEN}

コピー

下記のような実行結果が出力されます。後で使うので、メモしましょう。

• ① CdkStack.BucketName の値

• ② CdkStack.EndpointUrl の値

• ③ CdkStack.FunctionUrl の値

クリックすると拡大します

LINE 側セットアップで行った、LINE ログインチャネルの LIFF に戻り、LIFF の「エンドポイント URL」に 「② CdkStack.EndpointUrl」の値を入力し、更新します。

クリックすると拡大します

初期状態では開発中の状態なので公開の状態にしていきます。

まず「開発中」をクリックし、次の画面で「公開」をクリックします。

※「開発中」の状態では、Admin または Tester の権限を持つユーザーのみが LINE ログインを利用できます。詳細情報は こちらのドキュメント をご覧ください。

クリックすると拡大します

公開の状態になりました。

クリックすると拡大します

AWS Cloud9 に戻り、LINE-Digital-MembersCard-on-AWS/line-api-use-case-MembersCard/front/members_card.js の「FUNCTION_URL」と「liffId」に下記の値を入力します。

• FUNCTION_URL : ③ CdkStack.FunctionUrl の値

• liffId : メモしておいた LIFF ID の値

クリックすると拡大します

入力した内容を Amazon S3 へアップロードします。

Terminal で以下のコマンドを実行します。

BUCKET_NAME=[①CdkStack.BucketName]の値
aws s3 cp ./line-api-use-case-MembersCard/front s3://${BUCKET_NAME} --recursive

コピー

これで AWS CDK での構築は完了です。

「6. アプリの動作確認」を参考に動作確認を行いましょう。

my-deployment-package.zip をローカルへダウンロードします。

クリックすると拡大します

AWS Lambda にアクセスし、AWS Lambda 関数を作成します。

下記を設定し、「関数の作成」ボタンをクリックします。

• オプション :  一から作成

• 関数名 : digital-members-card

• ランタイム : Python 3.9

クリックすると拡大します

AWS Cloud9 からローカルへダウンロードした Zip ファイルを AWS Lambda へアップロードします。

アップロード後、次の画面で「保存」ボタンをクリックします。

クリックすると拡大します

下にスクロールし、「ランタイム設定」の「編集」をクリックします。

「ハンドラ」に「app.lambda_handler」と入力し、「保存」ボタンをクリックします。

クリックすると拡大します

「設定」タブに移動し、「環境変数」画面で「編集」をクリックします。

クリックすると拡大します

LINE 側セットアップでメモした値を入力し、保存します。

• LIFF_CHANNEL_ID : メモしておいたチャネル ID

• CHANNEL_ACCESS_TOKEN : メモしておいたアクセストークン

クリックすると拡大します

関数 URL を作成します。

「設定」タブの「関数 URL - 新規」画面で「関数 URL を作成」をクリックします。

クリックすると拡大します

認証タイプで「NONE」を選択します。(CROS 設定は後ほど設定します。)

「保存」ボタンをクリックします。

クリックすると拡大します

「関数 URL」をメモしておきます。

クリックすると拡大します

次に Frontend である Amazon S3 と Amazon CloudFront を作成します。

AWS Cloud9 に戻り、LINE-Digital-MembersCard-on-AWS/line-api-use-case-MembersCard/front/members_card.js の「FUNCTION_URL」と「liffId」に値を入力します。

• FUNCTION_URL : メモしておいた「関数 URL」

• liffId : メモしておいた「LIFF ID」の値

クリックすると拡大します

入力した内容を Amazon S3 へアップロードします。

AWS Cloud9 から LINE-Digital-MembersCard-on-AWS/line-api-use-case-MembersCard/front をローカルへダウンロードします。

クリックすると拡大します

Amazon S3 を作成します。S3 コンソール にアクセスし、バケット名は「digital-members-card」と入力します。

入力後、「バケットを作成」ボタンをクリックします。

クリックすると拡大します

「アップロード」ボタンをクリックして、AWS Cloud9 からローカルへダウンロードしたファイルをアップロードします。

クリックすると拡大します

ダウンロードした圧縮ファイルを展開し、front フォルダの中身をドラッグ & ドロップし、バケットへアップロードします。

クリックすると拡大します

Amazon CloudFront コンソールにアクセスします。

こちらのように設定し、「ディストリビューションを作成」ボタンを押します。

クリックすると拡大します

「ディストリビューションドメイン名」をメモしておきます。

クリックすると拡大します

LINE 側セットアップで行った、LINE ログインチャネルの LIFF に戻り、LIFF の「エンドポイント URL」に先ほどメモした「ディストリビューションドメイン名」を入力して、「更新」ボタンをクリックします。

クリックすると拡大します

AWS Lambda 関数に戻り、CORS の設定をします。

「設定」タブから「関数 URL - 新規」メニューに移動し、「編集」ボタンをクリックします。

クリックすると拡大します

「オリジン間リソース共有 (CORS) を設定」にチェックを入れて、「許可オリジン」に同じく先ほどメモした「ディストリビューションドメイン名」を入力します。

入力したら「保存」ボタンをクリックします。

クリックすると拡大します

AWS Lambda にアクセス権限を設定します。

「ロール名」にアクセスします。

クリックすると拡大します

「ポリシーをアタッチ」をクリックして、「AmazonDynamoDBFullAccess」のポリシーをアタッチします。

クリックすると拡大します

最後にユーザー情報を保存するテーブルを作成します。

Amazon DynamoDB コンソールにアクセスし、下記のように作成します。

• テーブル名 : MembersCardUserInfo

• パーティションキー : userId

これで AWS Management Console でのサービス構築は完了です。
「6. アプリの動作確認」を参考に動作確認を行いましょう。

Terminal でコマンドを実行します。

WARN が出力されますが、Amaozon S3 を削除するために必要なので、そのまま「y」を入力します。

cdk destroy

WARN AWS_SOLUTIONS_CONSTRUCTS_WARNING:  An override has been provided for the property: removalPolicy. Default value: 'retain'. You provided: 'destroy'.
WARN AWS_SOLUTIONS_CONSTRUCTS_WARNING:  An override has been provided for the property: removalPolicy. Default value: 'retain'. You provided: 'destroy'.

Are you sure you want to delete: CdkStack (y/n)? y

AWS CDK で削除されなかった Amazon S3 を AWS Management Console から削除します。

Amazon S3 コンソール にアクセスし、「cdkstack」で検索し、中身を空にしてからバケットを削除します。

終わったら、「7-3. AWS Cloud9 を削除」に進みましょう。

AWS Lambda コンソール にアクセスし、関数を削除します。

AWS IAM コンソール にアクセスし、ロールを削除します。

Amazon DynamoDB コンソール にアクセスし、テーブルを削除します。

Amazon DynamoDB コンソール にアクセスし、テーブルを削除します。

Amazon S3 コンソール にアクセスし、バケットを空にしてから削除します。

Amazon CloudFront コンソール にアクセスし、ディストリビューションを無効にしてから削除します。

すべて削除したら、「7-3. AWS Cloud9 を削除」に進みましょう。

AWS Cloud9 にアクセスし、作成した環境を削除します。