--- title: "将 PartnerShare 内嵌到产品中" id: "580" type: "docs" slug: "iframe" published_at: "2026-01-07T06:17:44+00:00" modified_at: "2026-08-19T09:55:08+00:00" url: "https://www.partnershare.net/help/api/iframe" markdown_url: "https://www.partnershare.net/help/api/iframe.md" excerpt: "Embedded Referral Center 将 PartnerShare 内嵌到产品中 通过服务端登录接 […]" taxonomy_doc_category: - "技术集成" --- ![快速入门 - PartnerShare](https://www.partnershare.net/wp-content/uploads/2026/01/lQLPJyGF1y8mfltQULD6hr47Eio3cwlDF3jyDucB_80_80.png) ## 快速入门 5 - [什么是推荐营销/老带新计划](https://www.partnershare.net/help/start-guides/referral-marketing) - [什么是联盟营销](https://www.partnershare.net/help/start-guides/affiliate-marketing) - [如何创建推荐计划](https://www.partnershare.net/help/start-guides/add-referral-marketing) - [如何创建联盟营销活动](https://www.partnershare.net/help/start-guides/add-affiliate-marketing) - [如何提升推广效果](https://www.partnershare.net/help/start-guides/improving-promotion-effectiveness) ![合作伙伴管理 - PartnerShare](https://www.partnershare.net/wp-content/uploads/2026/01/lQLPKHuo_8Hse9tQULBcxdOVHL3PdwlDF3jyDucC_80_80.png) ## 推广运营 5 - [活动管理](https://www.partnershare.net/help/promoters/%e6%b4%bb%e5%8a%a8%e7%ae%a1%e7%90%86) - [产品管理](https://www.partnershare.net/help/promoters/%e4%ba%a7%e5%93%81%e7%ae%a1%e7%90%86) - [推广者管理](https://www.partnershare.net/help/promoters/data) - [合作伙伴支持的提现方式](https://www.partnershare.net/help/promoters/withdrawal-methods) - [查询合作伙伴提现状态](https://www.partnershare.net/help/promoters/withdrawal-status) ![支付与交易 - ParterShare](https://www.partnershare.net/wp-content/uploads/2026/01/lQLPJwyP0mL5vltQULAn8_2d-Nx0hglDF3jyZ0QA_80_80.png) ## 支付与交易 2 - [佣金结算](https://www.partnershare.net/help/payment/commission) - [提现托管功能](https://www.partnershare.net/help/payment/auto-payouts) ![合作伙伴管理 - PartnerShare](https://www.partnershare.net/wp-content/uploads/2026/01/lQLPKHuo_8Hse9tQULBcxdOVHL3PdwlDF3jyDucC_80_80.png) ## 账户管理 2 - [团队管理功能](https://www.partnershare.net/help/team/%e5%9b%a2%e9%98%9f%e7%ae%a1%e7%90%86%e5%8a%9f%e8%83%bd) - [企业认证提示](https://www.partnershare.net/help/team/certification) ![技术集成 - PartnerShare](https://www.partnershare.net/wp-content/uploads/2026/01/lQLPJwDplrTBzltQULCNPWCeBswcaAlDF3jyZ0QB_80_80.png) ## 技术集成 5 - [API 鉴权与签名机制](https://www.partnershare.net/help/api/signature) - [推广点击跟踪 SDK 接入](https://www.partnershare.net/help/api/sdk) - [推广转化事件回传](https://www.partnershare.net/help/api/event-report) - [将 PartnerShare 内嵌到产品中](https://www.partnershare.net/help/api/iframe) - [PartnerShare 产品授权推广登录接入指南](https://www.partnershare.net/help/api/partnershare-integration) ![常见问题 - PartnerShare](https://www.partnershare.net/wp-content/uploads/2026/01/lQLPJwbpuanIXltQULBfzi8WsAsVUQlDF3jyDucA_80_80.png) ## 常见问题 2 - [旧版帮助中心入口](https://www.partnershare.net/help/faq/%e6%97%a7%e7%89%88%e5%b8%ae%e5%8a%a9%e4%b8%ad%e5%bf%83%e5%85%a5%e5%8f%a3) - [提现相关](https://www.partnershare.net/help/faq/withdrawal) ![Image](https://www.partnershare.net/wp-content/uploads/2026/03/B706BBD1-A488-44A9-B7CC-AD90B607DD45-150x150.png) ## 更新日志 2 - [更新日志 – 2026.05.15](https://www.partnershare.net/help/update/%e6%9b%b4%e6%96%b0%e6%97%a5%e5%bf%97-2025-05-15) - [更新日志-2026.03.05](https://www.partnershare.net/help/update/update2026-3-5) View Categories Embedded Referral Center## 将 PartnerShare 内嵌到产品中 通过服务端登录接口为当前用户生成推广中心访问 Token，再将 PartnerShare 以 iframe 的方式嵌入你的产品后台。用户无需离开当前系统，也无需重复注册登录，即可直接查看推广链接、邀请数据、奖励和提现信息。 服务端生成 Token自动注册或登录推广者前端仅负责渲染 iframe适合后台内嵌接入 ### 1. 适用场景 [#](#0-toc-title) 如果你希望在自己的产品后台中增加“推广中心”“邀请赚钱”“联盟计划”等模块，并让用户在当前系统内直接完成推广相关操作，这种内嵌接入方式会比单独跳转到外部站点更自然，也更容易保持品牌体验一致。 **减少跳转流失**用户留在你的产品内完成推广操作，流程更连续，进入门槛更低。 **降低研发成本**推广链接、邀请数据、奖励统计、提现能力由 PartnerShare 承接，无需重复建设完整推广后台。 **统一账号体验**你的业务用户可直接映射到 PartnerShare 推广者身份，避免二次注册和独立登录。 ### 2. 接入模式 [#](#1-toc-title) 推荐采用“你的前端发起访问、你的服务端换取 Token、PartnerShare 输出推广中心页面”的三段式接入结构。这样既能确保 `API Secret` 安全，也能让 iframe 页面保持稳定加载。 内嵌接入示意 1 **你的产品前端**用户点击“推广中心”入口，请求你自己的服务端生成当前用户的推广中心访问凭证。 不直接接触 API Secret 请求 Token 2 **你的产品服务端**使用 API Key、时间戳和 API Secret 进行签名，调用 PartnerShare 登录接口换取推广者 Token。 服务端签名并获取 token 返回 Token 3 **PartnerShare iframe**前端拿到 Token 后渲染 iframe，在你的产品页面内展示推广中心、邀请数据和奖励信息。 用户停留在当前产品内 ! **不要在前端直接调用 PartnerShare 登录接口**`API Secret` 必须保存在你的服务端。前端只应该请求你自己的后端接口，由你的后端调用 PartnerShare 获取 Token，再把结果返回给前端用于渲染 iframe。 ### 3. 页面效果示意 [#](#2-toc-title) 下图为内嵌后的后台效果示意。推广中心以页面模块的形式展示在你的产品后台中，用户可以在当前系统内直接查看推广数据、营销素材、专属链接和邀请码。 ![PartnerShare 推广中心内嵌到产品后台示意图](https://help-new-pro.partnershare.net/wp-content/uploads/2026/04/iframe-demo.png) 推广中心内嵌到产品后台的页面效果示意 ### 4. 前置要求 [#](#3-toc-title) 已在 PartnerShare 后台完成产品创建与基础配置。 已完成推荐计划活动、奖励规则和推广 URL 配置。 已获取当前产品对应的 API Key 和 API Secret。 你的服务端具备安全保存 API Secret 与发起 HTTPS 请求的能力。 如果还不了解开放接口的鉴权方式，请先阅读 [API 鉴权与签名机制](https://help-new-pro.partnershare.net/help/api/signature) 。 ### 5. 获取推广者登录 Token [#](#4-toc-title) 你的服务端需要先调用以下接口，为当前业务用户生成推广中心访问 Token。若该用户在 PartnerShare 中尚未存在，系统会自动创建推广者账号并加入默认推荐计划；若已存在，则直接复用并刷新登录状态。 POST`https://api-service.partnershare.net/api/open/v1/promoter/login` #### 5.1 请求头 [#](#5-toc-title) | Header | 必填 | 说明 | | --- | --- | --- | | X-Api-Key | 是 | PartnerShare 分配给当前产品的 API Key。 | | X-Api-Timestamp | 是 | 秒级时间戳，用于防止重放请求。 | | X-Api-Sign | 是 | 使用 API Secret 按签名规则生成的 SHA256 签名。 | | Content-Type | 是 | 推荐使用 application/json。 | #### 5.2 请求参数 [#](#6-toc-title) | 参数 | 类型 | 必填 | 说明 | | --- | --- | --- | --- | | user_id | string | 是 | 你系统内的用户唯一标识。PartnerShare 会基于该字段幂等创建或复用推广者账号。 | | email | string | 否 | 用户邮箱。传入时会校验邮箱格式，可用于推广者资料展示。 | | username | string | 否 | 用户展示名称。为空时优先使用邮箱，否则按 user_id 自动生成。 | | lang | string | 否 | 语言代码，支持 zh、en、zh-hk；默认 en。 | | phone | string | 否 | 手机号，可用于补充推广者资料。 | | theme_mode | string | 否 | 推广中心主题模式，支持 light 或 dark；不传时默认 light。 | #### 5.3 请求示例 [#](#7-toc-title) ``` curl -X POST "https://api-service.partnershare.net/api/open/v1/promoter/login" \ -H "Content-Type: application/json" \ -H "X-Api-Key: pk_xxxxxxxxxxxxxxxxxxxxx" \ -H "X-Api-Timestamp: 1776677721" \ -H "X-Api-Sign: calculated_signature" \ -d '{ "user_id": "user_10001", "email": "user@example.com", "username": "Alex", "lang": "zh", "theme_mode": "light" }' ``` #### 5.4 响应示例 [#](#8-toc-title) ``` { "code": 0, "message": "success", "data": { "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...", "user_string_id": "ps8xk2m9qa", "lang": "zh", "theme_mode": "light" } } ``` #### 5.5 响应字段 [#](#9-toc-title) | 字段 | 类型 | 说明 | | --- | --- | --- | | code | int | 响应状态码，0 表示成功，非 0 表示失败。 | | message | string | 响应描述信息。 | | data.token | string | 推广中心登录 Token，用于拼接 iframe 地址。 | | data.user_string_id | string | PartnerShare 内部推广者字符串 ID，可用于排查和数据关联。 | | data.lang | string | 推广者当前语言。 | | data.theme_mode | string | 推广中心当前主题模式，返回 light 或 dark。 | ### 6. 创建内嵌 iframe [#](#10-toc-title) 你的前端从自身服务端拿到 `token` 后，将 iframe 的 `src` 设置为 PartnerShare 推广中心地址即可。 IFRAME`https://promoter.partnershare.net/iframe/{token}` ``` ``` ✓ **推荐方式**进入推广中心页面时，实时向你的服务端请求新的 Token，再渲染 iframe。不要把历史 Token 固定写入页面，也不要把 Token 长期缓存到前端存储中。 ### 7. 推荐的前后端分工 [#](#11-toc-title) **你的服务端负责**保存 API Secret、生成签名、调用 `/api/open/v1/promoter/login`、将 Token 返回给自己的前端。 **你的前端负责**在用户进入推广入口时请求自己的服务端接口，并使用返回的 Token 渲染 PartnerShare iframe。 ``` // 前端示例：仅请求你自己的服务端，不直接请求 PartnerShare async function mountPartnerShareIframe() { const res = await fetch("/api/partner-share/iframe-token"); const data = await res.json(); document.querySelector("#partnerShareIframe").src = `https://promoter.partnershare.net/iframe/${data.token}`; } ``` ### 8. 常见问题 [#](#12-toc-title) #### 8.1 为什么必须由服务端获取 Token？ [#](#13-toc-title) 因为生成 Token 的接口需要 API Key 签名鉴权，`API Secret` 只能保存在服务端。如果放到前端，会导致任何人都可以伪造请求创建或登录推广者账号。 #### 8.2 同一个用户每次进入页面都会重复创建推广者吗？ [#](#14-toc-title) 不会。PartnerShare 会基于 `user_id` 在当前产品下查找已有推广者账号。相同 `user_id` 会复用同一个推广者账号，并更新必要的用户资料。 #### 8.3 iframe 页面打不开或显示登录失效怎么办？ [#](#15-toc-title) 请重新调用 `/api/open/v1/promoter/login` 获取新的 Token，并确认 iframe URL 使用的是最新返回的 `data.token`。 #### 8.4 为什么接口返回“该产品下不存在推荐计划活动”？ [#](#16-toc-title) 说明当前产品还没有可用的推荐计划活动。请先在 PartnerShare 后台完成产品基础配置、奖励规则和推荐计划活动配置，并确保活动处于进行中状态。 #### 8.5 可以自定义 iframe 高度吗？ [#](#17-toc-title) 可以。建议容器宽度设置为 `100%`，高度根据你的后台布局设置，常见值为 `850px` 到 `980px`。移动端页面需要结合自身产品布局做响应式适配。 ### 9. 接入检查清单 [#](#18-toc-title) 前端没有保存或暴露 API Secret。 服务端每次请求都重新生成时间戳和签名。 同一业务用户始终使用稳定的 `user_id`。 iframe 使用最新 Token 渲染，失效后可重新获取。 更新 19/08/2026 ###### 分享这篇文章 ： - ![Image](https://www.partnershare.net/wp-content/plugins/betterdocs/assets/images/social/share-icon.svg?v=4.3.4) - [https://www.facebook.com/sharer/sharer.php?u=https://www.partnershare.net/help/api/iframe](https://www.facebook.com/sharer/sharer.php?u=https://www.partnershare.net/help/api/iframe) - [https://twitter.com/intent/tweet?url=https://www.partnershare.net/help/api/iframe](https://twitter.com/intent/tweet?url=https://www.partnershare.net/help/api/iframe) - [https://www.linkedin.com/shareArticle?mini=true&url=https://www.partnershare.net/help/api/iframe](https://www.linkedin.com/shareArticle?mini=true&url=https://www.partnershare.net/help/api/iframe) - [https://pinterest.com/pin/create/button/?url=https://www.partnershare.net/help/api/iframe](https://pinterest.com/pin/create/button/?url=https://www.partnershare.net/help/api/iframe) [API 鉴权与签名机制](https://www.partnershare.net/help/api/signature) [推广转化事件回传](https://www.partnershare.net/help/api/event-report) 大纲 - [1. 适用场景](#0-toc-title) - [2. 接入模式](#1-toc-title) - [3. 页面效果示意](#2-toc-title) - [4. 前置要求](#3-toc-title) - [5. 获取推广者登录 Token](#4-toc-title) - [5.1 请求头](#5-toc-title) - [5.2 请求参数](#6-toc-title) - [5.3 请求示例](#7-toc-title) - [5.4 响应示例](#8-toc-title) - [5.5 响应字段](#9-toc-title) - [6. 创建内嵌 iframe](#10-toc-title) - [7. 推荐的前后端分工](#11-toc-title) - [8. 常见问题](#12-toc-title) - [8.1 为什么必须由服务端获取 Token？](#13-toc-title) - [8.2 同一个用户每次进入页面都会重复创建推广者吗？](#14-toc-title) - [8.3 iframe 页面打不开或显示登录失效怎么办？](#15-toc-title) - [8.4 为什么接口返回“该产品下不存在推荐计划活动”？](#16-toc-title) - [8.5 可以自定义 iframe 高度吗？](#17-toc-title) - [9. 接入检查清单](#18-toc-title)