見出し画像

【Bubble×LINE】あなたは大丈夫?LINEログイン後、完全にログアウトする方法

以前、bubbleアプリにおいてLINEログインの実装に成功した、という記事を書きました。

Auth0を利用して、ノーコードでLINEなどのSNSログインを実装でき、非常に便利です。

しかし、そこで終わってはいけません。
ログアウト処理実装までが、SNSログイン実装です。

今回、NoCodeCamp内でいただいた、たかしさんからの質問をきっかけに
ノーコードラボさんからその方法を教わったので、紹介します。


これまでの状態

前回記事を書き終えた段階では、ログアウト処理は次のような状態でした。

スクリーンショット 2020-09-09 20.55.33

「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を設定します。
この欄はリンク先のホワイトリストの役割をしており、設定されていればログアウト時に転送することができます。

スクリーンショット 2020-09-09 21.47.21


--


次に、転送先URLのエンコードを行います。
僕はこれを忘れてハマってました笑

「:」や「/」はこのまま渡そうとするとエラーとなるので、適当なエンコードツールで変換を行います。


--


いよいよbubbleでログアウトの実装をします。

APIドキュメントに書いてあったので、まずAPI Connectorを試しました。
しかしおそらく、返り値が何も無いためエラーが出てしまいます。
(forumを見ると回避策があるみたい?要検証ですね。)

そこで、WorkFlowのOpen an external websiteから直接アクセスすることで実装できました。

スクリーンショット 2020-09-09 20.56.27

​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を使うのであれば知っておくべき内容なので、ぜひ併せて読んでください。



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