H5 公众号用户身份识别并返回openid
用于解决H5项目用户微信登陆的身份识别问题。
技术上无须接入公众号繁琐的接口,可通过接入本服务后,实现对微信用户身份的识别,获取到微信用户的唯一openid
逻辑流程图
graph TD
用户访问 --> 开发者项目 --> 页面跳转1 --> 冰橙API
冰橙API --> 获取到用户唯一OpenId后 -->页面跳转2 --> 开发者项目
重点
冰橙API在获取到用户OPENID后,会重新跳转回开发者项目页面路径,这里开发者项目通过接收地址栏传参获取用户相关信息(参数中包含头像、昵称、OPENID)
实现方法(示例)
1、记录当前开发者页面URL,然后跳转到冰橙API公共识别页面
//假如用户访问了开发者项目,如访问的页面地址为https://a.com/1.html
//下面代码所在页面:1.html
let curUrl=encodeURIComponent('https://a.com/1.html');//将当前页面url路径转码后传给冰橙API
location.href = 'https://yewu.bcwhkj.cn/api/v2.Wechat/PublicGoWeChat?token=123456&urls=' + curUrl;//跳转到冰橙API
//token目前固定为123456 后续将在开放白名单域名机制后变更
2、冰橙API识别OPENDID后,会跳转回开发者项目
//下面代码所在页面:1.html
const urlParams = new URLSearchParams(window.location.search);
const opid = urlParams.get('openid');
if(opid){
console.log('获取到的用户OPENID',opid);
console.log('获取到的用户昵称',urlParams.get('nickname'));
console.log('获取到的用户头像路径',urlParams.get('headimgurl'));
//后续可以是进行生成用户并将OPENID进行绑定。
//比如将当前获取到的OPENID存放到浏览器缓存localStorage,下次用户登陆时读取浏览器缓存即可实现是否是同个用户
}
注意
目前暂无路径限制,后续将通过白名单机制放行相关路径
最后修改时间: 7 个月前