Custom UI Sayfaları (iframe)

Nasıl çalışır

Restomenum Paneli
   │  <iframe src="customUiOrigin + path" sandbox>   (panel, sayfanı gömer)
   ▼
Senin iframe sayfan  ──App Bridge (postMessage, origin-pinli)──►  Panel
   │   • bridgeCall('getSessionToken') → { token } (JWT)  → tenant kimliği
   │   • 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[]

"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). İzinli kaynaklar: frame-ancestors https://app.restomenum.com https://test-restomenu.web.app http://localhost:* https://localhost:* http://127.0.0.1:* https://127.0.0.1:* — sabit panel origin'leri + offline/yerel kurulum (localhost, değişken port).
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).
6. Dış bir adrese (ödeme, rapor, yardım) gidecekse App Bridge openUrl kullan — window.open / <a target="_blank"> sandbox'ta çalışmaz.