记一次开发微信头像生成器的经历

866 阅读4分钟

一、功能逻辑

1. 用户在微信中打开一个网页链接;
2. 网页获取并显示用户头像;
3. 网页自动将用户头像与企业logo拼接到一起;
4. 用户长按拼接好的图片可下载图片,该图片可作为用户头像;

二、效果展示


三、实现逻辑

功能很简单,这里就讲下逻辑,不贴代码了。

1. 用户在微信打开链接(https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect)进行网页授权,此时用户可看到如下界面:
2. 用户同意授权后,界面带上用户code重定向到传入的redirect_uri页面,该页面由我们开发。
3. 在该页面中我们能从url中取到参数code,将code发送到我们的后端请求用户头像信息。
4. 后端通过接口https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=${code}&grant_type=authorization_code获得access_tokenopenid,再通过https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN获得用户信息,最后将获得的信息返回给前端页面。
5. 前端接收到用户信息后,将其中的头像展现出来,并通过css将用户头像和企业logo叠在一起。
6. 前端通过html2canvas将头像区的显示效果转为用canvas元素显示,通过调用canvas.toDataURL('image/png')生成base64图片,并使用img元素来展示该图片,用户长按该图片可下载。

四、微信公众号配置

以前没使用过微信公众号的网页授权接口,这次做过真是涨了不少知识,即使是这么小的需求,也值得我记录下开发中的心路历程了。实现花了半天,调试公众号配置花了1天。那么让我们来看下在微信公众号这边需要配置什么。
  1. 需要是一个通过微信认证的服务号,不能用订阅号;
  2. 需要在“开发-基本设置”中获取AppId,并申请到AppSecret
  3. 需要在“开发-基本设置”中将redirect_uri的域名对应的ip配置到“IP白名单”中;
  4. 需要在“开发-接口权限”申请“网页授权获取用户基本信息”接口;
  5. 需要在“公众号设置-功能设置-网页授权域名”配置redirect_uri的域名,配网页授权域名时可看到需要将一个txt文件配置到redirect_uri的域名的根路径下;
  6. 如果需要使用微信开发者工具进行调试,需要在“开发者工具-web 开发者工具”,向开发者微信号发送绑定邀请。

五、思考

最后让我们思考下使用本文用到的微信的网页授权功能为啥需要怎么多配置。
  1.  微信公众平台有描述,服务号是“给企业和组织提供更强大的业务服务与用户管理能力,帮助企业快速实现全新的公众号服务平台”,订阅号是“为媒体和个人提供一种新的信息传播方式,构建与读者之间更好的沟通与管理模式”。可见订阅号偏信息传播,服务号偏业务平台,所以服务号能提供微信登录而订阅号不能也在情理之中。至于微信认证,就是为了确定使用微信用户信息的主体的真实性,需签协议,为企业组织正确安全地使用微信服务提供保障。
  2. AppId是可公开的,就像公钥;AppSecret是绝对保密的,就像私钥。使用AppId,可以在客户端获取到一次获取用户信息的机会,这个机会有时效性,且只能使用一次。因为要确定是用户触发,给企业这样一个机会,所以需要用于客户端,所以需要公开AppId。企业拿到这个机会,就可以通过私钥AppSecret去微信后台获取用户信息。AppIdAppSecret是有关联关系的,所以某个AppId生成的机会,必须被对应的AppSecret使用,防止机会泄露。
  3. 将重定向域名的ip配到白名单,是为了保证调用微信接口获取用户信息的调用方和使用该机会的使用方是同一个。
  4. 某些特别接口的开通需要申请,在申请的时候可以告知申请方使用该接口需要承担的责任。
  5. 这里对重定向域名的管控,也可以确保客户端确实是本企业的开发的。
  6. 这一点是对web开发者工具使用的限制,开发者不能在该工具调试未得到相应服务号授权的客户端功能。

OK,完工,以上是我本次开发微信头像生成器的心得,如有错误,敬请指正~