Restomenum Geliştirici
Giriş yapKayıt ol

Custom UI Sayfaları (iframe)

Kendi arayüzünü Restomenum paneli içinde bir iframe olarak gösterirsin. Sayfayı sen barındırırsın; panel onu güvenli (sandboxed) bir iframe'de yükler. Veri alışverişi yalnız App Bridge (postMessage) üzerinden, kurulumun verdiği scope'larla yapılır.

Nasıl çalışır

Restomenum Paneli
   │  <iframe src="customUiOrigin + path" sandbox>   (panel, sayfanı gömer)
   ▼
Senin iframe sayfan  ──App Bridge (postMessage, origin-pinli)──►  Panel
   │   • bridge.getSessionToken()  → tenant kimliği (JWT)
   │   • izinli veri istek/aksiyonları (kurulum scope'una göre)
   ▼
Senin backend'in  ◄── session token doğrula ──  (kendi API'n)

Sayfan panelin bir parçası gibi görünür ama izole çalışır: Restomenum oturum çerezine/DOM'una erişemez. Tüm etkileşim App Bridge köprüsünden geçer ve eklentinin scope'larıyla sınırlıdır.

Manifest şeması — pages[]

AlanTipZorunluAçıklama
idstring✓Benzersiz. nav.pageId ve settingsPageId bununla eşleşir.
customUiOriginstring (https)✓iframe origin'i. Sürümün tek Origin'iyle aynıdır (editör otomatik atar).
pathstring–iframe yolu (varsayılan /). Tam src = origin + path.
titlei18n obj–Başlık (text-only render).
"pages": [
  {
    "id": "dashboard",                       // benzersiz; nav.pageId / settingsPageId ile eşleşir
    "customUiOrigin": "https://app.eklentim.com",  // = sürümün Origin'i (tek-apex)
    "path": "/embed",                        // iframe src = customUiOrigin + path
    "title": { "tr": "Acme Panosu" }
  }
]
// gerekli scope: "ui:page"

Adımlar

  1. Manifest'te ui:page scope'unu iste ve bir pages[] öğesi ekle.
  2. Sayfanı kendi origin'inde (sürümün Origin'i) barındır; HTTPS zorunlu.
  3. Sayfana CSP frame-ancestors ekle — yalnız panel çerçeveleyebilsin (clickjacking koruması, onayda denetlenir).
  4. İçeride App Bridge ile session token al, tenant'ı backend'inde doğrula.
  5. Sayfayı menüye bağlamak için bir nav öğesi ekle (veya kur/ayarlar sayfası olarak işaretle).
Güvenlik zorunlu: iframe sayfan CSP frame-ancestors ile yalnız panel origin'ine izin vermeli ve App Bridge mesajlarını wildcard '*' ile değil panel origin'ine pinli göndermeli + gelen event.origin'i doğrulamalı. Detay: iframe Güvenliği.