摘要：本篇主要講述，如何在微信中打開自家頁面后，彈窗請求用戶授權，以便拿到用戶的微信信息。填寫信息，綁定微信，注冊完成，登錄進去。

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

基礎硬件服務：

需要一個公網可以訪問的有效域名：

購買域名，并備案，我是在阿里云購買的，備案需要十幾個工作日。

購買ip，然后設置上面的域名，解析到該ip，這個時間可以快到忽略。

擁有自己的服務器，來存放自己頁面項目：

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

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

阿里云ECS：https://cn.aliyun.com/product/ecs

微信公眾平臺，開發者認證

打開微信公眾平臺 https://mp.weixin.qq.com/，使用郵箱注冊，注意，一個郵箱只能注冊一個微信公眾平臺賬號，一個賬號只能選擇一種賬號分類且不能更改，這里一定要慎重，這里選擇訂閱號。

可選個人類型、企業類型等等，其中，個人類型是不沒有分享定制功能的，但企業類型我又不符合。。。最終我還是選擇的個人類型，因為即使我的賬號沒有權限，但微信公眾號里面，提供一個功能全開的測試賬號，使用測試賬號可以進行學習和測試，還是沒問題的。

填寫信息，綁定微信，注冊完成，登錄進去。

為了進行開發，需要在這里和你的后臺項目和前端項目進行對應的配置，讓微信確認后臺項目和前臺項目都是你的之后，才會提供服務。

有關服務器端和后臺項目的配置：

首先需要說明，由于訂閱號的功能比較少，如果只是進行學習，建議在 開發 => 開發者工具中選擇使用公眾平臺測試帳號進行學習性開發，這樣可以使用全功能的微信服務，配置也比較少。  
下面的配置步驟均是使用自己的賬號需要進行的配置

開發 => 基本配置 => 公眾號開發信息，在這里記下開發者ID(AppID)，接著開通服務，記下開發者密碼(AppSecret)，開發中會需要輸入。

設置IP白名單，這里寫的是自己的服務器IP地址，因為功能上線后，需要使用這臺服務器，通過開發者ID和密碼來向微信服務區獲取自己服務的access_token

進行下面的后臺項目，目的是讓微信確定這個后臺項目是你的，檢驗方法是微信發起一個get請求，你返回正確的返回值，啟用此配置時調用：

url：接口地址，比如http://wx.my.com/forWx

Token：完全自定義的一個字符串，相當于個暗號，你的返回值需要這個字符串參與拼裝。

EncodingAESKey：隨機生成即可

消息加解密方式：自選，這里我使用的是明文模式

有關前端項目的配置：

設置 => 公眾號設置 => 功能設置 => 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頁面

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


  

    

      
獲取微信授權(靜默)
      
獲取微信授權(彈框)
      

      
掃一掃
      

      
獲取用戶信息
    
    

  

下面是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)
  }
})

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