微信掃碼登入網站

<code>1. 第三方發起微信授權登入請求，微信使用者允許授權第三方應用後，微信會拉起應用或重定向到第三方網站，并且帶上授權臨時票據code參數；</code>

<code>2. 通過code參數加上AppID和AppSecret等，通過API換取access_token；</code>

<code>3. 通過access_token進行接口調用，擷取使用者基本資料資源或幫助使用者實作基本操作。</code>

<code>第一步：請求CODE</code>

<code>第三方使用網站應用授權登入前請注意已擷取相應網頁授權作用域（scope=snsapi_login），則可以通過在PC端打開以下連結：</code>

<code>https:</code><code>//open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect</code>

<code>若提示“該連結無法通路”，請檢查參數是否填寫錯誤，如redirect_uri的域名與稽核時填寫的授權域名不一緻或scope不為snsapi_login。</code>

<code>參數是否必須說明</code>

<code>appid 是應用唯一辨別 </code>

<code>redirect_uri 是重定向位址，需要進行UrlEncode </code>

<code>response_type 是填code </code>

<code>scope 是應用授權作用域，擁有多個作用域用逗号（,）分隔，網頁應用目前僅填寫snsapi_login即可 </code>

<code>state 否用于保持請求和回調的狀态，授權請求後原樣帶回給第三方。該參數可用于防止csrf攻擊（跨站請求僞造攻擊），建議第三方帶上該參數，可設定為簡單的随機數加session進行校驗</code>

<code>使用者允許授權後，将會重定向到redirect_uri的網址上，并且帶上code和state參數</code>

<code>redirect_uri?code=CODE&state=STATE</code>

<code>若使用者禁止授權，則重定向後不會帶上code參數，僅會帶上state參數</code>

<code>redirect_uri?state=STATE</code>

<code>登入一号店網站應用</code>

<code>https:</code><code>//passport.yhd.com/wechat/login.do</code>

<code>打開後，一号店會生成state參數，跳轉到</code>

<code>https:</code><code>//open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect</code>

<code>微信使用者使用微信掃描二維碼并且确認登入後，PC端會跳轉到</code>

<code>https:</code><code>//passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e</code>

<code>為了滿足網站更定制化的需求，我們還提供了第二種擷取code的方式，支援網站将微信登入二維碼内嵌到自己頁面中，使用者使用微信掃碼授權後通過JS将code傳回給網站。</code>

<code>JS微信登入主要用途：網站希望使用者在網站内就能完成登入，無需跳轉到微信域下登入後再傳回，提升微信登入的流暢性與成功率。網站内嵌二維碼微信登入JS實作辦法：</code>

步驟1：在頁面中先引入如下JS檔案（支援https）：

<code><script src=</code><code>"http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"</code><code>></script></code>

步驟2：在需要使用微信登入的地方執行個體以下JS對象：

<code> </code><code>var</code> <code>obj = </code><code>new</code> <code>WxLogin({</code>

id:"login_container",

<code> </code><code>appid: </code><code>""</code><code>, </code>

<code> </code><code>scope: </code><code>""</code><code>, </code>

<code> </code><code>redirect_uri: </code><code>""</code><code>,</code>

<code> </code><code>state: </code><code>""</code><code>,</code>

<code> </code><code>style: </code><code>""</code><code>,</code>

<code>id 是第三方頁面顯示二維碼的容器id </code>

<code>appid 是應用唯一辨別，在微信開放平台送出應用稽核通過後獲得 </code>

<code>style 否提供</code><code>"black"</code><code>、</code><code>"white"</code><code>可選，預設為黑色文字描述。詳見文檔底部FAQ </code>

<code>href 否自定義樣式連結，第三方可根據實際需求覆寫預設樣式。詳見文檔底部FAQ</code>

<code>通過code擷取access_token</code>

<code>https:</code><code>//api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code</code>

<code>secret 是應用密鑰AppSecret，在微信開放平台送出應用稽核通過後獲得 </code>

<code>code 是填寫第一步擷取的code參數 </code>

<code>grant_type 是填authorization_code</code>

<code>正确的傳回：</code>

<code>"access_token"</code><code>:</code><code>"ACCESS_TOKEN"</code><code>, </code>

<code>"expires_in"</code><code>:7200, </code>

<code>"refresh_token"</code><code>:</code><code>"REFRESH_TOKEN"</code><code>,</code>

<code>"openid"</code><code>:</code><code>"OPENID"</code><code>, </code>

<code>"scope"</code><code>:</code><code>"SCOPE"</code><code>,</code><code>"unionid"</code><code>: </code><code>"o6_bmasdasdsad6_2sgVt7hMZOPfL"</code><code>}</code>

<code>access_token 接口調用憑證 </code>

<code>expires_in access_token接口調用憑證逾時時間，機關（秒） </code>

<code>refresh_token 使用者重新整理access_token </code>

<code>openid 授權使用者唯一辨別 </code>

<code>scope 使用者授權的作用域，使用逗号（,）分隔 </code>

<code> </code><code>unionid 隻有在使用者将公衆号綁定到微信開放平台帳号後，才會出現該字段。</code>

<code>錯誤傳回樣例：</code>

<code>{</code><code>"errcode"</code><code>:40029,</code><code>"errmsg"</code><code>:</code><code>"invalid code"</code><code>}</code>

<code>重新整理access_token有效期</code>

<code>access_token是調用授權關系接口的調用憑證，由于access_token有效期（目前為2個小時）較短，當access_token逾時後，可以使用refresh_token進行重新整理，access_token重新整理結果有兩種：</code>

<code>1. 若access_token已逾時，那麼進行refresh_token會擷取一個新的access_token，新的逾時時間；</code>

<code>2. 若access_token未逾時，那麼進行refresh_token不會改變access_token，但逾時時間會重新整理，相當于續期access_token。</code>

refresh_token擁有較長的有效期（30天），當refresh_token失效的後，需要使用者重新授權。

請求方法

擷取第一步的code後，請求以下連結進行refresh_token：

<code>https:</code><code>//api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN</code>

<code>grant_type 是填refresh_token </code>

<code>refresh_token 是填寫通過access_token擷取到的refresh_token參數</code>

<code>"refresh_token"</code><code>:</code><code>"REFRESH_TOKEN"</code><code>, </code>

<code>"scope"</code><code>:</code><code>"SCOPE"</code>

<code>scope 使用者授權的作用域，使用逗号（,）分隔</code>

<code>{</code><code>"errcode"</code><code>:40030,</code><code>"errmsg"</code><code>:</code><code>"invalid refresh_token"</code><code>}</code>

<code>1、Appsecret 是應用接口使用密鑰，洩漏後将可能導緻應用資料洩漏、應用的使用者資料洩漏等高風險後果；存儲在用戶端，極有可能被惡意竊取（如反編譯擷取Appsecret）；</code>

<code>2、access_token 為使用者授權第三方應用發起接口調用的憑證（相當于使用者登入态），存儲在用戶端，可能出現惡意擷取access_token 後導緻的使用者資料洩漏、使用者微信相關接口功能被惡意發起等行為；</code>

<code>3、refresh_token 為使用者授權第三方應用的長效憑證，僅用于重新整理access_token，但洩漏後相當于access_token 洩漏，風險同上。</code>

<code>建議将secret、使用者資料（如access_token）放在App雲端伺服器，由雲端中轉接口調用請求。</code>

本文轉自噼裡啪啦啦 51CTO部落格，原文連結：http://blog.51cto.com/pilipala/1717165，如需轉載請自行聯系原作者

微信掃碼登入網站

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條