Difyアプリにユーザー機能とサブスク機能を実装する

2024年7月19日 18:44

Dify+サブスク機能+ユーザー認証のアプリのサンプルの実装例が全然なかったので、自分でサンプル作ってみました!

.envに必要な情報を入力してdocker起動するだけで簡単に試せます!

機能

ユーザー認証

ユーザー登録・ログイン・ログアウト・パスワードを忘れた場合、などのユーザー認証の基本的な認証機能は実装されています。ユーザー認証にはsupabaseを使っているので、supabaseの登録が必要です。

このサンプルではユーザーログインをしないとchat画面に入れない仕様になっています。

課金機能

Stripeで作成した課金機能が使えます。

課金用画面はstripeのGUI画面で簡単に作成することができ、作成した画面のURLを.envファイルに設定するだけでリンクできます。

サブスクの有無によって処理の変更

サブスクしているユーザーとしていないユーザーでchatの処理を簡単に変えることができます。

例えば、上記の「にゃんにゃんチャット」の例では、サブスクを登録していないユーザーには塩対応ですが、サブスクしたユーザーには、媚びまくっています。

このようにdifyに"user_subscribe"フラグを受け取れるようにして、それを質問分類器で条件分岐するだけで、簡単に課金ユーザーと非課金ユーザーの処理を変えれます。

使われてる技術・フレームワークについて

このサンプルでは下記の技術・フレームワークを使って実装しています。

dify

いうまでもなく、AIのchatbot機能にはdifyが使われています。

difyをapiで呼び出す方式を使用していて、difyとその他の機能・アプリは完全に独立しているため、モジュール同士の粗結合を実現しています。

difyのソースコードに対する変更は何も必要がないので、気軽にアップデートが行えます。

streamlit

当アプリでは上記の通りapi呼び出しでdifyを呼び出してるため、フロントは別で実装する必要があります。

フロントエンド(厳密には違うけど・・)はstreamlitを採用しました。

streamlitは非常に使いやすいwebアプリ開発のためのpythonライブラリで、数行のコードでchatアプリを作ることができるのでとても便利です。

ちょっとしたチャットアプリを作りたいだけなら、非エンジニアの方や初学者の方には一番おすすめです。

supabase

ユーザー認証にはsupabaseを採用しました。

supabaseはシンガポールを拠点とするスタートアップによって運営されているBaaSサービスで、50000ユーザーまで無料でユーザー認証機能を使うことができます。

ユーザー認証の他にもデータベース機能やStorage機能なども簡単に実装することができ、ユーザーの認証以外の情報(誕生日とか性別とか)を登録する機能や、ユーザーがアップローしたファイルを保存する機能などを、簡単に実装することができます。

ユーザー認証にはclerkというサービスも使いやすそうで良かったのですが、dify+clerkの参考文献が殆どないのと、自分がpython畑の人間でnext.jsの経験がなかったので見送りました😓

stripe

課金機能にはpaypallとstripeの二択かと思いますが、このサンプルではstripeを使っています。

stripeとはオンラインで完結できる決済サービスです。簡単にサブスク機能含めた様々な課金システムが実装できます。

stripeは若干初学者には難しいのとお金が絡む機能なので,サンプルをテストモードで動かす分にはいいですが、実際に本番環境で使用するときは、しっかりと理解した上で使用するのをお勧めします。

事前準備

事前にsupabaseとstripeの登録が必要です。

supabaseの登録

登録の仕方はこちらの記事が参考になると思います。

登録が完了し,組織・プロジェクトの作成が完了したら下記をしてください。

1,api keyとapi urlのメモ。
settings > API > Project API keys > service role> keyとproject URLを控えておきます
あとで,SUPABASE_KEYとSUPABASE_URLに貼り付けます。

2,auth providerでgoogleの有効化
google認証も試したい方はこちらで有効化してください。
emailだけ試したい人はデフォルトでも大丈夫です。

stripeの登録

stripeの登録の手順はこちらの記事が参考になると思います。

登録とプロジェクトの作成が終えたら、api keyの控えとpaymentlinkの作成をします。

API keyは開発者 > API キーのシークレットキーです

paymentlinksの作成が終わると、作成したpaymentlinkの詳細の中にurlがあるので控えておきます。

How to use(ローカル)

ここからが使い方の解説です。
基本的には.envに必要なapiキーやurlを設定してdockerを立ち上げるだけで使えます。
今回はローカルでの環境構築・手順となります。

step1 Difyプロジェクトの準備

既存のdifyフォルダがある場合、dify-userauth-stripe-sampleフォルダの直下にコピーします。
既存のdifyがない or 使いたくない場合は、difyをgit cloneしてください。

step2 .envの設定

.env.templateをリネームして.envとします。

その後、それぞれの変数を設定します。

DIFY_API_KEY = #dify api key
ROOT_URL = "http://*.*.*.*/" #dify api root url
SUPABASE_URL = #supabase url
SUPABASE_KEY = #supabase key
STRIPE_API_KEY = #stripe api key
STRIPE_API_KEY_TEST = #stripe api key for test
STRIPE_TEST_MODE = "true" #stripe test mode true or false
STRIPE_LINK = #stripe link
STRIPE_LINK_TEST =  #stripe link for test mode

ROOT_URLはローカルで動かす場合、注意が必要で,localhostをそのまま入れると動作しません。
macの場合ですが,ifconfigでipアドレスが確認できるので、そちらのipアドレスを利用してください。私の環境ではen0:inetにありました。

また、STRIPEのurlとlinkはテストモードの場合は,テストモードを"true"にしてSTRIPE_API_KEY_TEST,STRIPE_LINK_TESTに先ほどメモしておいたurlとapi keyを入力。

step3 difyコンテナの立ち上げ

既存のローカルdifyと同じです。
docker-compose up -dで立ち上げます。

cd dify/docker
docker-compose up -d

step4 Myappコンテナの立ち上げ

cd myapp
docker-compose up -d

step5 Myappの起動

http://localhost:8501/
でブラウザで起動します

サブスク登録者の処理をDify側の設定する

サブスク登録している人としてない人でchatの処理を変える方法です

user_subscribedという変数をinputで送るようにしてるので、それをdify側で受け取れるようにして条件分岐して使うだけで簡単に使えます!

注意点

このサンプルは1日で作ったもので、処理を保証するものではありません。あくまで、サンプルとしてお試しください。
機能も全然足りていません。サブスク解約機能chat以外のdify apiの呼び出しなど。後々実装予定です。

あくまで叩き台なので、「こうした方がいいよ」とか「追加機能」があれば、プルリクやissue書いてもらえたら嬉しいです!

まとめ

サブスク機能とユーザー認証があればDifyでもっとできることが増えるなぁと思って、今回作ってみました!

これを使って近日中にユーザー登録＋サブスク形式のチャットアプリを個人開発していこうと思います!

ここまで読んでいただきありがとうございました。