公众号网站开发——技术实现与安全规范
一、OAuth2.0网页授权深度解析
公众号网站开发最核心的技术点是微信OAuth2.0网页授权。理解两种应用场景至关重要：
场景1：微信客户端内的网页应用
-
用户在公众号菜单点击直接打开页面，或在微信消息列表收到网页URL直接点击打开
-
使用公众号平台的网页授权域名配置
-
适用于移动端版本（通常部署在二级域名下，如
mobile.domain.com）
场景2：PC浏览器扫码登录
-
用户在PC浏览器打开页面，呈现二维码
-
用户使用手机微信扫一扫确认登录后，网页自动跳转
-
使用开放平台的授权回调域配置
-
适用于PC端版本（通常部署在一级域名下，如
domain.com）
OAuth2.0授权流程代码示例：
// 构建授权URL const appId = '你的AppID'; const redirectUri = encodeURIComponent('http://mobile.domain.com/callback'); const scope = 'snsapi_userinfo'; // 或 snsapi_base const state = 'STATE'; const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`; // 用户同意授权后，重定向到redirect_uri，携带code参数 // 后端通过code换取access_token async function getAccessToken(code) { const response = await fetch( `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${secret}&code=${code}&grant_type=authorization_code` ); return response.json(); }
二、微信JSSDK配置与调用
配置步骤：
wx.config({ debug: false, // 开启调试模式 appId: '你的AppID', timestamp: '生成的时间戳', nonceStr: '生成的随机串', signature: '生成的签名', jsApiList: [ 'updateAppMessageShareData', // 定制分享 'chooseWXPay', // 微信支付 'getLocation', // 获取地理位置 'scanQRCode' // 扫一扫 ] }); wx.ready(function() { // JSSDK加载成功后的回调 // 在这里调用需要的能力 }); wx.error(function(res) { // JSSDK加载失败的处理 console.error('JSSDK加载失败:', res); });
三、安全规范与合规要点
域名配置：所有API调用域名必须在公众号后台配置为安全域名。JS接口安全域名、网页授权域名、业务域名三者各司其职。
HTTPS强制：所有微信环境内的页面必须使用HTTPS协议，否则无法调用任何微信能力。
权限控制：通过Spring Security等框架控制API访问权限，防止CSRF攻击。
数据加密：用户敏感信息（如OpenID、手机号）在传输和存储时需加密处理。
