最近公司给我安排一个微信登录的功能,需求是这样的:
1.登录授权
点击二维码图标后,登录界面切换为如下样式(二维码),微信扫描二维码并授权,即可成功登录;
若当前账号未绑定微信账号,扫描后提示“您的账号未绑定微信号,请先登录绑定”;
点击“返回”按钮,界面切换为账号密码登录;
若微信号绑定多个账号在,则展示所绑定全部账号的用户名和企业名,选择账号后点击登录按钮成功登录;
2.扫描绑定
账号登录后检测当前账号open_id为空,则展示当前弹窗(001管理员账号除外);
用户微信扫描二维码后,将当前微信号绑定至对应账号;
若微信号之前绑定其他账号,则对应open_id下增加一个账号;
3.个人资料
新增一个'微信号'字段:显示账号是否绑定
好,现在整理逻辑,理清思路,画图:
声明一下,PC端的微信扫码登录是微信开放平台,移动端关注是跳转第三方应用的,用的是公众平台,两个的接口地址拿的openId不一样,开放平台下面如果创建多个应用或者绑定多个公众号,各公众号之间用unionId打通。
openId和unionId区别:http://www.25xt.com/html5css3/11968.html
公司或者企业在开发前 登录微信开放平台,注册认证,创建一个应用(应用就是你的项目,产品,不知道就直接让产品帮你注册认证,一般需要一个礼拜时间审批+300人民币,完了拿到AppId和AppSecret)
自己的本地环境要映射到外网,那样微信才能访问到自己接口来。推荐使用ngrok,不会的网上有教程,我的是直接让人帮我配的。
准备工作做好,开始开发:
第一步:根据文档生成二维码(开放平台 --> 资源中心 --> 网站应用 --> 微信登录功能 --> 网站应用微信登录开发指南)
我这里不需要生成整个页面,而是在一个div里生成,所以用js生成:
1.在页面中先引入如下JS文件(支持https):
2.在需要使用微信登录的地方实例以下JS对象:
var obj =newWxLogin({
id:"login_container",//div的id
appid:"",
scope:"",
redirect_uri:"",//回调