見出し画像
Photo by eisukeai

【Bubble×LINE】LINEログインの実装に成功！！どハマりポイントまとめ

Apoto | Syuntaro Kane

作ったもの

Bubbleのアプリから、LINEログインができる。
ユーザーの名前、画像、メールアドレス、ユーザーIDなどを取得できる。

参考記事

LINEチャネルの作成 ～ Auth0アプリ作成・設定

LINEは前回同様、テスト用アカウントを使用。
Auth0は新規登録後、使用するSNSを選択し、アプリを作成。
手順としては簡単。

何か所かハマってましたが笑
詳細は最後にまとめます。

なにはともあれテスト成功。ここまでの設定は問題なさそうです。

API Connectorの設定

ここが山場でした。乗り越えるのに1ヶ月かかりました。

まず記事通りに操作し、Initialize Call。しかしエラー。
401エラーで、認証が上手くいかないとのこと。
Auth0までは大丈夫だったからBubble側の設定だと思い色々調べるが、手がかりは掴めず。
気にはしながら、1ヶ月ほど放置していました。

しかしつい先日、サロン内でLINEログインに成功している方を発見したので、話を聞いてみました。
得た情報は、Initialize Callの前に、テストログインを行うこと。
つまりは、Initialize Callを飛ばして先に進めると成功する、というもの。

API Connectorで繋ぐ時はまずInitialize Callを最初にすると思い込んでたこともあり、それは目からウロコな情報。
早速試したところ、なんとサクッとログイン成功！
本気で感動でした。

どハマり箇所は、このあと詳しく書きます。

完成

ログインできてます！感動です！

どハマりポイント【API Connector編】

パラメータ入力は、メッセージ送信と比べて複雑でした。
それも含め、API Connector設定時のミスをまとめます。

①Initialize Call前に、テストログイン

先ほど書いた通りです。
本来は自動で行われるそうですが、今回できていませんでした。

よく読むと、Warning内にそれらしき旨が書かれています。
英語は面倒がらず、翻訳も駆使してしっかり読みましょう笑

②Login dialog redirect・Access token endpoint・User profile endpoint

このドメインも、Auth0アプリのDomainからコピーしましょう。

③User email key path

今回のハマりと関係あるか分かりませんが、当初はメールアドレスは取得しないつもりだったので、ここを入力せず、申請もしていませんでした。

しかしこれが原因かもということで、メールアドレス取得の申請を行いました。
LINE Developerで行いますが、そんなに時間はかかりません。
（おそらく「申請済み」と表示されればOK）

画像3


どハマりポイント【Auth0編】

Auth0の設定手数は少ないですが、入力内容は確認が必須です。

①LINE Developers内　コールバックURL

Auth0登録時のドメインを使って、以下のようなコールバックURLを設定します。
「https://TENANTドメイン.auth0.com/login/callback」

登録時にメモし忘れたため、右上の文字列がそうだろうと「TENANTドメイン」部分にコピペ。「.auth0.com/login/callback」を付け足しました。
しかし結果は、テスト接続失敗。

原因は、ドメイン部分が間違っていたこと。
アプリページのDomainをコピーし「login/callback」を付け足します。
右上の文字列と微妙にだけ違っているので、なかなか気付けませんでした。

画像5

画像4

②Allowed Callback URLs・Allowed Web Origins

BubbleアプリのURLを入れますが、テストページのURLだとエラーになりました。
デプロイ前でも「version-test」の文言は取っておきます。

まとめ

本当にここまで長かったですが、無事に方法が確立できてよかったです。
相談に乗ってくださったみなさん、本当にありがとうございました！

この記事が気に入ったらサポートをしてみませんか？