طلب الوصول إلى API
Micro Frontend

أداة اختبار التكامل

نفّذوا المسار الكامل باستخدام بيانات اعتمادكم قبل بدء التكامل: أنشئوا session باستخدام public key وmint secret، ثم نفّذوا mount لـ Micro-Frontend وجرّبوا رحلة المتجر الفعلية. تُعرض كل request وresponse بوضوح.

العودة إلى دليل Micro-Frontend
صفحة اختبار فقط - السر لا يوجد أبدًا في المتصفح. تحاكي هذه الصفحة الجزء الخلفي من مضيفك: يتم تشغيل استدعاء النعناع عادةً من خادم إلى خادم، مع وجود السر في بيئة الخادم الخاص بك. هنا يتم الاحتفاظ بها في ذاكرة الصفحة فقط (لا يوجد تخزين محلي، ولا يوجد ملف تعريف ارتباط) ويتم إرسالها فقط إلى نقطة نهاية النعناع. في مرحلة الإنتاج، يجب ألا يصل السر مطلقًا إلى رمز العميل - راجع التدفق الدقيق في الدليل. (localStorage)

1. اصنع جلسة

بالضبط المكالمة التي ستجريها الواجهة الخلفية الخاصة بك: POST /api/shop/session مع سر النعناع الخاص بك كرمز مميز لحاملها. الاستجابة عبارة عن رمز جلسة غير شفاف وقصير العمر مرتبط بمفتاحك العام. (Bearer)

يظهر الطلب الدقيق (مع إخفاء السر) والرد الأولي هنا بعد النعناع الأول.

2. ابدأ الواجهة الأمامية الصغيرة

يتم تثبيت التضمين باستخدام مفتاحك العام والرمز المميز للجلسة - وهو نفس استدعاء mount() الذي ستجريه صفحتك. قم بالرحلة: الأحداث، المقالات، عربة التسوق، التسجيل، الخروج.

اصنع جلسة أولاً.

الواجهة الأمامية الصغيرة تدعم اللغتين الألمانية والإنجليزية؛ اللغات الأخرى تتراجع إلى اللغة الإنجليزية.

يتم عرض الواجهة الأمامية الصغيرة هنا بمجرد أن بدأت.

3. هذا ما يبدو من جانبك

التدفق الذي تم اختباره، جاهز للاستخدام: ينتقل استدعاء النعناع إلى الواجهة الخلفية لديك (مع السر كمتغير بيئة)، ولا يرى المتصفح سوى الرمز المميز. تحمل المقتطفات القيم التي أدخلتها، ويظل السر عنصرًا نائبًا.

النعناع على الخلفية الخاصة بك

server.ts
// SERVER-SEITE deines Hosts — das Secret bleibt in deiner Server-Umgebung.
const res = await fetch("https://<dein-host>/api/shop/session", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.ADITUS_MINT_SECRET}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    publicKey: "pk_dein_key",
    // ohne email: anonyme Gast-Session (browsen + Warenkorb; Checkout erst nach onUserRequired)
  }),
});

const { sessionToken, expiresAt } = await res.json();
// sessionToken an den Browser reichen (inline oder per fetch).

جبل في صفحتك

page.ts
import { mount } from "@aditus/shop-embed";

const el = document.getElementById("aditus-shop");
if (!el) throw new Error("Mount-Ziel nicht gefunden");

const handle = mount(el, {
  publicKey: "pk_dein_key",
  sessionToken, // vom eigenen Backend gemintet, nur im Speicher halten
});

أو بدون خطوة بناء: مكون الويب (Web Component)

index.html
<!-- Ohne Build-Schritt: das selbst gehostete Web-Component-Bundle. -->
<script src="https://<deine-aditus-instanz>/api/embed/v1/aditus-shop.js" defer></script>

<aditus-shop
  public-key="pk_dein_key"
  session-token="<vom-backend-geminteter-token>"
></aditus-shop>

يتم توثيق العقد الكامل - الرؤوس والحقول ورموز الخطأ والإلغاء - في ملفدليل الواجهة الأمامية الصغيرة (Micro-Frontend).