به طور خودکار داده های کاربر را با Clerk OAuth به پایگاه داده ارسال کنید

نکات کلیدی

• بیاموزید که چگونه از Webhooks Clerk استفاده کنید.
• درک کنید که چگونه می توانید وب سایت های منشی را تأیید کنید.
• از NGROK برای افشای یک نقطه پایانی محلی برای دسترسی خارجی استفاده کنید.

پیشینه

هنگام استفاده از Clerk OAuth برای تأیید اعتبار کاربر ، تشخیص ثبت نام های جدید کاربر از برنامه وب می تواند چالش برانگیز باشد. برای پرداختن به این موضوع ، ما از WebHooks Clerk استفاده می کنیم تا به طور خودکار داده های کاربر را پس از ثبت نام به یک پایگاه داده ارسال کنیم. این مقاله مراحل اجرای را طی می کند.

پیش نیازهای

مراحل اجرا

1. Ngrok را تنظیم کنید

مستندات منشی توصیه می کند از NGROK استفاده کنید تا درخواست های WebHook به برنامه محلی برسد.

1.1 NGROK را نصب و تنظیم کنید

در وب سایت رسمی NGROK ثبت نام کنید و مراحل نصب ارائه شده در بخش تنظیم و نصب را دنبال کنید.

1.2 URL خارجی را بدست آورید

سرور توسعه محلی خود را شروع کنید (npm run dev) ، سپس اجرا کنید

ngrok http [Port]

مثال: در مورد http: // localhost: 3000

ngrok http 3000

کپی کردن Forwarding URL نمایش داده می شود.

ngrok چیست؟

NGROK به یک برنامه وب در حال اجرا محلی اجازه می دهد تا به طور موقت از طریق اینترنت در دسترس باشد. در این حالت ، وب سایت های منشی را قادر می سازد تا درخواست هایی را به یک سرور توسعه محلی ارسال کنند.

2. پیکربندی های منشی را پیکربندی کنید

2.1 دسترسی به داشبورد منشی

به داشبورد منشی بروید.

2.2 یک نقطه پایانی Webhook اضافه کنید

1. حرکت به سرفه های وب برگه و کلیک کنید اضافه کردن نقطه پایانیبشر
   
   
2. تنظیم کردن URL نقطه پایانی به URL Forwarding Ngrok + /api/webhooks/user (به عنوان مثال ، https://example.ngrok-free.app/api/webhooks/user).
3. در صورت لزوم توضیحی اضافه کنید.
4. مشترک شدن در کاربر. رویداد
5. کلیک کردن ایجاد کردنبشر
   

3. راز امضا را اضافه کنید .env.local

در صفحه تنظیمات نقطه انتهایی ، راز امضا را از تنظیمات Webhook کپی کنید.

Signing Secret را اضافه کنید ، مانند SIGNING_SECRET=whsec_123، به شما .env.local پرونده ، که از قبل باید شامل کلیدهای API Clerk و URL DB شما باشد.
پرونده باید شباهت داشته باشد:

DATABASE_URL=postgresql://database_url
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YXdha2Utb3gtODUuY2xlcmsuYWNjb3VudHMuZGV2JA
CLERK_SECRET_KEY=sk_test_5DbmoNJeli74tMRgtzZLBY4SC6gpTLbNGnvAPeWJkE
SIGNING_SECRET=whsec_123

4. مسیر Webhook را عمومی کنید

در صورت استفاده clerkMiddleware()، اطمینان حاصل کنید /api/webhooks(.*) عمومی است برای اطلاعات در مورد پیکربندی مسیرها ، به راهنمای ClerkMiddleware () مراجعه کنید.

5. نصب svix

منشی استفاده می کند svix برای ارسال درخواست های WebHook امضا شده. نصب آن:

npm install svix

6. مسیر API Webhook را ایجاد کنید

ایجاد کردن /src/app/api/webhooks/user/route.ts برای دریافت درخواست های Webhook:

import { NextResponse } from 'next/server';
import { Pool } from 'pg';

import { Webhook } from 'svix';
import { headers } from 'next/headers';
import { WebhookEvent } from '@clerk/nextjs/server';

// Initialize Neon DB connection
const pool = new Pool({
  connectionString: process.env.DATABASE_URL, // Add to .env
});

export async function POST(req: Request) {
  const SIGNING_SECRET = process.env.SIGNING_SECRET;

  if (!SIGNING_SECRET) {
    throw new Error('Error: Please add SIGNING_SECRET from Clerk Dashboard to .env or .env.local');
  }

  // Create new Svix instance with secret
  const wh = new Webhook(SIGNING_SECRET);

  // Get headers
  const headerPayload = await headers();
  const svix_id = headerPayload.get('svix-id');
  const svix_timestamp = headerPayload.get('svix-timestamp');
  const svix_signature = headerPayload.get('svix-signature');

  // If there are no headers, error out
  if (!svix_id || !svix_timestamp || !svix_signature) {
    return new Response('Error: Missing Svix headers', {
      status: 400,
    });
  }

  // Get body
  const payload = await req.json();
  const body = JSON.stringify(payload);

  let evt: WebhookEvent;

  // Verify payload with headers
  try {
    evt = wh.verify(body, {
      'svix-id': svix_id,
      'svix-timestamp': svix_timestamp,
      'svix-signature': svix_signature,
    }) as WebhookEvent;
  } catch (err) {
    console.error('Error: Could not verify webhook:', err);
    return new Response('Error: Verification error', {
      status: 400,
    });
  }

  // Handling the user.created event (modify as needed)
  try {
    if (evt.type === 'user.created') {
      const { id } = evt.data;
      // Insert user into Neon DB
      await pool.query(
        `INSERT INTO users (user_id) VALUES ($1) 
        ON CONFLICT (user_id) DO NOTHING`,
        [id]
      );
      return NextResponse.json({ message: 'User saved to DB' }, { status: 200 });
    }

    return NextResponse.json({ message: 'Unhandled event' }, { status: 200 });
  } catch (error) {
    console.error('Webhook Error:', error);
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}

7. وب را تست کنید

1. در تنظیمات Webhook منشی ، به تستبشر
2. انتخاب کردن کاربر. از ارسال رویدادبشر
   
3. کلیک کردن ارسال مثالبشر
4. اگر درخواست موفق شود ، به صورت مشخص می شود موفق شد در تلاش برای پیام
   

بنابراین برنامه شما می تواند به طور خودکار اطلاعات کاربر جدید را در پایگاه داده حتی هنگام استفاده از OAuth Clerk ثبت کند. لطفاً یک کاربر جدید را در برنامه ثبت کنید تا تأیید کند که به درستی کار می کند.

نکات اشکال زدایی

اگر با مشکلات روبرو شدید:

• پیکربندی میان افزار خود را بررسی کنید
• پیکربندی خود را در داشبورد منشی بررسی کنید
  [For example] دایرکتوری: /src /app*/api/webhooks/user/route.ts* نقطه پایانی در منشی: http: // …/API/Webhooks/کاربر
• مسیر کنترل مسیر یا API را آزمایش کنید (به دنبال راهنما) 1. یک مسیر آزمایش را در برنامه خود ایجاد کنید:

▽ برنامه/وب سایت/تست/مسیر.

export async function POST() {
  return Response.json({ message: 'The route is working' });
}

2. برنامه خود را انجام دهید.
3. استفاده از curl برای آزمون:

curl -H 'Content-Type: application/json' -X POST
http://localhost:3000/api/webhooks/test

4. اگر “پیام” را مشاهده کنید: “مسیر کار می کند”} ، سپس کنترل کننده اصلی مسیر کار می کند و آماده ساخت است.

حذف کاربر در منشی

اگر می خواهید اطلاعات کاربر را در مورد منشی حذف کنید ، می توانید این کار را از برگه “کاربر” انجام دهید.

اعزام

1. URL Webhook را در منشی با دامنه تولید اضافه کنید.
2. اضافه کردن راز امضاء به متغیرهای محیط تولید.
3. برنامه خود را مستقر کنید.

پایان

• Webhooks Clerk امکان تشخیص زمان واقعی کاربران جدید را فراهم می کند.
• NGROK با قرار دادن یک نقطه پایانی در دسترس ، آزمایش وب محلی را امکان پذیر می کند.
• اجرا کننده svix تأیید و امنیت درخواست را تضمین می کند.