関連のツールの紹介、使い方などをやさしく説明しています。Tumblrこんにちは!今回は、Create.xyz(以下Create)でSupabaseと連携してサインアップ機能を実装する方法をご紹介します。Createは当ブログでもおなじみのアプリ構築AIサービスです。Supabaseはオープンソースのデータベースサービスです。当ブログではCreateのFunctionを利用して様々な機能の実装方法をご紹介してきましたが、今回もFunctionを使ってサインアップ機能を実装していきます。APIでSupabaseにユーザー情報を保存してサインアップするFunctionを作成し、Pageで実装するという手順で進めていきます。Supabaseの設定方法もご紹介しているのでぜひご参考にしてください。概要SupabaseはPostgreSQLを基盤としたオープンソースのデータベースです。APIでデータのCreate、Read、Update、Deleteができます。認証・ユーザー管理やストレージなどの機能も提供しています。Firebaseとの類似点が多いことから「オープンソースのFirebase」と呼ばれることもあるそうです。supabase.com料金プランはFree、Pro、Team、Enterpriseの4プランがあります。ユーザー数やファイル容量、Project数に応じてプランを選んでください。今回は無料のFreeプランで進めていきます。Securityを使って行ごとのセキュリティを設定することができます。RLSはテーブルごとに有効化でき、テーブルの設定タブで設定します。RLSを有効化したらPolicyを設定します。supabase.com基本的にはRLSを有効化するのが推奨されていますが、今回は接続の確認のみを行いたいのでRLSを無効化して進めていきます。本番環境で公開する際にはRLSを有効化し、適切なPolicyを設定するようにしてくださいね。Supabaseの手順それでは早速サインアップ機能を実装していきます。最初にSupabaseで必要な設定を行います。APIでサインアップエンドポイントを使ってサインアップをするところまでの手順をご紹介します。tokenが必要な場合は、さらにサインインエンドポイントに接続して取得する必要があります。下記をご参考にしてみてください。Project作成まずはSupabaseにサインアップしてCreateと連携するProjectを作成します。下記からSupabseにサインアップします。Project」をクリックして新規でProjectを作成します。Homeに移動します。Keyが表示されるのでコピーしておきます。サインアップの設定Emailアドレスとpasswordを入力してサインアップできるように設定します。ナビゲーションメニューのAuthentication>Providersをクリックします。provider」のみをオンにした状態にして「Save」で保存します。Infoテーブルの作成・auth.usersテーブルとの紐づけSupabaseではサインアップ情報はauth.usersテーブルに保存されます。auth.usersテーブルで保存できるのはemailやPassword(ハッシュ化されます)などのサインアップ・サインインに必要な情報のみなので、ニックネームや性別などのユーザー情報を保存したい場合は新たにテーブルを作成してauth.usersと紐づける必要があります。今回は、名前とユーザーIDをテーブルに保存したいという設定で、テーブルを作成してauth.usersと紐づけします。table」をクリックしてテーブルを作成します。タブが開くのでテーブルの設定を行います。下記の通り設定してください。uuid※今回は連携の確認をするだけなのでRLSをDisabledにしましたが、公開前には必ずEnabledにして適切なPolicyを設定してください。ここまで入力できたら、Infoテーブルとauth.usersテーブルの紐づけを設定します。今回はColumns「user」でauth.usersと紐づけを行いたいので、「user」のリンクアイコンをクリックして設定タブを開きます。下記の通り紐づけるテーブルを選択します。下記を選択すると紐づけるテーブルをauth.usersに設定できます。users下部に表示される項目を設定して「Save」をクリックします。下記の通り設定すると、auth.usersテーブルに保存したidをInfoテーブルのuserに保存することができるようになります。keys欄に設定した内容が表示されているのを確認して「Save」をクリックします。Infoテーブルの作成とauth.usersとの紐づけ完了です。Createの手順それでは、Createでの実装に移ります。Function作成まずはFunctionを作成します。(public)をSecretに保存します。SupabaseのProject作成時にコピーした値です。Settingsでも確認できます。Function」からFunctionを作成します。secret」をクリックして2つの値を保存します。Function生成プロンプトを入力してFunctionを生成します。Supabaseのサインアップエンドポイントを使用してサインアップし、ユーザー情報をInfoテーブルに保存するという内容になります。プロンプトを入力して「Generate」をクリックします。今回は下記のプロンプトを使用しました。プロンプト...Supabaseと連携してサインアップする機能。passwordを保存する。ユーザー指定のuseridを保存する。このとき、先ほどサインアップ時に取得したidをこのテーブルのuserに保存する。結果を取得し、成功した場合はuser情報を出力する。失敗した場合は取得したエラーコードとエラーメッセージを出力する。下記のFunctionが生成されました。Code」をクリックしてコードを表示すると、サインアップとInfoテーブルのデータ保存に下記のエンドポイントに適切な情報を送信しているのが確認できます。Functionテストそれでは、実際にサインアップとInfoテーブルにデータが保存できるか確認します。function」をクリックします。「Completed」とユーザー情報が表示されたらSupabaseを確認します。Editorを開き、Schemaで「auth」を選択してusersをクリックしてauth.usersテーブルを確認します。先ほど入力したメールアドレスが保存されています。次にSchemaで「public」を選択してInfoをクリックしてInfoテーブルを確認します。idが保存されています。上記の二つの紐づけを確認すると、auth.usersのidの値が、Infoテーブルのuserに保存されています。tokenを受け取ることができるようになります。tokenを使ってサインインユーザーのページ遷移等を行いたい場合は下記のプロンプトを参考にしてみてください。プロンプト...Supabaseと連携してサインアップする機能。Keyを使ってアクセスする。passwordを保存する。responseの内容を出力する。ユーザー指定のuseridを保存する。このとき、先ほどサインアップ時に取得したidをこのテーブルのuserに保存する。Page作成それでは、作成したFunctionを使ってサインアップページを作成します。Page生成Functionを作成したのと同じProjectでPageを新規作成します。Prompt欄に、サインアップページの概要を入力して「Generate」をクリックします。今回は下記のプロンプトを入力しました。プロンプト...サインアップページ。id、名前の入力欄と、新規登録ボタンがある。全ての欄を入力しているときに新規登録ボタンをタップできる。新規登録ボタンをタップしたら/FUNCITON_NAMEを使ってサインアップする。下記のようなページが生成されました。必要な入力欄とボタンが揃っています。コードを確認すると、作成したFunctionにemail、password、name、useridを送信し、成功・失敗に応じてメッセージを表示する内容になっています。Pageテスト生成したPageをDemoモードで表示してサインアップできるかを確認します。ビルダー画面左上の「Demo」をオンにして、入力欄を埋めて「新規登録」ボタンをクリックします。成功のメッセージが表示されました。Supabaseを確認します。まとめ今回は、CreateでSupabaseと連携してサインアップページを作成する方法をご紹介しました。URLを指定するだけでAPIを実行できましたね。EditorもExcel等と似ていて使い慣れたインターフェースなので、習得に時間はかからなさそうです。色々なデータベースを試してみて使いやすいデータベースを見つけてくださいね!Supabaseについては、ノーコードラボのZenn公式ブログでFlutterFlowとの連携方法についてご紹介しています。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。