facebetter 2.0.0 → 2.0.1

package/README.md

@@ -46,7 +46,13 @@ For direct browser usage.
 <script src="https://cdn.jsdelivr.net/npm/facebetter/dist/facebetter.js"></script>
 ```
 
-The UMD build loads `facebetter-core` from the **same directory** as `facebetter.js`. A single jsDelivr URL for `facebetter` is not enough: also host `facebetter-core.js` next to it (from the `facebetter-core` package `dist/`), or use npm + a bundler.
+The UMD build loads `facebetter-core` from the **same directory** as `facebetter.js`. Host these next to `facebetter.js`:
+
+- `facebetter-core.js`
+- `facebetter-core.wasm`
+- `resource.fbd`
+
+A single jsDelivr URL for `facebetter` is not enough. npm + a bundler is simpler.
 
 ---
 
@@ -54,34 +60,22 @@ The UMD build loads `facebetter-core` from the **same directory** as `facebetter
 
 ### 1. Initialize the Engine
 
-Web 必须联网校验。`EngineConfig` **没有** `appId` / `appKey`：生产环境由你的服务器保管密钥并代理鉴权。本地调试、或你确认环境不会泄露密钥时，可以在调用处直连 Cloudflare。
+Web 必须联网校验。`EngineConfig` **没有** `appId` / `appKey`：由你的服务器换 token，再传入 `licenseToken`。
 
 ```javascript
 import {
   BeautyEffectEngine,
   EngineConfig,
-  createDirectAuthFetcher,
 } from 'facebetter';
 
-// 方式 A：你的后端已经拿到 v2 token（compact JWS 或 {success, token}）
-const config = new EngineConfig({
-  licenseToken: await fetch('/api/facebetter/auth', { method: 'POST' }).then((r) => r.text()),
-});
-
-// 方式 B：把 WASM 的 nonce challenge 转发到你的后端（生产推荐）
-const config = new EngineConfig({
-  authProxyUrl: '/api/facebetter/auth',
-});
-
-// 方式 C：本地调试 / 无自己的服务器时，调用处直连 Cloudflare（密钥会出现在前端，不要用于生产）
-const config = new EngineConfig({
-  fetchAuthResponse: createDirectAuthFetcher({
-    appId: 'your-app-id',
-    appKey: 'your-app-key',
-  }),
+const licenseToken = await fetch('/api/facebetter/auth', {
+  method: 'POST',
+}).then((r) => {
+  if (!r.ok) throw new Error(`auth failed: ${r.status}`);
+  return r.text();
 });
 
-const engine = new BeautyEffectEngine(config);
+const engine = new BeautyEffectEngine(new EngineConfig({ licenseToken }));
 
 try {
   await engine.init();
@@ -91,19 +85,30 @@ try {
 }
 ```
 
-客户服务器代理示例（Node）：
+#### 服务端代理（Node）
+
+密钥只放在服务器环境变量。签名串为 `v2|{app_id}|{timestamp}|{nonce}|web`，HMAC-SHA256（hex）后请求上游，把**响应原文**返回给前端：
 
 ```javascript
-import { createHmac } from 'node:crypto';
+import { createHmac, randomBytes } from 'node:crypto';
+
+const AUTH_URL = 'https://facebetter.pixpark.net/facebetter/v2/auth';
 
 app.post('/api/facebetter/auth', async (req, res) => {
-  const { nonce, timestamp, platform, user_agent } = req.body;
   const appId = process.env.FB_APP_ID;
   const appKey = process.env.FB_APP_KEY;
+  if (!appId || !appKey) {
+    res.status(500).json({ error: 'FB_APP_ID / FB_APP_KEY not configured' });
+    return;
+  }
+
+  const nonce = randomBytes(16).toString('hex');
+  const timestamp = Math.floor(Date.now() / 1000);
+  const platform = 'web';
   const payload = `v2|${appId}|${timestamp}|${nonce}|${platform}`;
   const hmac = createHmac('sha256', appKey).update(payload).digest('hex');
 
-  const upstream = await fetch('https://facebetter.pixpark.net/facebetter/v2/auth', {
+  const upstream = await fetch(AUTH_URL, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
@@ -112,13 +117,15 @@ app.post('/api/facebetter/auth', async (req, res) => {
       timestamp,
       nonce,
       platform,
-      user_agent,
+      user_agent: req.headers['user-agent'] || '',
     }),
   });
   res.status(upstream.status).send(await upstream.text());
 });
 ```
 
+可运行参考：[Demo `api/facebetter/auth.js`](https://github.com/pixpark/facebetter-sdk/blob/main/demo/web/react/api/facebetter/auth.js)。完整说明见 [Auth & License](https://facebetter.net/docs/intro/license)。
+
 iOS / Android 仍可用 `appId` + `appKey` 直连在线鉴权，或使用绑定 Bundle ID / Package Name 的离线 license。Web 不支持离线 license。
 
 
@@ -201,7 +208,7 @@ processFrame();
 
 ## ⚠️ Important Notes
 
-1. **Runtime package**: `import('facebetter-core')` is resolved by your bundler from `node_modules` (installed with `facebetter`). For a `<script>` tag, place `facebetter-core.js` beside `facebetter.js`.
+1. **Runtime package**: `import('facebetter-core')` is resolved by your bundler from `node_modules` (installed with `facebetter`). The SDK then downloads `facebetter-core.wasm` and `resource.fbd` from that package. For a `<script>` tag, place `facebetter-core.js`, `facebetter-core.wasm`, and `resource.fbd` beside `facebetter.js`. Pass `onProgress` to `init()` for download progress.
 2. **Secure Context**: The SDK requires a Secure Context (HTTPS or localhost) to access modern browser features.
 3. **Performance Optimization**:
     - Always call `processImage` within a `requestAnimationFrame` loop.