微信開發-獲取用戶受權-node.js實現

時間 2019-11-08

標籤微信開發獲取用戶受權 node.js node 實現欄目 Node.js 简体版

原文原文鏈接

本篇主要講述，如何在微信中打開自家頁面後，彈窗請求用戶受權，以便拿到用戶的微信信息。css

首先說一下，完成自定義分享信息的，從無到有的流程：

基礎硬件服務：html

須要一個公網能夠訪問的有效域名：前端
1. 購買域名，並備案，我是在阿里雲購買的，備案須要十幾個工做日。
2. 購買ip，而後設置上面的域名，解析到該ip，這個時間能夠快到忽略。
擁有本身的服務器，來存放本身頁面項目：node

我仍是在阿里雲購買購買服務器，這個花費最大，幾百元一年的使用權。
並且這個服務器，本質就是一臺電腦，是電腦就有配置，我目前只是本身學習使用，配置幾乎是最低的，並且購買的套餐自帶公網ip，這麼一來我連上面購買ip的錢也省了。

綜上所述，最終我只購買了域名和一個套餐自帶公網ip的服務器，服務器用來放置前端項目和後臺項目。jquery

阿里雲ECS：https://cn.aliyun.com/product/ecsweb

微信公衆平臺，開發者認證ajax

打開微信公衆平臺 https://mp.weixin.qq.com/，使用郵箱註冊，注意，一個郵箱只能註冊一個微信公衆平臺帳號，一個帳號只能選擇一種帳號分類且不能更改，這裏必定要慎重，這裏選擇訂閱號。
可選我的類型、企業類型等等，其中，我的類型是不沒有分享定製功能的，但企業類型我又不符合。。。最終我仍是選擇的我的類型，由於即便個人帳號沒有權限，但微信公衆號裏面，提供一個功能全開的測試帳號，使用測試帳號能夠進行學習和測試，仍是沒問題的。
填寫信息，綁定微信，註冊完成，登陸進去。
爲了進行開發，須要在這裏和你的後臺項目和前端項目進行對應的配置，讓微信確認後臺項目和前臺項目都是你的以後，纔會提供服務。chrome
- 有關服務器端和後臺項目的配置：後端
  
  首先須要說明，因爲訂閱號的功能比較少，若是隻是進行學習，建議在 開發 => 開發者工具中選擇使用 公衆平臺測試賬號進行學習性開發，這樣可使用全功能的微信服務，配置也比較少。
  下面的配置步驟均是使用本身的帳號須要進行的配置
  1. 開發 => 基本配置 => 公衆號開發信息，在這裏記下開發者ID(AppID)，接着開通服務，記下開發者密碼(AppSecret)，開發中會須要輸入。
  2. 設置IP白名單，這裏寫的是本身的服務器IP地址，由於功能上線後，須要使用這臺服務器，經過開發者ID和密碼來向微信服務區獲取本身服務的access_token
  3. 進行下面的後臺項目，目的是讓微信肯定這個後臺項目是你的，檢驗方法是微信發起一個get請求，你返回正確的返回值，啓用此配置時調用：api
    - url：接口地址，好比http://wx.my.com/forWx
    - Token：徹底自定義的一個字符串，至關於個暗號，你的返回值須要這個字符串參與拼裝。
    - EncodingAESKey：隨機生成便可
    - 消息加解密方式：自選，這裏我使用的是明文模式
- 有關前端項目的配置：
  1. 設置 => 公衆號設置 => 功能設置 => JS接口安全域名在此處添加你的要使用微信sdk功能的網站的域名，好比wx.qq.com或者wx.qq.com/user，最多可寫三個，且須要驗證。

> 驗證的方式，就是將一個微信提供的txt文件，放在此域名對應的放置於服務器中的web項目的訪問根目錄中，須要和主文件（大部分默認爲```index.html```）放在同一級，當提交的時候，微信會進行訪問，來獲取文件，確認此域名是你的。

配置完成後，就能夠進行開發了。

下面進入代碼階段。

證實後臺項目和前端項目時我本身的

首先，上面證實服務是本身的部分，咱們須要實現一個接口，我用http://wx.my.com/forWx打的比方，那麼爲了啓用配置，我須要實現/forWx給微信調用，下面是代碼：

node的基礎環境搭建省略，這裏只寫接口內部方法了，關鍵是參數加密拼裝

const crypto = require('crypto')  // 引入加密模塊
const config = require('./config') // 引入配置文件
// 提供給微信調用
server.get('/forWx', function (req, res) {
  res.header('Access-Control-Allow-Origin', '*')
  // 1.獲取微信服務器Get請求的參數 signature、timestamp、nonce、echostr
  let signature = req.query.signature // 微信加密簽名
  let timestamp = req.query.timestamp // 時間戳
  let nonce = req.query.nonce // 隨機數
  let echostr = req.query.echost // 隨機字符串

  // 2.將token、timestamp、nonce三個參數進行字典序排序，其中token就是設置在微信頁面中的那個自定義字符串
  let array = [config.token, timestamp, nonce]
  array.sort()

  // 3.將三個參數字符串拼接成一個字符串進行sha1加密
  let tempStr = array.join('')
  const hashCode = crypto.createHash('sha1') //建立加密類型 
  let resultCode = hashCode.update(tempStr, 'utf8').digest('hex')
  
  //4.開發者得到加密後的字符串可與signature對比，標識該請求來源於微信
  if (resultCode === signature) {
    res.send(echostr)
  } else {
    res.send('mismatch')
  }
})

完成，上面是證實服務器是個人，後面還須要證實前端項目是個人，這個就跳過了，由於太簡單，直接下載那個文件，放到本身服務器中，前端項目的index.html同級便可

上面的操做，是隻要想進行微信公頁面開發，必需要有的步驟，一切的基礎。

首先順着功能使用流程，順一下實現此功能的方法：

用戶在微信打開頁面後，當即或者經過方法觸發ajax，把當前url和一些state（自定義的數據，由於彈窗請求用戶受權，是須要跳轉頁面的，這個state就是會幫你帶到下個頁面連接中的數據）做爲請求參數，請求本身的後臺接口。
後臺請求微信服務器，把如下做爲參數，拼裝到某個固定的微信指定的url後，返回給前端，參數爲：
- appId：本身的AppId
- redirect_uri：前端給的url
- scope：受權方式，是靜默受權（只能獲取用戶openId）仍是彈窗受權（能獲取用戶微信我的信息）
- state：要帶到新頁面的參數
前端拿到後端拼好的這個url，直接window.location.href暴力跳轉
若是靜默受權，則直接用戶無感，若是是彈窗受權，則新頁面（微信方提供的頁面）會彈窗詢問用戶，是否受權
用戶贊成受權後，微信再次跳轉頁面，即跳轉到以前傳的你的url地址中，還會把state參數給你帶上，此外，還多了個code參數，即openId
新頁面中，可使用用戶的openId，再加上本身的AppId和AppSecret，調用微信的接口，獲取用戶的access_token
最後再使用用戶的openId和access_token，成功獲取用戶信息

下面是前端獲取微信受權的...html頁面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 頁面描述 -->
  <meta name="description" content=""/>
  <!-- 頁面關鍵詞 -->
  <meta name="keywords" content="" />
  <!-- 搜索引擎抓取 -->
  <meta name="robots" content="index,follow"/>
  <!-- 啓用360瀏覽器的極速模式(webkit) -->
  <meta name="renderer" content="webkit">
  <!-- 避免IE使用兼容模式 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 不讓百度轉碼 -->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓 -->
  <meta name="HandheldFriendly" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <!-- 優先使用 IE 最新版本和 Chrome -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" type="image/x-icon" href="../static/favicon.ico">
  <title>微信</title>
  <style>
    html, body {
      background-color: skyblue;
      font-size: 16px;
      height: 50%;
      width: 100%;
    }
    #index {
      padding: 10px;
    }
    #index .box > div {
      cursor: pointer;
      background-color: #fff;
      display: inline-block;
      padding: 5px;
      margin: 10px;
    }
    #index .box .getUserInfo {
      display: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>
<body>
  <div id="index">
    <div class="box">
      <div class="initOauth2" type="snsapi_base">獲取微信受權(靜默)</div>
      <div class="initOauth2" type="snsapi_userinfo">獲取微信受權(彈框)</div>
      <br>
      <div class="wxSweep">掃一掃</div>
      <br>
      <div class="getUserInfo">獲取用戶信息</div>
    </div>
    <div class="userInfo"></div>
  </div>
</body>
<script>
  let BASE_URL = 'http://wxtestapi.junlli.com'

  // 獲取 url 參數
  const getValue = () => {
    let flag = decodeURI(window.location.search.substr(1));
    if (!flag) return undefined
    let arr = flag.split('&')
    if (arr.length <= 0) return undefined
    let obj = {}
    for (let i = 0; i < arr.length; i++) {
      let tempArr = arr[i].split('=')
      obj[tempArr[0]] = tempArr[1]
    }
    return obj
  }

  let urlParams = getValue()
  let code
  // 判斷是否有code
  if (urlParams && urlParams.code) {
    code = urlParams.code
    $('.getUserInfo').css('display', 'inline-block')
  }

  $('.getUserInfo').on('click', function() {
    if (!code) return alert('請從新獲取受權')
    $.ajax({
      url: BASE_URL + '/getUserInfo',
      type: 'post',
      data: {
        code,
      },
      success: function(data) {
        console.log(data)
        $('.userInfo').html(JSON.stringify(data))
      },
      error: function(error) {
        console.log(error)
        alert('請從新獲取受權')
      }
    })
  })

  // 獲取微信受權
  $('.box .initOauth2').on('click', function() {
    wxInitOauth2($(this).attr('type'))
  })
  // 初始化 微信受權
  wxInitOauth2 = type => {
    let url = window.location.origin + window.location.pathname
    console.log('url', url)
    $.ajax({
      url: BASE_URL + '/getOauth2',
      type: 'post',
      data: {
        url,
        type,
        state: 'abcde'
      },
      success: function(data) {
        // 去跳轉
        window.location.href = data.url
        // console.log(data)
      },
      error: function(error) {
        console.log(error)
      },
    })
  }
</script>
</html>

下面是node後臺代碼

const config = require('./config') // 引入配置文件

// 經過 code 獲取用戶的 openId 和 access_token
const getOpenIdAndAccessToken = code => {
  let params = {
    appid: config.appId,
    secret: config.appSecret,
    code,
    grant_type: 'authorization_code'
  }
  let url = `https://api.weixin.qq.com/sns/oauth2/access_token?${qs.stringify(params)}`
  return new Promise((resolve, reject) => {
    request(url, function (error, res, body) {
      if (res) {
        let bodyObj = JSON.parse(body)
        resolve(bodyObj);
      } else {
        reject(error);
      }
    })
  })
}

// 獲取用戶信息
const getUserInfo = ({ access_token, openid }) => {
  let params = {
    access_token,
    openid,
    lang: 'zh_CN'
  };
  let url = `https://api.weixin.qq.com/sns/userinfo?${qs.stringify(params)}`
  return new Promise((resolve, reject) => {
    request(url, function (err, res, body) {
      if (res) {
        resolve(JSON.parse(body))
      } else {
        reject(err);
      }
    });
  })
}

// 獲取微信受權 --- code
server.post('/getOauth2', (req, res) => {
  try {
    let params = req.body
    let redirect_uri = params.url
    let state = params.state
    let type = params.type
    // 第一步：用戶贊成受權，獲取code
    // type:snsapi_base // 不彈出受權頁面，直接跳轉，只能獲取用戶openid
    // type:snsapi_userinfo // 彈出受權頁面，可經過openid拿到暱稱、性別、所在地
    var scope = type // 彈出受權頁面，拿到code
    let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}${state ? '&state=' + state : ''}#wechat_redirect`
    res.send({ url });
  } catch (error) {
    res.send(error)
  }
})


// 獲取用戶我的信息
server.post('/getUserInfo', (req, res) => {
  try {
    let params = req.body
    let code = params.code
    // 先用 code 換取 openId 和 access_token
    getOpenIdAndAccessToken(code).then(obj => {
      // 用 openId 和 access_token 獲取我的信息
      getUserInfo(obj).then(data => {
        res.send(data)
      }).catch(error => res.send(error))
    }).catch(error => res(error))
  } catch (error) {
    res.send(error)
  }
})

總體功能實現的步驟和具體代碼如上，請酌情參考。