重庆互联网,19年企业互联网解决经验,专业网站开发、移动端开发、微信端开发、小程序开发!
重庆网络推广公司

微信云托管教程(七十二):公众号H5-访问云托管服务(一)

作者:重庆互联网小徐 发布时间:2024-01-08 浏览:20300 赞(2418 收藏 评论(0)

公众号H5调用,是指在公众号登录状态下进行的调用。如果公众号未登录则和普通网页一样,没有微信用户体系。

公众号登录需要遵守公众号-网页授权,目前情况下只有 已经微信认证的服务号 才可以完成下述登录鉴权流程。

另外需要注意,使用此方案实施登录,推荐前端页面放置在静态资源存储。目前云托管服务里动态服务提供页面目前已经支持,如果你的服务仍然表现是 Cannot GET /__wx__/oauth,可以重新部署更新一下服务,使策略生效。

微信云托管服务目前以支持下述转发。 如果你使用自有服务器,或者其他非微信云托管提供公众号WEB分发服务,遇到Cannot GET /__wx__/oauth,可以在服务内(自有服务器或其他服务)配置转发规则,转发规则如下:
https://domain/__wx__/xxx -> https://servicewechat.com/wxa-qbase/xxx

location /__wx__/ {
    proxy_pass  https://servicewechat.com/wxa-qbase/;}

使用优势(对比wx.request)

  1. 不耗费任何公网流量,前后端通信走内网;

  2. 天然免疫DDoS攻击,仅授权小程序/公众号可访问后端,其他人无法访问;

  3. 无视后端服务地域影响,没有跨地域延迟,后端无需多地部署;

  4. 无需配置「服务器域名」;

  5. 后端可直接获取用户信息。

因此,如果云托管服务只有微信小程序/公众号会调用,建议在服务设置中关闭公网访问

使用前提

我们约定H5使用的公众号为A公众号,如果你希望另外一个 B公众号或者B小程序 的云托管环境也可以被 A公众号 访问,可以按照如下指引操作:

  1. A公众号 和 B公众号/B小程序同主体:需要配置资源复用

  2. A公众号 和 B公众号/B小程序不同主体:推荐使用「微信开放平台-第三方平台」方式。

  3. A公众号和 B公众号/B小程序不同主体:将B公众号/B小程序视为「其他客户端」,通过公网访问。参考文档其他客户端-访问云托管服务。此方式下,B公众号/B小程序无法使用云调用/微信令牌,且需要配置「服务器域名」(使用云托管服务的默认公网域名/自定义域名均可)。

如果你对以上有任何建议和期待,欢迎在官方交流群联系我们。

基本使用

下述使用代码中,我们提供了一个JS模块 mplogin.min.js ,方便你可以直接调用就可以完成登录初始化,节省了你的接入成本。有一些注意点需要提前知晓:

  1. 云托管SDK在初始化前,需要自己登录过程,不兼容原生的登录;所以如果你使用了原生登录,请替换掉。

  2. SDK登录初始化时,页面将经过2-4次跳转,最终在页面栈中增加一级,mplogin模块自动处理回退了,如果想自己处理,可以传noback:true 。

  3. mplogin模块可能不太适应部分框架型项目,会出现循环跳转的情况,有部分冲突,请在上线前在各种平台上充分测试,一般传noback:true可以解决大部分问题。

  4. mplogin不适合时,可参考此文档前后SDK方法,自行实现整个登录初始化过程。

  5. 下述方法每个页面的登录初始化是独立的,如果你的项目页面比较多,推荐使用独立登录页形式,减少初始化步骤,降低完成时间。

首先,在网页中引入如下3个JS文件

# 微信公众号SDK,用于使用前端公众号接口https://res.wx.qq.com/open/js/jweixin-1.6.0.js# 微信云服务SDK,用于调用微信云服务资源https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.3.0/cloud.js# 封装的登录授权模块,用于一步完成授权登录步骤https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.3.1/mplogin.min.js

如果你因为业务原因,需要自己实现授权步骤,请参考此文档前后SDK方法。

然后在js中使用如下代码:

window.onload = async function () {
  // 使用登录模块,传入信息开始授权登录过程
  // 如果首次登录,页面会经历一系列跳转过程,请不要在登录前加业务处理代码,以免登录被中断。
  const result = await window.mplogin({    
    scope: "snsapi_userinfo",             // 必填,登录方式:snsapi_userinfo、snsapi_base
    appid: 'wxaa01testenvid99',           // 必填,公众号appid,将以此appid名义进行请求
    // redirect: '',                      // 选填,授权成功后路由的地址,目标地址应能处理授权参数,不填为当前页面
    envid: 'prod-testenvid',              // 选填,资源方微信云托管环境,如果传递此参数则会返回初始化的cloud操作对象
    resourceAppid: 'wxaa02testenvid99',   // 选填,如果是资源复用模式,需要填环境共享下资源方微信账号
    signature: window.location.href,      // 选填,如果需要微信SDK的API方法,则填写要使用的地址,会返回signature签名对象,envid参数不填则无效。
    // region: ''                         // 选填,环境的地域,可选ap-guangzhou、ap-beijing,不填默认为ap-shanghai
    // traceUser:false                    // 选填,默认true,是否在将用户访问记录到用户管理中,非上海地域请设置成false
    // noback: true                       // 选填,默认noback:false,此时初次跳转授权后,模块将重新回退加载页面。
                                          // 由于CloudSDK在初次登录时需要多个页面跳转,最终带参返回页面在浏览器页面栈中多了一到两层
                                          // 你可以根据业务自行用history处理上述问题,不需要模块介入则填noback:true
  })
  // 登录完成后,结果会以对象形式展示
  /* 返回信息结构:
    ret: number               // 登录的状态
    |_ -1: 参数错误,一般是appid缺失和scope类型有误
    |_  0: 成功
    |_  1: 当前页面或redirect页面非https协议,授权机制无法作用,请使用https协议
    |_  2: 系统判定有风险,阻止了此次登录,一般是授权耗时太长,导致过期了,清除缓存刷新可解决问题
    |_  3: 未引入微信WEBSDK,无法初始化cloud操作对象,或者因为环境未授权此账号使用。
    msg: string               // 登录失败的问题描述
    cloud: object[function]   // envid参数存在并成功初始化后,返回的操作函数对象
    signature: object[string] // envid、signature参数存在并成功初始化后,返回的签名信息
    info: string              // 如果snsapi_userinfo登录,则会返回用户信息的cloudID,可以使用转换接口获取信息,见下文
  */
  console.log(result)
  if (result.ret === 0) {                 // ret为0时,代表登录已经完成,可以进行业务操作
    window.app = result.cloud             // result.cloud 返回初始化可操作的cloud函数对象,将其放置全局

    // 向云托管服务发起调用
    const callres = await window.app.callContainer({
      path: '/xxx',                       // 填入业务自定义路径和参数,根目录,就是 / 
      method: 'POST',                     // 按照自己的业务开发,选择对应的方法
      header: {
        'X-WX-SERVICE': 'xxx',            // xxx中填入服务名称(微信云托管 - 服务管理 - 服务列表 - 服务名称)
      }
      // 其余参数同 wx.request
    })
    console.log(callres)
    
    // 使用微信公众号SDK,开始签名,签名信息在result.signature中
    
    // 监听签名注册成功
    wx.ready(function () {
      // 发起网络类型获取,只是测试,可以替换自己想要的API方法
      wx.getNetworkType({
        success: function (res) {
          window.alert('当前设备网络类型:'+res.networkType)
        }
      })
    })
    // 发起签名注册,是一个异步操作,成功会触发wx.ready
    wx.config({
      appId: 'wxaa01testenvid99',                   // 微信公众号appid
      timestamp: result.signature.timestamp + '',   // 时间戳,从返回result.signature中获取
      nonceStr: result.signature.nonceStr,          // 随机字符串,从返回result.signature中获取
      signature: result.signature.signature,        // 签名,从返回result.signature中获取
      jsApiList: ['getNetworkType']                 // 注册的api列表
    })
  } else {  // ret不为0时,代表登录出现错误,一般出现在开发调试中,正式使用一般只有2-系统拦截错误
    // 登录出现问题,打印问题描述
    window.alert(result.msg)
  }}

snsapi_userinfo登录,会返回用户信息的cloudID,可参考此文档获取明文信息

如果你想深入了解 callContainer 的原理,建议阅读这篇文章


重庆互联网项目从2004年开始为各行各业提供互联网发展解决方案,专业从事网站、小程序、微信公众号、APP、电商平台、系统等互联网平台开发,帮助企业实现从传统行业到互联网的完美转型。截止目前,重庆互联网合作的企业遍布全国各地,19年的开发经验和完善的售后服务体系获得合作客户的高度认可!

关注重庆互联网官方公众号,即可获取粉丝专享福利!

重庆互联网公众号二维码.jpg

网友留言评论
我要评论
评论

欢迎广大用户为此页面进行评价,评价成功将获得积分奖励!

  • 赞(0
    踩(0
重庆网站定制建设
  • 重庆网站建设平台
  • 重庆网站优化公司
  • 重庆网络推广公司哪家好
  • 重庆APP制作公司
版权所有 ©2004-2024 重庆市渝中区圣灵科技信息有限公司 渝ICP备16004600号-14 渝公网安备50010802001420号 电子营业执照
重庆公众号制作哪家好
二维码
联系客服 重庆商城网站建设