# 微信掃描二維碼登錄 * 流程 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": "請求失敗" } ~~~