Browser-Schnellstart

Am Ende dieser Seite läuft in deinem Browser eine Web-App, die mit der Web Crypto API einen Ende-zu-Ende-verschlüsselten Dokumentenspeicher anlegt — keine Schlüssel auf dem Server, kein Klartext auf der Leitung.

1) Projekt anlegen & installieren

Wir nutzen hier Vite als Bundler, es funktioniert aber jeder Bundler, der ESM-Imports unterstützt (webpack, Parcel usw.).

npm create vite@latest my-mindoodb-app -- --template vanilla
cd my-mindoodb-app
npm install mindoodb

2) MindooDB-Code einfügen

Ersetze den Inhalt von main.js durch den Code unten. Der entscheidende Unterschied zu Node.js: Du importierst aus mindoodb/browser und übergibst einen cryptoAdapter, der für alle kryptografischen Operationen die native Web Crypto API des Browsers nutzt.

import {
  BaseMindooTenantFactory,
  InMemoryContentAddressedStoreFactory,
  createCryptoAdapter,
} from "mindoodb/browser";

async function main() {
  // The browser build uses Web Crypto under the hood
  const cryptoAdapter = createCryptoAdapter();
  const storeFactory = new InMemoryContentAddressedStoreFactory();
  const factory = new BaseMindooTenantFactory(storeFactory, cryptoAdapter);

  // One call creates admin + user keys, KeyBag, and directory
  const { tenant, adminUser, appUser, keyBag } =
    await factory.createTenant({
      tenantId: "my-first-tenant",
      adminName: "cn=admin/o=demo",
      adminPassword: "admin-password",
      userName: "cn=alice/o=demo",
      userPassword: "user-password",
    });

  // Open a database and create a todo document
  const db = await tenant.openDB("todos");
  const todo = await db.createDocument();
  await db.changeDoc(todo, async (d) => {
    const data = d.getData();
    data.title = "Ship web MVP";
    data.done = false;
  });

  // Read it back
  const ids = await db.getAllDocumentIds();
  const loaded = await db.getDocument(ids[0]);
  return loaded.getData();
}

main().then((data) => {
  console.log("Web todo:", data);
  document.querySelector("#app").innerHTML =
    `<h2>Todo: ${data.title} (done: ${String(data.done)})</h2>`;
});

3) Dev-Server starten

npm run dev

Öffne die URL, die im Terminal angezeigt wird (meist http://localhost:5173). Du solltest Folgendes sehen:

Todo: Ship web MVP (done: false)

Das vollständige Objekt steht in der Browser-Konsole: Web todo: { title: 'Ship web MVP', done: false }

Dauerhafte Speicherung

Das Beispiel oben speichert nur im Arbeitsspeicher. Damit Daten einen Seiten-Reload überleben, tausche InMemoryContentAddressedStoreFactory gegen IndexedDBContentAddressedStoreFactory (ebenfalls aus mindoodb/browser exportiert).