tsaki
2021 年 8 月 11 日午後 10:49
1
はじめまして、さきと申します。マーケティング畑で育ち、非エンジニア。bubble学習、開発し始めて3か月ほどになります。
【やりたいこと】
【現状】
【できないこと】①
フォローイベント時にLINEからWebhookイベントオブジェクトがリクエストされるということは理解できたのですが、それをBUBBLEAPIでどのように入力すればよいのか分からずに困っています。
【できないこと】②
リクエストがLINEプラットフォームから送られたことを確認するために、ボットサーバーでリクエストヘッダーの x-line-signature に含まれる署名を検証します。
チャネルシークレットを秘密鍵として、HMAC-SHA256アルゴリズムを使用してリクエストボディのダイジェスト値を取得します。
ダイジェスト値をBase64エンコードした値と、リクエストヘッダーの x-line-signature に含まれる署名が一致することを確認します。Messaging APIリファレンス | LINE Developers
ノーコードラボ様の作成されたLINEログインプラグインも考えたのですが、LINEログインのLINEログインを使用しない理由としては、ログインは個人情報を引き渡すことに抵抗がある人が一定数いると思うので、もっと気軽な友達追加だけにして、お客様のLINE友達登録人数を増やしたいと考えているからです。
どなたかLINE友達追加とUSERID格納について知識のある方教えて頂けると助かります。
さきさん、はじめまして、近藤と言います！どうぞよろしくお願いいたします。
まず、質問文が非常にまとまっており、本当に理解しやすいです
いくつかの質問に別れているので、個別で対応させて下さい
まず、質問１のWebhookについてです。
LINE API の設定画面にて、WebhookURLを指定するところはできているでしょうか？？？
試しにtestというワークフローを作成し、設定してみたものになります。
外部にbackend workflowを公開する際は、Settingsタブの"Enable Workflow API and backend workflows"にチェックを入れると、該当のURLが表示されます。このURLに /“workflow名” のパスを追加することで希望のワークフローを外部から実行することができます。
こちらが設定したワークフローになります。
ここまでは大丈夫でしょうか？
「いいね！」 3
tsaki
2021 年 8 月 13 日午後 9:07
3
@TaishoKondo 様、お忙しい中ご返信ありがとうございます。
質問：Verifyボタンを押したときにエラー表示が出るのですが、Bubble側は開発URL 「https://shop.cyclestart.jp/version-test/api/1.1/wf/lineuerid」で問題無いでしょうか？ LiveURLでなくても動作確認は可能？ 200を返す設定をbubble側で書いていないので怒られているだけだとは思うのですが、念のため確認させて頂きます。
追加の情報として、現在BubbleAPIコネクターは以下のようになっています。
引き続きよろしくお願いいたします。
「いいね！」 2
提示して頂いた内容のwebhookURL、ワークフローの設定まで実施できていることを確認いたしました。
良かったです！
200を返す設定をbubble側で書いていないので怒られているだけだとは思うのですが、念のため確認させて頂きます。
こちらについては、API workflowを外部から叩く際には、基本的に認証が必要になっていて、そこで弾かれているのが原因です。↓画像の"Expose as a public API workflow", "This workflow can be run without authentication"をチェックしていただいてから再度実行すると動くかと思います！
「いいね！」 3
次はuserIdを受け取っていきます。
この画像でのDetect Dataというボタンをクリックすると、
こういう画面になります。このURLにPOSTで送信を送ると、送られてきたデータを解釈してどのパラメータを受け取るのかを設定することができます！
「いいね！」 2
なので、この形のURLをwebhookに登録します。（先程のbubbleの画面はCANCELしないでください。）そしてVerifyボタンで確認すると、アクセスが成功するはずです。
そしてbubbleを確認するとこういう画面になるかと思われます。
「いいね！」 1
ただ、上のVerifyでは、eventsの配列の中身がからなので、UserIDを含む情報が定義されておらず、そのパラメータを設定することができていません。
そのため、Verifyでパラメータを取得することができないので、ちょっと工夫して上げる必要があります。
先程のDetect Dataを押した待機画面に戻って下さい。そこでLINEからinitializeを叩くのではなく、自分で設定したデータでリクエストを送ります。
curl -X POST \
'○ご自分のinitializeのURL○' \
-H 'Accept: */*' \
-H 'User-Agent: Thunder Client (https://www.thunderclient.io)' \
-H 'X-Forwarded-For: hgoe' \
-H 'Content-Type: application/json' \
-d '{
"destination": "xxxxxxxxxx",
"events": [
{
"replyToken": "nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
"type": "follow",
"mode": "active",
"timestamp": 1462629479859,
"source": {
"type": "user",
"userId": "U4af4980629..."
}
}
]
}'
コードが出てきてしまい申し訳ないのですが、このコードをコピーして、実行してあげると上手いこと行きます。
ここで質問なのですが、利用されているパソコンはMacでしょうか？それともWindows？
「いいね！」 3
tsaki
2021 年 8 月 14 日午前 4:49
8
@TaishoKondo 様、とても丁寧に分かりやすくありがとうございます。
私はWindows環境になります。
以下進捗です。
③Detect Dataを押した待機画面に戻って下さい。そこでLINEからinitializeを叩くのではなく、自分で設定したデータでリクエストを送ります。の部分は、自分でリクエストを送る方法が分からず、つまづいています。BubbleのAPIコールから送るのでしょうか？
Manually enter API response を開いて試してみましたが、SAVEボタンが押せませんでした。
不勉強ですみませんが、よろしくお願いいたします。
「いいね！」 2
よかったです！！！
curlというのは、APIに対するリクエストを文字で送ることができるコマンドの名前になります。
こちらにwindowsでcurlを利用する方法が書かれており、さっと目を通せるものなのでこちらご確認いただきたいです！
読み終えた後は、curlコマンドを利用して
curl -X POST \
'○ご自分のinitializeのURL○' \
-H 'Accept: */*' \
-H 'User-Agent: Thunder Client (https://www.thunderclient.io)' \
-H 'X-Forwarded-For: hgoe' \
-H 'Content-Type: application/json' \
-d '{
"destination": "xxxxxxxxxx",
"events": [
{
"replyToken": "nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
"type": "follow",
"mode": "active",
"timestamp": 1462629479859,
"source": {
"type": "user",
"userId": "U4af4980629..."
}
}
]
}'
こちらをコピペして（URLのところだけ変えていただいて）利用していただくことでinitializeに対してリクエストを送っていただきたいです！なにかわからないところがあればご気軽にご相談下さい
「いいね！」 1
最終的にはこのような形でデータフォーマットを指定できることがゴールになります
「いいね！」 2
tsaki
2021 年 8 月 14 日午前 8:24
11
@TaishoKondo 様、続きのご連絡ありがとうございます。
windows10でcurlがインストールされていることは確認しました。
頂いたコードにURLを入れて、cmdで実行。
調べて、windows環境において、 ’ と " の問題があるというのを見たので、以下のダブルコーテーションに置き換えたコードに変えてみましたが、結果は同じでした。
セキュリティ的に遮断しているのかとも思い、普通にYAHOOのサイトをリクエストしてみたところ、正常に返ってきました。
改めて(落ち着いて・・・)頂いたURLの資料を見て、\が使われていなかったので、不要なのかと思い、削除した以下のコードを入力。
一番最初のURL部分だけはお許しを頂いたような感じになりました・・・が、残りはダメよと言われているようです。
ここまで来て、迷子から自力脱出できなくなりましたので、、、教えてもらってばかりですみませんが、アドバイスよろしくお願いいたします。
「いいね！」 2
教えてもらってばかりですみませんが、アドバイスよろしくお願いいたします。
全然だいじょうぶです！お疲れ様です
curlは結構難しいですね。。。
これからもAPI叩いて試したい場合は多いと思いますので耐えていただければ。。。
postmanというHTTPリクエストを送信するツールでリクエストを送るようにしてみましょうか。こちらも多くのbubblerが利用されているツールなので今後も使う機会は多いと思います。
こちらからDLしていただきます。
先程のcurlでやりたかったことをGUIを用いて設定していきます。
methodをPOSTに設定
initializeのURLを設定
Bodyをraw, formatをJSONに設定
送る予定のJSONを入力
送信ボタンを押す
これでcurlと同じことができます！！！
こちらでやってみるといかがでしょうか？
「いいね！」 4
tsaki
2021 年 8 月 14 日午後 11:18
13
@TaishoKondo 様、別の方法ありがとうございます。
この公式ドキュメントも確認して、今自分がやっていることを何となく把握できております。
引き続きよろしくお願いいたします。
「いいね！」 2
良かったです！！！
次はリクエストの検証ですが、結論から言うとbubbleだけではかなりめんどくさく、仕様変更にも弱い形になりそうです。Zapierなどの外部サービスを使うとスマートにできそうです。
そもそもリクエストの検証というのは、ハッシュ値という値が一致しているのかどうかで確かめます。ハッシュ値というのは、算数でとても大きい数を割り算したときの余りのようなものです。X-line-signatureというのは、答えのハッシュ値のことです。
我々は、送られてきたデータが正しいかどうかを確かめるために、データと持っている鍵（secret）で割ります（超アバウトですが、、、）。その時の答えとx-line-signatureが一致しているかを検証しているんですね。
その際に、本来我々が割り算に使うデータというのは{"destination":"U20708ed35fea108503af7421a15ff1fb","events":[]}
データが一文字でも違うと、答えの値が全く違ってしまうので、もし我々が取得していないパラメータがLINE側で追加されれば、その都度修正しなければならなかったり、配列に２つ以上データが入っていればその際の場合分けなど、様々な処理が発生します。
これはbubbleでなければ本来しなくてもいいことなので、ここに労力を割くのは不毛かなと思っています。
代替案としては、LINE→bubbleというリクエストの流れの中に、外部サービスを一つかませることです。Zapierや、https://pipedream.com/というサービスを利用し、
検証用サービスでは非常に簡単なプログラミングコードをコピペするだけだと思うので、そんなに難しさは起きないかなと思います。
「いいね！」 1
その上で、今回このイベントのために外部サービスを使って検証をしなければならないものなのかは判断の余地があると思います。
不正アクセスで送られるのは、登録していないユーザーID位のものだと思うので、サービスを使っていない人にメッセージを送ってしまうというのがワーストケースだと思います。
どういうメッセージかは不明ですが、これはそんなにクリティカルではない（超主観です。。。）と思っているので、労力をかけるべきかはおまかせします。
今後の拡張で検証用の外部サービスを追加するという流れもできますね！
僕はこれくらいになります
「いいね！」 2
tsaki
2021 年 8 月 16 日午前 1:09
16
@TaishoKondo 様、ここまでご指導いただきありがとうございました！とても勉強になりました。
①webhookからbubbleデータへの格納方法
②LINEのUSERIDとbubble内のUSERの紐づけ
長くお付き合い頂いて恐縮ですが、よろしくお願いいたします。
「いいね！」 1
①
②
「いいね！」 2
こちら、他の方も回答しやすいように別質問として新しくトピック作っていただければと思います！
「いいね！」 1
tsaki
2021 年 8 月 16 日午前 3:26
19
@TaishoKondo 様、ご返信ありがとうございます。
②は別のトピックを立てます！
まずはここまで助言頂き、誠にありがとうございました。
「いいね！」 1
いえ、丁寧に状況を説明していただきこちらもすごくやりやすかったです！！！
またどうぞよろしくお願いいたします
「いいね！」 1
ありがとうございます！
