お客様とエアレベルのアプリケーションの行レベルのアクセス

エアテーブルについて聞いたことがありませんか.🤔
Airtable オンラインプラットフォームにアクセスし、管理し、リレーショナルまたはスプレッドシートのような情報に協力しています.Airtableの人々は、ユーザーエクスペリエンスと製品の技術的な面で驚くべき仕事をしました.ノーコードツールとして-ほとんどのユースケース-それはデータ管理の周り全体のチームの効率を支援することができます.
Airtableは、アプリケーションで提供するリソースの任意の種類のデータベースとして偉大な選択ですが、ほとんどのWebアプリケーションが必要な粒状のアクセス管理機能を欠いています.

アパートハンティング🏘
一例として、不動産業者を追加し、クライアントのそれぞれのための最も魅力的なアパートを管理する必要があるアパートの狩猟アプリケーションを検討します.各アパートメントは、単一のテーブルに記載され、クライアントがそれらのために選択されたアパートにアクセスできることを確認する必要があります.それを達成するために、我々はあなたのairtableアパートハントデータベースの特定の行だけに認証されたユーザーアクセスを提供するためにいくつかの店員魔法を活用することができます.
完全なコードリポジトリはclerk-airtable-apartment-hunt .

アパートハントのセットアップ🛠
KickStartアパートハントプロジェクトには、あなたのAirtableアカウントを作成してApartment Hunting Template テンプレートギャラリーから.

作成したデータセットで、アパートが割り当てられたメールを表す列を追加する必要があります.先に行くと“メール”タイプのメールの列を作成します.

列の型をEメールに設定すると、メールアドレスが有効であることを確認できます.
我々の例のために、あなたは先に行くことができて、あなたのアパートハンティングアプリケーションにアクセスするために使う電子メールアドレスで、電子メールコラムを満たすことができます.私にとっては[email protected] .

クラークアプリケーションの作成🥊
あなたが店員に新しいならば、あなたは必要ですcreate an account プラットフォームでは、新しいアプリケーションを作成する手順に従ってください.
この例のアカウントと新しいアプリケーションを作成したら、リポジトリのセットアップに移動できます.

コードを見せてください
完全な例をローカルで実行するには、いくつかの小さなステップに従う必要があります.まず、先に行くと例のアプリケーションをクローンします.

git clone https://github.com/clerkinc/clerk-airtable-apartment-hunt.git

プロジェクトフォルダ内に行き、.env.example ファイルを.env.local ファイル.

cp .env.example .env.local

従業員環境変数
フロントエンドAPIの値が必要です.dashboard 開発インスタンスのホームページにあります.この値をNEXT_PUBLIC_CLERK_FRONTEND_API .
次に、設定の下にダッシュボードにも表示できるClerk APIキーが必要になります➜ APIキー.加えるCLERK_API_KEY あなたの.env.local ファイル.
最後に.環境変数ローカルファイルは次のようになります.

AIRTABLE_API_KEY=keyojbaeZ5KBe9JMR
AIRTABLE_BASE_ID=appBMXDYAGWAgvH8S
NEXT_PUBLIC_CLERK_FRONTEND_API=clerk.2ct1o.leet.lcl.dev
CLERK_API_KEY=test_avDIYjpk0SqaTGF1Wx8MdrEHZIkg2zSObU

これでプロジェクト依存関係をインストールする必要がありますyarn install プロジェクトフォルダの中にyarn dev ローカルでアプリケーションを起動します.

従業員があなたのデータへの認証されたアクセスを提供する方法🔐
従業員とのAirtableデータアクセスを認可するために、我々はバックエンドでAirtable APIの上に薄くてカスタマイズ可能なアクセス管理層を導入します
Airtable REST APIはブラウザから直接呼び出すことを制限しませんが、機密情報を公開する必要があるので、推奨されません.詳しくはこちらをご覧くださいforum answer .
アパートハンティング申請では@clerk/nextjs ユーザ認証のフロントエンドに注意してください.アパートのデータアクセスのために、我々は次に使用します.JS APIのルートは、安全な方法でAirtable APIと対話する.これらの路線使用@clerk/nextjs/api 署名されたユーザを決定する.

現在のユーザーに割り当てられたアパートを示す🙋
ユーザーがそれらに割り当てられたプロパティへのアクセス権を持っていることを確認するには、/api/apartments エンドポイントこの情報を取得します.このエンドポイント用のコードは次のようになります.

async function handler(
  req: WithSessionProp<NextApiRequest>,
  res: NextApiResponse
) {
  switch (req.method) {
    case "GET":

      /** 
       * Get the user email from the userId attached on the request.
       */
      const userId = req.session?.userId as string;
      const user = await ClerkInstance.users.getUser(userId);
      const primaryEmailAddress =
        user.emailAddresses.find(
          (emailAddress) => emailAddress.id === user.primaryEmailAddressId
        )?.emailAddress || "";

      /** Use the email to retrieve the assigned apartments. */
      const apartments = await getApartmentsByEmail(primaryEmailAddress);
      res.status(200).json(apartments);
      break;
    default:
      res.status(405).end();
  }
}

/** 
 * Only allow authenticated access or respond with status code 403 Forbidden.
 * Add the req.session attribute on the NextApiRequest object
 */
export default requireSession(handler);

The requireSession 認証されたユーザがエンドポイントにアクセスしていることを保証しますreq.session リクエストオブジェクトの属性.js
このエンドポイントでは、認証されたユーザーのプライマリメールアドレスを取得し、このメールに割り当てられたアパートのみを取得するために使用します.ここでは、我々はユーザーの主要な電子メールアドレスをチェックするだけです、しかし、従業員もアカウントごとに複数の電子メールアドレスを支持するので、あなたはそれに応じて論理を調節することができました.

割り当てられたユーザーがアパートの状態を修正するのを許すだけです🙅
同様に、アパートのステータスを指定されたユーザーだけに制限する必要があります.このアクセスを制限するロジックは以下のようになります.

async function handler(
  req: WithSessionProp<NextApiRequest>,
  res: NextApiResponse
) {
  switch (req.method) {
    case "PUT":
      const apartment = req.body;
      const userId = req.session?.userId as string;

      /** We make sure prevent a user with different account to update the visitation status. */
      const user = await ClerkInstance.users.getUser(userId);
      const primaryEmailAddress = user.emailAddresses.find(
        (emailAddress) => emailAddress.id === user.primaryEmailAddressId
      )?.emailAddress;

      /** We check if the persisted apartment email matches the requesters. */
      const persistedApartment = await getApartmentById(apartment.id);


      /** If the emails do not match, return 401 Unauthorized */
      if (primaryEmailAddress !== persistedApartment.fields.Email) {
        res.status(401).end();
        break;
      }

      const results = await updateApartment(apartment);
      res.status(200).json(results);
      break;
    default:
      res.status(405).end();
      break;
  }
}

export default requireSession(handler);

アパート取得と同じように、私たちはrequireSession ミドルウェア我々は、彼らがアパートに割り当てられることを確実とするために署名されたユーザーの電子メールアドレスで、余分のチェックを実行します.

回収する🏖
これは、エアテーブルをデータベースとして使用するアプリケーションに行レベルアクセスを追加するためにClerkを使用する方法の簡単な例でした.我々はこの例を構築したが、我々は本当にどのように強力なエアテーブルは、プロジェクトのデータを管理することができますどのように強力に感銘を受けたほとんどないコード.
同様に、Clerkは認証とユーザー管理の複雑さを取り除き、堅牢なソリューションを小さなコードで展開することができ、ユーザはダッシュボードを介してコードなしで管理することができます.
何かフィードバックがある場合は、トラブルに実行している、またはちょうどあなたが構築したものを共有したい-私たちはあなたから聞いてみたい!我々のコミュニティの上でTwitterで我々に手を伸ばしてくださいDiscord server , またはsupport channels .