【Bubble×LINE】あなたは大丈夫?LINEログイン後、完全にログアウトする方法
以前、bubbleアプリにおいてLINEログインの実装に成功した、という記事を書きました。
Auth0を利用して、ノーコードでLINEなどのSNSログインを実装でき、非常に便利です。
しかし、そこで終わってはいけません。
ログアウト処理実装までが、SNSログイン実装です。
今回、NoCodeCamp内でいただいた、たかしさんからの質問をきっかけに
ノーコードラボさんからその方法を教わったので、紹介します。
これまでの状態
前回記事を書き終えた段階では、ログアウト処理は次のような状態でした。
「Log the user out」のみ。
通常のbubbleアプリでのログインならこれでOKですが、今回は違います。
Auth0を経由し、LINEにログインし、その情報を利用してbubbleアプリへログインをする。
つまり、3つのサービスにログインしている状態となります。
・bubbleアプリ
・Auth0
・LINE
このうち、LINEにログインしたままになるのは問題ありません。
ログアウトさせることも可能ですが、あまり一般的な方法ではないです。
(このbubbleアプリからログアウトするたびに、GoogleやTwitterアカウントからもログアウトされると非常に面倒ですよね?そういうことです。)
よって今回は、bubbleアプリとAuth0の2つのサービスに対してログアウト処理を行います。
bubbleアプリからのログアウトは前述の通りです。
今回、これまで未設定だったAuth0からのログアウト処理を追加します。
Auth0からのログアウト処理
ドキュメントによると、ログアウトするには下記へアクセスが必要です。
GET https://YOUR_DOMAIN/v2/logout?
client_id=YOUR_CLIENT_ID&
returnTo=LOGOUT_URL
client_id:Auth0のクライアントID
returnTo:ログアウト後の転送先URL
この2つを、https://YOUR_DOMAIN/v2/logout?へ渡します。
(YOUR_DOMAINは、ご自身のAuth0ドメイン)
--
まず下準備として、returnToのURLを有効化します。
Auth0の Applications > Allowed Logout URLsに、転送先URL
つまりbubbleアプリのURLを設定します。
この欄はリンク先のホワイトリストの役割をしており、設定されていればログアウト時に転送することができます。
--
次に、転送先URLのエンコードを行います。
僕はこれを忘れてハマってました笑
「:」や「/」はこのまま渡そうとするとエラーとなるので、適当なエンコードツールで変換を行います。
--
いよいよbubbleでログアウトの実装をします。
APIドキュメントに書いてあったので、まずAPI Connectorを試しました。
しかしおそらく、返り値が何も無いためエラーが出てしまいます。
(forumを見ると回避策があるみたい?要検証ですね。)
そこで、WorkFlowのOpen an external websiteから直接アクセスすることで実装できました。
https://{Auth0テナントドメイン}.us.auth0.com/v2/logout?client_id={Auth0クライアントID}&returnTo={転送先URL}
画像のように設定すれば、ログアウトボタンを押すと
①bubbleアプリでのログアウト
②Auth0でのログアウト
と、2つの処理が連続で行われ、bubbleページへ転送されて完了です。
これで正常なログアウト処理が実装できました。
bubbleでログアウト→再度ログイン時に、Auth0の画面が現れたら成功です。
Auth0にもLINEにもログインしたままであれば、ログインクリック後すぐbubbleアプリ上でログインが成功してしまいます。
たかしさんによるnote記事
僕は手順をサラッとまとめましたが、質問者であるたかしさんは、Auth0の全体像も体系的にまとめています。
Auth0を使うのであれば知っておくべき内容なので、ぜひ併せて読んでください。
この記事が気に入ったらサポートをしてみませんか?