# 微信扫描二维码登录 * 流程 1.微信用户在网站页面上扫描二维码 2.请求用户授权登录 3.用户确认授权登录后会跳转到指定地址(redirect_uri),并携带参数code和state 4.后端获取code,再加上appId和appSecret通过api换取access_token; 5.后端用access_token获取用户信息返回给前端 6.前端重新刷新加载用户信息 备注: 步骤3可在iframe中跳转,然后待后端返回数据后整个页面重新跳转到首页 * html ~~~ < --- 生成的二维码挂载容器 --- > <div id="qrcode"><div> ~~~ * js 引用: http://res.wx.qq.com/connect/zh\_CN/htmledition/js/wxLogin.js 在需要使用微信登录的地方实例以下JS对象: ~~~ var obj = new WxLogin({ self_redirect: false, id: 'qrcode', appid: 'wx3bebfa287fda8995', scope: 'snsapi_login', redirect_uri: 'https://www.baozhinin.com', state: '123456', style: 'black', href: '' }) ~~~ | 传入参 | 说明 | | --- | --- | | self_redirect | [ 选填 ] true(手机授权登录后再iframe内跳转到redirect_uri ) false(整个页面跳转到redirect_uri) 默认为false | | id | [ 必填 ] 对应挂载二维码的容器id | | appid | [ 必填 ] 网页应用唯一标识 | | scope | [ 必填 ] 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi\_login即可 | | redirect_uri | [ 必填 ] 重定向地址, 必须为授权的网站域名内的链接地址 | | state | [ 选填 ] 携带参数,请求原样返回(例如加密校验) | | style | [ 选填 ] 设置描述的文字颜色 提供"black"和"white"选择 | | href | [ 选填 ] 自定义二维码样式链接 | ***** * 调用API * 地址 ~~~ ~~~ ~~~[api] get:/url *string:code#重定向跳转链接上携带的参数code *string:state#重定向跳转链接上携带的参数state <<< success { "succeed": 1, "msg": "请求成功" "u_id": "用户id" } <<< error { "succeed": 0, "msg": "请求失败" } ~~~