MIP 熊掌号登录和 MIP 支付

[xuexb]

前提条件

首先需要熟悉以下知识、功能：

1. 环境的区分：
   • 源站：是指网站源域名，如：https://www.mipengine.org 。
   • MIP-Cache 页面：是指源站上线后，且符合 MIP-HTML 规范 后缓存到 MIP-CDN 上的链接，如：https://www-mipengine-org.mipcdn.com/c/s/www.mipengine.org ，点击查看更多 MIP-Cache 文档 。
   • 搜索结果页打开：以百度的域名 m.baidu.com 形式打开嵌入式的 MIP-Cache 页面，如：https://m.baidu.com/mip/c/s/www.mipengine.org 。
2. 源站跨域：
   • 使用 CORS 跨域 + POST（FormData）提交数据 ，透传 cookie 使用 withCredentials 方案。
   • 由于跨域限制，登录接口需要返回 response.sessionId 会话标识，登录组件会做前端缓存，在涉及到用户信息时发送接口数据时透传该参数，后端应该使用 cookie > POST.sessionId 做用户状态管理。
3. 源站接口：
   • 必须支持 HTTPS 。
   • 在页面中、组件中所有接口必须使用 https:// 或者 // 的绝对链接形式。
   • 所有接口必须使用一套后端服务，因为可能涉及到共享用户信息、状态等。
   • 所有接口必须返回标准的 JSON 格式。
4. 登录状态需要由后端记录状态，前端调用时可使用 CORS + withCredentials 透传 cookie > POST.sessionId 以标识用户唯一标识。
5. 熟悉熊掌号登录授权（oauth 授权）、支付相关文档和后端逻辑。
6. 了解源站被缓存到 MIP-Cache 后是纯静态的 HTML 页面，并了解其实缓存的时长（有助于后续追查问题）。
7. 熟悉 mustache.js 语法。

熊掌号登录组件 - 已上线

熊掌号登录组件

支付 - 已上线

MIP 支付组件

[xuexb]

目前登录组件没有把用户信息往其他组件透传，因为应当是其他组件默认认为是未登录，在登录组件上绑定 login 事件去触发其他组件的重新检查状态，而用户信息应该由其他组件的后端服务提供。

这块有什么问题或需求，欢迎讨论。

[windtalkers]

1. 登录信息，建议支持<script type="application/json"></script>的描述，这样写和检查都比较简单；
2. 登录操作，一定要是post请求。
3. login和logout我的理解，应该是封装一个组件，如果是，怎没有问题。

[xuexb]

1. 登录信息，建议支持 <script type="application/json"></script> 的描述，这样写和检查都比较简单；

这里应该是指登录组件 <mip-xzh-login> 的参数配置吧，目前一共有四个参数，可以考虑使用 JSON 来定义。

2. 登录操作，一定要是post请求。
   真实的登录操作其实是在熊掌号页面，登录组件 <mip-xzh-login> 负责两个事：

1. 每次页面加载完成后向后端的 data-get-userinfo-url 发送请求，后端来返回是否登录和登录后的信息 response.data 。
2. 如果是从熊掌号授权成功后跳转回来，则会带有 code ，则在向后端的 data-get-userinfo-url 发送请求时透传访参数，那么后端来处理各种逻辑，成功后返回信息 response.data 。

以上两个请求不包含任何隐私信息，需要源站记录登录状态（如 cookie），前端只是透传，组件设计时考虑使用 CORS + POST。

@windtalkers

[xuexb]

补充下第三，刚才回的有点问题

login 和 logout 是登录组件在登录成功、退出成功时向组件自身触发的事件，方便和其他组件进行交互，只是目前没有向其他组件共享登录用户数据，今天（0402）会在梳理下这块并给出组件设计方案。

[windtalkers]

只是登录状态查询的组件，那我就明白了，我还以为需要发起完整的登录过程，不过总感觉这里设计的有点复杂，不知道这块和access会不会有冲突？这块建议仔细想想， 比如将来和access如果需要深入的合作，是否有可能

[tayqassqan]

因为登录&支付组件对隐私模式或高版本safari等不能直接跨域传递cookie的浏览器做了特殊处理，需要文档和示例进一步说明兼容的方案。

[VenyXiong]

方案已上线