Cloudflare Workers + Kinde + Stripe

Page content

Cloudflare Workers + Kinde + Stripe を組み合わせて月額サブスクリプションを構築するための、具体的かつ実践的な手順を解説します。

この構成は、インフラコストを抑えつつ（0円〜）、本格的なB2B/B2C SaaSを構築するのに非常に適しています。

全体像：役割分担

  • Kinde: ユーザー認証、プラン（権限）管理、Stripeとの連携。

  • Stripe: 決済処理、サブスクリプションの課金実行、カード情報管理。

  • Cloudflare Workers: 認証チェック、有料コンテンツ/APIの提供。

ステップ 1：Kinde と Stripe の連携設定

  1. Stripe 側での準備:

    • Stripeアカウントにログインし、開発用の「テストモード」を有効にします。

    • APIキー（公開可能キーとシークレットキー）を控えておきます。

  2. Kinde 側での接続:

    • Kinde管理画面の [Settings] > [Billing] に進みます。

    • Stripeをコネクターとして選択し、StripeのAPIキーを入力して接続します。

  3. プラン（Product）の作成:

    • Kinde上で「Pro Plan」などの名前でプランを作成します。

    • 支払サイクルを「Monthly」、金額を設定します。

    • これにより、Stripe側にも自動的に対応する商品（Product）と価格（Price）が作成されます。

ステップ 2：Cloudflare Workers への SDK 導入

Workers プロジェクト（AstroやHonoなどを使用している場合を含む）に、Kinde の SDK をインストールします。

Bash

npm install @kinde-oss/kinde-typescript-sdk

次に、wrangler.toml に Kinde から発行された環境変数を設定します。

Ini, TOML

[vars]
KINDE_DOMAIN = "https://your_subdomain.kinde.com"
KINDE_CLIENT_ID = "your_client_id"
KINDE_CLIENT_SECRET = "your_client_secret"
KINDE_REDIRECT_URL = "https://your-app.pages.dev/api/auth/kinde_callback"

ステップ 3：認証とサブスク情報の取得（コード実装）

Workers 内で、ユーザーがログインしているか、かつ「Proプラン」の権限を持っているかを判定するロジックを実装します。

TypeScript

import { createKindeServerClient, GrantType } from "@kinde-oss/kinde-typescript-sdk";

export default {
  async fetch(request, env) {
    const kindeClient = createKindeServerClient(GrantType.AUTHORIZATION_CODE, {
      authDomain: env.KINDE_DOMAIN,
      clientId: env.KINDE_CLIENT_ID,
      clientSecret: env.KINDE_CLIENT_SECRET,
      redirectURL: env.KINDE_REDIRECT_URL,
      logoutRedirectURL: env.KINDE_LOGOUT_REDIRECT_URL,
    });

    // 1. セッションからユーザー情報を取得
    const isAuthenticated = await kindeClient.isAuthenticated(request); 
    
    if (!isAuthenticated) {
      // 未ログインならログインページへ
      return Response.redirect(await kindeClient.login(request));
    }

    // 2. Kindeの「フラグ」機能を使ってサブスク状態をチェック
    // Kinde管理画面で "is_pro" というBooleanフラグをProプランに紐付けておく
    const { value: isPro } = await kindeClient.getFlag(request, "is_pro");

    if (isPro) {
      return new Response("あなたは有料会員です。プレミアム機能を利用できます！");
    } else {
      // 未課金なら Stripe のチェックアウト（Kindeが生成したリンク）へ誘導
      return new Response("有料プランへのアップグレードが必要です。");
    }
  }
};

ステップ 4：Stripe 顧客ポータルの提供

月額サブスクでは「解約」や「カード変更」の機能が必須です。Kinde を使えば、Stripe の Customer Portal（顧客ポータル） へのリンクを簡単に提供できます。

  1. Kinde 管理画面の Billing 設定で「Customer Portal」を有効にします。

  2. アプリ内のマイページなどに「サブスクリプション管理」ボタンを配置し、Kinde が提供するポータル URL へリダイレクトさせるだけです。

構築のポイント

  • Webhook の設定: 支払い失敗やキャンセルなどのイベントをリアルタイムに反映させるため、Kinde の Webhook 設定を確認しておきましょう（通常、Stripe との同期は Kinde が自動で行ってくれます）。

  • Feature Flags（機能フラグ）の活用: 「このボタンは Pro ユーザーにだけ見せる」といった制御を、コードを書き換えずに Kinde の管理画面から ON/OFF できるようになります。

  • ローカル開発: Cloudflare Workers のローカル開発環境（wrangler dev）でも Kinde のリダイレクトが正しく動作するよう、Kinde 側の Allowed Callback URLs に http://localhost:3000/... を追加しておくのを忘れないでください。

この手順で進めることで、認証・決済・認可が統合された、スケーラブルな月額サブスクリプションシステムが完成します。次は具体的にどの部分（コードの詳細やStripeの設定など）を深掘りしたいですか？