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

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

基礎(chǔ)硬件服務(wù)：

需要一個(gè)公網(wǎng)可以訪問的有效域名：

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

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

擁有自己的服務(wù)器，來存放自己頁面項(xiàng)目：

我還是在阿里云購買購買服務(wù)器，這個(gè)花費(fèi)最大，幾百元一年的使用權(quán)。  
而且這個(gè)服務(wù)器，本質(zhì)就是一臺電腦，是電腦就有配置，我目前只是自己學(xué)習(xí)使用，配置幾乎是最低的，而且購買的套餐自帶公網(wǎng)ip，這么一來我連上面購買ip的錢也省了。

綜上所述，最終我只購買了域名和一個(gè)套餐自帶公網(wǎng)ip的服務(wù)器，服務(wù)器用來放置前端項(xiàng)目和后臺項(xiàng)目。

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

微信公眾平臺，開發(fā)者認(rèn)證

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

可選個(gè)人類型、企業(yè)類型等等，其中，個(gè)人類型是不沒有分享定制功能的，但企業(yè)類型我又不符合。。。最終我還是選擇的個(gè)人類型，因?yàn)榧词刮业馁~號沒有權(quán)限，但微信公眾號里面，提供一個(gè)功能全開的測試賬號，使用測試賬號可以進(jìn)行學(xué)習(xí)和測試，還是沒問題的。

填寫信息，綁定微信，注冊完成，登錄進(jìn)去。

為了進(jìn)行開發(fā)，需要在這里和你的后臺項(xiàng)目和前端項(xiàng)目進(jìn)行對應(yīng)的配置，讓微信確認(rèn)后臺項(xiàng)目和前臺項(xiàng)目都是你的之后，才會提供服務(wù)。

有關(guān)服務(wù)器端和后臺項(xiàng)目的配置：

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

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

設(shè)置IP白名單，這里寫的是自己的服務(wù)器IP地址，因?yàn)楣δ苌暇€后，需要使用這臺服務(wù)器，通過開發(fā)者ID和密碼來向微信服務(wù)區(qū)獲取自己服務(wù)的access_token

進(jìn)行下面的后臺項(xiàng)目，目的是讓微信確定這個(gè)后臺項(xiàng)目是你的，檢驗(yàn)方法是微信發(fā)起一個(gè)get請求，你返回正確的返回值，啟用此配置時(shí)調(diào)用：

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

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

EncodingAESKey：隨機(jī)生成即可

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

有關(guān)前端項(xiàng)目的配置：

設(shè)置 => 公眾號設(shè)置 => 功能設(shè)置 => JS接口安全域名在此處添加你的要使用微信sdk功能的網(wǎng)站的域名，比如wx.qq.com或者wx.qq.com/user，最多可寫三個(gè)，且需要驗(yàn)證。

> 驗(yàn)證的方式，就是將一個(gè)微信提供的txt文件，放在此域名對應(yīng)的放置于服務(wù)器中的web項(xiàng)目的訪問根目錄中，需要和主文件（大部分默認(rèn)為```index.html```）放在同一級，當(dāng)提交的時(shí)候，微信會進(jìn)行訪問，來獲取文件，確認(rèn)此域名是你的。

配置完成后，就可以進(jìn)行開發(fā)了。

下面進(jìn)入代碼階段。

首先，上面證明服務(wù)是自己的部分，我們需要實(shí)現(xiàn)一個(gè)接口，我用http://wx.my.com/forWx打的比方，那么為了啟用配置，我需要實(shí)現(xiàn)/forWx給微信調(diào)用，下面是代碼：

node的基礎(chǔ)環(huán)境搭建省略，這里只寫接口內(nèi)部方法了，關(guān)鍵是參數(shù)加密拼裝

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

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

  // 3.將三個(gè)參數(shù)字符串拼接成一個(gè)字符串進(jìn)行sha1加密
  let tempStr = array.join("")
  const hashCode = crypto.createHash("sha1") //創(chuàng)建加密類型 
  let resultCode = hashCode.update(tempStr, "utf8").digest("hex")
  
  //4.開發(fā)者獲得加密后的字符串可與signature對比，標(biāo)識該請求來源于微信
  if (resultCode === signature) {
    res.send(echostr)
  } else {
    res.send("mismatch")
  }
})

完成，上面是證明服務(wù)器是我的，后面還需要證明前端項(xiàng)目是我的，這個(gè)就跳過了，因?yàn)樘唵?，直接下載那個(gè)文件，放到自己服務(wù)器中，前端項(xiàng)目的index.html同級即可

上面的操作，是只要想進(jìn)行微信公頁面開發(fā)，必須要有的步驟，一切的基礎(chǔ)。

首先順著功能使用流程，順一下實(shí)現(xiàn)此功能的方法：

用戶在微信打開頁面后，立即或者通過方法觸發(fā)ajax，把當(dāng)前url和一些state（自定義的數(shù)據(jù)，因?yàn)閺棿罢埱笥脩羰跈?quán)，是需要跳轉(zhuǎn)頁面的，這個(gè)state就是會幫你帶到下個(gè)頁面鏈接中的數(shù)據(jù)）作為請求參數(shù)，請求自己的后臺接口。

后臺請求微信服務(wù)器，把以下作為參數(shù)，拼裝到某個(gè)固定的微信指定的url后，返回給前端，參數(shù)為：

appId：自己的AppId

redirect_uri：前端給的url

scope：授權(quán)方式，是靜默授權(quán)（只能獲取用戶openId）還是彈窗授權(quán)（能獲取用戶微信個(gè)人信息）

state：要帶到新頁面的參數(shù)

前端拿到后端拼好的這個(gè)url，直接window.location.href暴力跳轉(zhuǎn)

如果靜默授權(quán)，則直接用戶無感，如果是彈窗授權(quán)，則新頁面（微信方提供的頁面）會彈窗詢問用戶，是否授權(quán)

用戶同意授權(quán)后，微信再次跳轉(zhuǎn)頁面，即跳轉(zhuǎn)到之前傳的你的url地址中，還會把state參數(shù)給你帶上，此外，還多了個(gè)code參數(shù)，即openId

新頁面中，可以使用用戶的openId，再加上自己的AppId和AppSecret，調(diào)用微信的接口，獲取用戶的access_token

最后再使用用戶的openId和access_token，成功獲取用戶信息

下面是前端獲取微信授權(quán)的...html頁面

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


  

    

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

      
掃一掃
      

      
獲取用戶信息
    
    

  

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

// 獲取微信授權(quán) --- code
server.post("/getOauth2", (req, res) => {
  try {
    let params = req.body
    let redirect_uri = params.url
    let state = params.state
    let type = params.type
    // 第一步：用戶同意授權(quán)，獲取code
    // type:snsapi_base // 不彈出授權(quán)頁面，直接跳轉(zhuǎn)，只能獲取用戶openid
    // type:snsapi_userinfo // 彈出授權(quán)頁面，可通過openid拿到昵稱、性別、所在地
    var scope = type // 彈出授權(quán)頁面，拿到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)
  }
})


// 獲取用戶個(gè)人信息
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 獲取個(gè)人信息
      getUserInfo(obj).then(data => {
        res.send(data)
      }).catch(error => res.send(error))
    }).catch(error => res(error))
  } catch (error) {
    res.send(error)
  }
})

整體功能實(shí)現(xiàn)的步驟和具體代碼如上，請酌情參考。