企业官网建设流程全解析

网站设计公司无锡,手机网站欢迎页面,河南建设厅网站查证,百度搜索排名机制静默授权获取openid确实主要是前端页面操作#xff0c;后端只需处理最后一步的code换openid。具体流程如下#xff1a;完整操作流程第一步#xff1a;微信公众号后台配置#xff08;管理员操作#xff09;配置授权回调域名登录公众平台 → 设置与开发 → 公众号设置 → 功…静默授权获取openid确实主要是前端页面操作后端只需处理最后一步的code换openid。具体流程如下完整操作流程第一步微信公众号后台配置管理员操作配置授权回调域名登录公众平台 → 设置与开发 → 公众号设置 → 功能设置找到网页授权域名设置项填写你的域名不要加http://如yourdomain.com上传校验文件点击下载微信提供的TXT验证文件如MP_verify_xxxxxx.txt将该文件上传至服务器根目录确保能访问http://yourdomain.com/MP_verify_xxxxxx.txt保存配置等待审核通过第二步前端实现静默授权核心操作整个授权流程需要在微信浏览器内完成。1. 准备结果页面创建一个授权回调页面如/auth/callback用于接收微信返回的codeHTML预览复制!-- callback.html -- !DOCTYPE html html head title授权中.../title /head body script // 页面加载时获取code function getCode() { const url window.location.href; const code url.split(code)[1]?.split()[0]; if (code) { // 将code传给后端 fetch(/api/getOpenid, { method: POST, body: JSON.stringify({ code }) }).then(res { // 处理成功后的逻辑如跳转到目标页面 window.location.href /home; }); } else { alert(授权失败请重试); } } getCode(); /script /body /html2. 构造授权URL并跳转在用户需要获取openid时如点击绑定微信按钮前端构造授权链接并跳转JavaScript复制// 对回调地址进行URL编码 function urlencode(str) { return encodeURIComponent(str) .replace(/!/g, %21) .replace(//g, %27) .replace(/\(/g, %28) .replace(/\)/g, %29) .replace(/\*/g, %2A) .replace(/%20/g, ); } // 获取openid的函数 function getWechatOpenid() { const appid YOUR_APPID; // 公众号AppID const redirectUri urlencode(https://yourdomain.com/auth/callback); // 结果页面地址 const scope snsapi_base; // 静默授权 const state 123; // 可选用于传递自定义参数 const authUrl https://open.weixin.qq.com/connect/oauth2/authorize?appid${appid}redirect_uri${redirectUri}response_typecodescope${scope}state${state}#wechat_redirect; // 如果是微信浏览器内直接跳转 if (isWechatBrowser()) { window.location.href authUrl; } else { // 非微信环境生成二维码或提示复制链接 alert(请使用微信扫一扫或复制链接到微信打开); } } // 判断是否为微信浏览器 function isWechatBrowser() { return /MicroMessenger/i.test(navigator.userAgent); }3. 触发授权在页面中添加触发按钮HTML预览复制button onclickgetWechatOpenid()绑定微信/button第三步后端处理code换取openid前端获取到code后需由后端服务器调用微信接口换取openidjava复制// Java示例 public String getOpenId(String code) { String url https://api.weixin.qq.com/sns/oauth2/access_token? appidAPPIDsecretAPPSECRETcode code grant_typeauthorization_code; // 发起HTTP GET请求 String result restTemplate.getForObject(url, String.class); JSONObject json JSON.parseObject(result); return json.getString(openid); // 返回openid }关键参数APPID公众号AppIDAPPSECRET公众号AppSecretcode前端传来的临时凭证有效期5分钟只能使用一次重要注意事项1.域名必须完全一致配置的授权域名必须与redirect_uri的域名完全一致不支持子域名通配如需多个域名需分别配置2.URL编码要求redirect_uri必须经过严格URL编码否则微信会提示redirect_uri参数错误如果回调地址包含hash路由如/#/pages/bind需对整个URL编码3.环境判断必须在微信内置浏览器中打开授权链接PC端可将链接生成二维码引导用户微信扫码4.静默授权特点scopesnsapi_base时用户无感知页面直接跳转只能获取openid无法获取昵称、头像等信息用户无需关注公众号也可获取openid5.Token管理返回的access_token与普通access_token不同无需缓存此token仅用于获取用户信息2小时有效期不限制调用次数常见问题排查表格复制问题原因解决方案redirect_uri参数错误域名未配置或URL编码不正确检查授权域名配置重新编码回调地址无法获取code在非微信浏览器打开确保在微信内访问或使用二维码引导提示scope参数错误或没有scope权限使用了snsapi_userinfo但未认证服务号需微信认证后才可使用userinfocode已失效code超过5分钟或已被使用重新发起授权流程整个流程核心是前端负责跳转和获取code后端负责换取openid分工明确且安全。