ono
1
お世話になります。
おそらくあと少しのところで詰まっています。
■やりたいこと
Bubble アプリで Auth0 を使ったログイン認証 を実装し、
認証後に Xano にユーザー情報を登録し、register ページ（プロフィール入力ページ）にリダイレクトさせる。
■現在のAPI設定
■現在（理想）のフロー
①ユーザーが login ページ（https://xxxxxx.com/login）でログインボタンを押す
→ Auth0 の authorize エンドポイントにリダイレクト
→ ユーザーがログイン or 新規登録を行う
②①完了後、Auth0 が code を発行し、oauth_redirect にリダイレクト
リダイレクト先: https://xxxxxx.com/api/1.1/oauth_redirect?code=XXXXXX
③Xano の Continue API(codeをもとにaccess_tokenを取得するためのAPI) を呼び出し、code を渡して access_token を取得
Continue API: https://xxxxxxxxxx.xano.io/api:us_-Xoqo/oauth/auth0/continue
④access_token を取得し、Xano にユーザー情報を登録
register ページ (https://xxxxxxx.com/version-test/register) に遷移
■発生している問題
① ログイン後に oauth_redirect に飛ぶが、エラーページになってしまう
https://xxxxxxxx.com/api/1.1/oauth_redirect?code=XXXXXX に遷移するが、意図したページ (register) に行かない。
② Continue API の code が手動でしか渡せない
Continue API に code を渡せば access_token が返るが、現在は手動で 固定値のcode を入力しないと動かない。
code（のvalue）を動的にcontinueAPIに渡す方法がわからない。
■試したこと
Auth0 の Allowed Callback URLs に https://xxxxxx.com/version-test/register を追加
Backend Workflow で code を Continue API に渡すよう設定
register ページで token を URL から取得し、Custom State に保存するよう設定
Continue API のパラメータを手動で渡したら access_token が取得できた
また、手動だとXanoにもアカウント登録できた
■質問
Auth0 の oauth_redirect 後に register ページにリダイレクトする方法は？
Continue API に code を自動で渡すための適切な Bubble の設定は？
最終的に、手動で code を貼り付けなくても、ログインフローがスムーズに動くようにしたいです。
Bubble, Xano, Auth0 を組み合わせた場合の、適切な設定を教えてください。
お手数おかけいたしますが、何卒よろしくお願いいたします。
Bubble + Xano連携はよくやっていますが、Auth0を組み合わせたことはないので、見当違いだったらスルーしてください。
リダイレクトURLの末尾にparameterを渡すよりも、Bubbleのcurrent user機能を使って（ログインしていないユーザーも使用できる）tokenを一時保存させてみてはどうでしょうか。
つまり、ユーザーがログインに成功すると、Bubbleの「Current User」にAuth0のユーザー情報を保存されます（Auth0 idやメールアドレスなど）。
そしてこのCurrent User Auth情報を元にXanoにデータ保存させることで解決できるのでは？と思いました。
もしくは、XanoにもAuth認証機能があるので、そちらを試すのもいいかもしれません。
「いいね！」 3
ono
3
じょん様
お世話になります。
ご教示いただきありがとうございます。
実は現在、Bubbleのコミュニティでも質問をしておりまして、そちらでもらっている回答をもとに実装を進めてみています。
ロジックを少し変えまして、ワークフローはいったんAuth0のログイン画面を開くところまでに変更しました（ContinueAPIにcodeがうまく送れていないようで、呼び出しでエラーが出てしまうため）。
アカウント登録完了後、ページロードを挟んで（codeからtokenを取得した上で）registerページ（プロフィール入力ページ）に遷移させたいのですが、そこがうまく実装できず、引き続きアドバイスをもらっている状況です。
また、当初はCustom Stateで実装をと考えていたのですが、それよりもBubbleのプラグインを使った方がよいのかなと思いつつ、試行錯誤中です。
もしうまくいかなかった場合、あらためてじょん様にご連絡させていただけますと幸いです。
その際、ご教示いただいたcurrent user機能をもとに実装をしてみたいと思います。
また、ご教示いただいた内容とは変わってしまいますが、ここまでの実装内容で何か問題がございましたら、ご指摘いただけますと幸いです。
進捗あり次第、また随時ご報告させていただければと思います。
何卒よろしくお願いいたします。
お手数をおかけしますが、引き続きよろしくお願いいたします。
これ難しいですね。。。
ちょっと力になれないかもしれません
もし自分がonoさんと同じ問題に直面したらAuth0もしくはXanoのサポートに聞いちゃいます。
Auth0はわかりませんが、Xanoのサポートはとても手厚いので気に入っています。
「いいね！」 1
ono
5
ありがとうございます！
私自身xanoへの問い合わせをすっかり忘れていました。
このあと解決しなければ、再度xanoへ問い合わせしてみようと思います。
引き続きよろしくお願いいたします。
「いいね！」 1
ono
6
ご無沙汰しております。
じょんさん、先日はありがとうございます。
こちら、いったん解決したので備忘録として残しておきます。
Xanoへ質問しましたが、私の質問が下手だったのでBubbleのコミュニティで質問しながら、自力で解決しました（ので、正しい実装とは限らないので、同じ状況の方がいらっしゃればあくまでもご参考までに）
まず、Bubbleでログインボタンを押した後のワークフローです。
Xanoで用意されているエンドポイント「/oauth/auth0/init」から、Auth0のログインページを取得して、それを開きます。
ログイン後、どこのページにリダイレクトさせたいかをXanoのdefault valueやAuth0のCallback URL、Bubbleのワークフローで指定します。
また、ログイン後にAuth0から一時的な「code」が返されます。
その後、（他にもやり方はありそうですがいったん）リダイレクトする（=ページがリロードされる）ので、リダイレクト先のページで以下のワークフローを組みました。
ページがリロードされたら、まずはXanoで用意されているエンドポイント「/oauth/auth0/continue」で、codeをもとにTokenを取得します。
このTokenは、XanoのDBを参照するときに使います。
そして、Xanoで用意されているエンドポイント「/auth/me」に「Bearer （STEP1で取得した）Token」でリクエストすると、XanoのUserテーブルの情報（レコード）が引っ張ってこれます。
引っ張ってきた情報を、最初はCustom Stateに保存していましたが、リロードすると消えてしまうので、以下のプラグインを利用してブラウザのローカルストレージに保存することにしました。
これで永続的に情報が維持できるので、リロードしても問題なくなりました。
ただ、リロードするとまたcontinue等が動いてしまうので、ワークフローの最初の方はOnlyWhenでの工夫が必要だと思います。
以降、取得したTokenを使って、ユーザーの各種情報を取ってくる、ということになると思っています。
以上となります。
引き続きよろしくお願いいたします。
「いいね！」 2
