微信掃碼登陸

官方文檔:網站應用微信登陸開發指南css

流程圖

clipboard.png

使用步驟

  1. 在使用的頁面中引入:http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
  2. 在須要使用微信登陸的地方實例如下JS對象:html

    var obj = new WxLogin({
         id:"containerId", // 須要顯示的容器id
         self_redirect:true,/*true:手機點擊確認登陸後能夠在 iframe 內跳轉到 redirect_uri,false:手機點擊確認登陸後能夠在 top window 跳轉到 redirect_uri。默認爲 false。*/
         appid: "wx*****",  // 公衆號appid wx*******
         scope: "snsapi_login",  // 應用受權做用域,以逗號隔開。網頁應用目前僅支持snsapi_login
         redirect_uri: "", // 受權成功後回調的url
         state: "", /* 用於保持請求和回調的狀態,受權請求後原樣帶回給第三方。該參數可用於防止csrf攻擊(跨站請求僞造攻擊),可設置爲簡單的隨機數加session用來校驗*/
         style: "black", // 提供"black"、"white"可選。二維碼的樣式
         href: "" // 外部css文件url,須要https
    });
  3. 過程詳解:
    當使用微信掃碼,微信校驗成功後,會訪問redirect_uri,並在redirect_uri的參數上添加code和設置的state。

    在node層,添加一個redirect_uri對應的路由,當路由接受到對應請求,先校驗一下state,而後將拿到的code和appid, secret, grant_type參數請求 https://api.weixin.qq.com/sns...,拿到用戶的ACCESS_TOKENnode

    經過ACCESS_TOKEN訪問https://api.weixin.qq.com/sns...,即可以拿到用戶的微信信息了。api

    將拿到的用戶信息(有用戶的惟一的openid),調用後臺的微信登陸接口,成功redirect到進入登陸頁面以前的url即可以了。微信

    備註:有的狀況可能須要校驗或刷新用戶的ACCESS_TOKEN.session

相關文章
相關標籤/搜索