פיתוח פלאגינים למרקטפלייס עבור SaaS – OAuth, אינטגרציות, פלאגינים

פיתוח שוק תוספים ל-SaaS – OAuth, אינטגרציות, תוספים

השקתם SaaS, ו-80% מהלקוחות מבקשים אינטגרציות עם CRM, מערכות הנהלת חשבונות וטלפוניה. פיתוח ידני של כל אינטגרציה אורך 2–3 שבועות, והתמיכה אורכת אפילו יותר. הפתרון: שוק תוספים. אנו מתמחים בפיתוח תוספים ואינטגרציות לשוק עבור SaaS, כולל הרשאת OAuth ורישום תוספים. קהילת מפתחים יוצרת הרחבות, ומשתמשים מתקינים אותן בכמה קליקים. התוצאה היא מערכת אקולוגית כמו Atlassian, Shopify או Figma, שנבנית תוך 8–14 ימי עסקים. נבחן את הפרויקט שלכם תוך יום אחד ונציע פתרון סוהר.

בעיות ששוק תוספים פותר

ללא שוק תוספים, כל בקשה לאינטגרציה היא עבודה ידנית. מפתחים מבזבזים שעות על משא ומתן על API, ריקודי OAuth ובדיקות. לקוחות ממתינים שבועות. בנוסף, עומס השרת גדל—שאילתות N+1 וקריאות לא אופטימליות גורמות ל-LCP לרדת ב-30%. שוק תוספים מעוצב היטב פותר את כל זה עם רישום תוספים אחיד, תבניות הרשאה ודירוגים. לדוגמה, לקוח אחד לאחר השקת שוק תוספים הגדיל את מספר האינטגרציות מ-5 ל-50 תוך שישה חודשים—וחסך כ-$50,000 בעלויות פיתוח.

ארכיטקטורה: שני סוגי הרחבות

אינטגרציות צד-שרת—יישומי OAuth שמתקשרים עם ה-API שלכם בשם המשתמש. שירות צד שלישי (למשל, Zapier או n8n) מאשר ומבצע קריאות ל-API שלכם.

תוספי צד-לקוח—קוד JavaScript שמופעל ב-iframe או ב-Web Worker בצד הלקוח. מודל התוספים של Figma הוא דוגמה לכך.

רישום תוספים

model Plugin {
  id          String   @id @default(cuid())
  slug        String   @unique
  name        String
  description String   @db.Text
  author      String
  authorUrl   String?
  iconUrl     String?
  category    PluginCategory
  installCount Int     @default(0)
  rating      Float?
  isVerified  Boolean  @default(false)
  isPublished Boolean  @default(false)

  // Для server-side: OAuth credentials
  clientId     String?  @unique
  clientSecret String?  // зашифрован

  // Manifest permissions
  permissions String[]  // ['read:projects', 'write:tasks']
  webhookUrl  String?
  oauthConfig Json?

  installations PluginInstallation[]
  reviews       PluginReview[]
}

model PluginInstallation {
  id          String   @id @default(cuid())
  pluginId    String
  tenantId    String
  installedAt DateTime @default(now())
  config      Json?    // настройки конкретной установки
  accessToken String?  // OAuth token тенанта для плагина

  plugin Plugin @relation(fields: [pluginId], references: [id])
  tenant Tenant @relation(fields: [tenantId], references: [id])

  @@unique([pluginId, tenantId])
}

כיצד פועל תהליך OAuth במהלך התקנת תוסף?

תהליך ההתקנה של תוסף צד-שרת הוא מענק קוד הרשאה טיפוסי של OAuth 2.0. אנו מייצרים state להגנה מפני CSRF, מפנים את המשתמש לשרת ה-OAuth של התוסף, מקבלים קוד ומחליפים אותו ב-access token. ה-token מוצפן ומאוחסן במודל PluginInstallation. לאחר מכן, התוסף יכול לקרוא ל-API שלכם בשם ה-tenant המתקין. היישום מבוסס על מפרט OAuth 2.0.

// OAuth flow для установки server-side плагина
export async function initiatePluginInstall(
  tenantId: string,
  pluginSlug: string
): Promise<string> {
  const plugin = await db.plugin.findUniqueOrThrow({
    where: { slug: pluginSlug },
  });

  // Генерируем state для CSRF защиты
  const state = await generateState({
    tenantId,
    pluginId: plugin.id,
    action: 'install',
  });

  // Redirect на OAuth провайдера плагина
  const authUrl = new URL(plugin.oauthConfig?.authorizationUrl as string);
  authUrl.searchParams.set('client_id', plugin.clientId!);
  authUrl.searchParams.set('redirect_uri', `${process.env.APP_URL}/marketplace/callback`);
  authUrl.searchParams.set('scope', plugin.permissions.join(' '));
  authUrl.searchParams.set('state', state);
  authUrl.searchParams.set('response_type', 'code');

  return authUrl.toString();
}

// Callback после OAuth авторизации
export async function completePluginInstall(
  code: string,
  state: string
): Promise<void> {
  const { tenantId, pluginId } = await verifyState(state);
  const plugin = await db.plugin.findUniqueOrThrow({
    where: { id: pluginId },
  });

  // Обмениваем code на token
  const tokenResponse = await fetch(plugin.oauthConfig?.tokenUrl as string, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      code,
      client_id: plugin.clientId,
      client_secret: decryptToken(plugin.clientSecret!),
      redirect_uri: `${process.env.APP_URL}/marketplace/callback`,
      grant_type: 'authorization_code',
    }),
  });
  const tokens = await tokenResponse.json();

  await db.pluginInstallation.upsert({
    where: {
      pluginId_tenantId: {
        pluginId,
        tenantId,
      },
    },
    create: {
      pluginId,
      tenantId,
      accessToken: encryptToken(tokens.access_token),
    },
    update: {
      accessToken: encryptToken(tokens.access_token),
    },
  });

  // Уведомляем плагин об установке
  if (plugin.webhookUrl) {
    await fetch(plugin.webhookUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        event: 'plugin.installed',
        tenantId,
        timestamp: new Date().toISOString(),
      }),
    });
  }

  await db.plugin.update({
    where: { id: pluginId },
    data: {
      installCount: {
        increment: 1,
      },
    },
  });
}

API למפתחי תוספים

מפתחים מתקשרים עם ה-SaaS שלכם באמצעות בקשות מורשות OAuth. אנו מאמתים את ה-token, בודקים הרשאות ומחזירים נתונים.

// Плагины взаимодействуют через OAuth-авторизованные запросы к вашему API
// app/api/v1/[...]/route.ts
export async function validatePluginRequest(request: Request): Promise<{ plugin: Plugin; tenantId: string; }> {
  const authHeader = request.headers.get('Authorization');
  if (!authHeader?.startsWith('Bearer ')) {
    throw new ApiError(401, 'Missing authorization');
  }
  const token = authHeader.slice(7);
  // Проверяем токен
  const installation = await db.pluginInstallation.findFirst({
    where: {
      // В реальности: верифицируем JWT или ищем по hash токена
      accessToken: encryptToken(token),
    },
    include: { plugin: true }
  });
  if (!installation) {
    throw new ApiError(401, 'Invalid token');
  }
  return {
    plugin: installation.plugin,
    tenantId: installation.tenantId,
  };
}

ממשק המשתמש של השוק

קטלוג תוספים עם חיפוש, סינון לפי קטגוריות ומחוון של הרחבות מותקנות. אנו מרנדרים בצד השרת (SSR) ל-LCP מהיר, ומאחסנים את המצב במטמון באמצעות Redis.

// app/marketplace/page.tsx
export default async function MarketplacePage({ searchParams }: { searchParams: { category?: string; q?: string } }) {
  const plugins = await db.plugin.findMany({
    where: {
      isPublished: true,
      ...(searchParams.category ? { category: searchParams.category as PluginCategory } : {}),
      ...(searchParams.q ? {
        OR: [
          { name: { contains: searchParams.q, mode: 'insensitive' } },
          { description: { contains: searchParams.q, mode: 'insensitive' } },
        ]
      } : {}),
    },
    orderBy: { installCount: 'desc' },
  });

  const tenant = await getCurrentTenant();
  const installedPluginIds = new Set(
    (await db.pluginInstallation.findMany({
      where: { tenantId: tenant!.id },
      select: { pluginId: true },
    })).map(i => i.pluginId)
  );

  return (
    <div>
      <MarketplaceSearch />
      <CategoryFilter />
      <PluginGrid plugins={plugins} installedIds={installedPluginIds} />
    </div>
  );
}

מה כלול בפיתוח שוק תוספים

• תיעוד API למפתחים (Swagger/OpenAPI) ואוסף Postman
• ערכת SDK ב-TypeScript לאינטגרציה מהירה
• מערכת ניהול תוכן ואימות תוספים
• בדיקות עומס עד 1,000 התקנות בשעה
• צינור CI/CD (GitHub Actions + Docker)
• הכשרת הצוות שלכם לתפעול השוק
• 6 חודשי תמיכה חינם בקוד

כל תוסף עובר בדיקה ידנית לפני פרסום: אנו מנתחים את הקוד לאיתור פרצות ומאמתים עמידה בהרשאות המוצהרות. אסימוני OAuth מוצפנים עם AES-256, והודעות webhook חתומות עם HMAC. אנו מבטיחים שאף תוסף לא יקבל גישה לנתונים מעבר לתחום שלו.

למה שוק תוספים עדיף על אינטגרציות ידניות

ללא שוק תוספים, אתם משקיעים משאבים בכל אינטגרציה ידנית—פי שלושה יותר איטי מאשר עם קהילת מפתחים. עם שוק תוספים אתם מקבלים: עלייה רבעונית של 40% במספר האינטגרציות, הפחתת עומס התמיכה (משתמשים מתקינים תוספים בעצמם), והכנסה נוספת מעמלה של 10–30%. שוק תוספים מהיר פי שלושה וזול פי חמישה בהרחבה לעומת פיתוח ידני. לקוח אחד לאחר השקת שוק תוספים הגדיל אינטגרציות מ-5 ל-50 תוך שישה חודשים—וחסך כ-$50,000 בעלויות פיתוח. בנוסף, חיסכון חודשי בתמיכה מגיע ל-$10,000.

השוואת סוגי תוספים

השוואת גישות: אינטגרציה ידנית מול שוק תוספים

מהם השלבים בפיתוח שוק תוספים?

1. ניתוח וביקורת של ה-API הנוכחי—בחינת נקודות הקצה, מודל הנתונים וקביעה אם נדרשים שינויים.
2. עיצוב רישום התוספים—סכמת מסד נתונים, תהליך OAuth, הרשאות.
3. יישום צד-שרת—רישום, OAuth, webhook, API למפתחים.
4. פיתוח קטלוג ממשק המשתמש—דף חנות, כרטיס תוסף, תהליך התקנה.
5. תיעוד למפתחים—דוגמאות SDK, אוסף Postman.
6. בדיקות—בדיקות עומס (עד 1,000 התקנות בשעה), אבטחה (pentest).
7. פריסה לאחסון נבחר—Vercel, AWS, Selectel—עם CI/CD.

הניסיון שלנו

יש לנו ניסיון של 5+ שנים בבניית מערכות אקולוגיות SaaS. במהלך תקופה זו, סיפקנו 12 פרויקטים של שוק תוספים למוצרים בקנה מידה שונה—מסטארטאפים ועד ארגונים עם 10,000+ משתמשים. המהנדסים שלנו מחזיקים בהסמכות AWS ו-Kubernetes. אנו מבטיחים: אחסון מאובטח של אסימונים, ביצועים של עד 500 rps לכל מופע, ותיעוד שקוף. צרו קשר כדי לקבל ייעוץ והערכת פרויקט תוך יום עסקים אחד. הזמינו ביקורת על ה-API שלכם—נקבע את מורכבות האינטגרציה ואת לוחות הזמנים המדויקים.