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

專業(yè)領域包括成都網(wǎng)站建設、做網(wǎng)站、成都商城網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)， 與其他網(wǎng)站設計及系統(tǒng)開發(fā)公司不同，創(chuàng)新互聯(lián)公司的整合解決方案結(jié)合了幫做網(wǎng)絡品牌建設經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

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

基礎硬件服務：

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

• 購買域名，并備案，我是在阿里云購買的，備案需要十幾個工作日。
• 購買ip，然后設置上面的域名，解析到該ip，這個時間可以快到忽略。

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

我還是在阿里云購買購買服務器，這個花費最大，幾百元一年的使用權。
而且這個服務器，本質(zhì)就是一臺電腦，是電腦就有配置，我目前只是自己學習使用，配置幾乎是最低的，而且購買的套餐自帶公網(wǎng)ip，這么一來我連上面購買ip的錢也省了。
綜上所述，最終我只購買了域名和一個套餐自帶公網(wǎng)ip的服務器，服務器用來放置前端項目和后臺項目。

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

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

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

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

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

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

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

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

1. 開發(fā) => 基本配置 => 公眾號開發(fā)信息，在這里記下開發(fā)者ID(AppID)，接著開通服務，記下開發(fā)者密碼(AppSecret)，開發(fā)中會需要輸入。
2. 設置IP白名單，這里寫的是自己的服務器IP地址，因為功能上線后，需要使用這臺服務器，通過開發(fā)者ID和密碼來向微信服務區(qū)獲取自己服務的access_token
3. 進行下面的后臺項目，目的是讓微信確定這個后臺項目是你的，檢驗方法是微信發(fā)起一個get請求，你返回正確的返回值，啟用此配置時調(diào)用：
   1. url：接口地址，比如http://wx.my.com/forWx
   2. Token：完全自定義的一個字符串，相當于個暗號，你的返回值需要這個字符串參與拼裝。
   3. EncodingAESKey：隨機生成即可
   4. 消息加解密方式：自選，這里我使用的是明文模式

有關前端項目的配置：

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

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

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

下面進入代碼階段。

證明后臺項目和前端項目時我自己的

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

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

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

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

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

完成，上面是證明服務器是我的，后面還需要證明前端項目是我的，這個就跳過了，因為太簡單，直接下載那個文件，放到自己服務器中，前端項目的index.html同級即可

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

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

用戶在微信打開頁面后，立即或者通過方法觸發(fā)ajax，把當前url和一些state（自定義的數(shù)據(jù)，因為彈窗請求用戶授權，是需要跳轉(zhuǎn)頁面的，這個state就是會幫你帶到下個頁面鏈接中的數(shù)據(jù)）作為請求參數(shù)，請求自己的后臺接口。
后臺請求微信服務器，把以下作為參數(shù)，拼裝到某個固定的微信指定的url后，返回給前端，參數(shù)為：

• appId：自己的AppId
• redirect_uri：前端給的url
• scope：授權方式，是靜默授權（只能獲取用戶openId）還是彈窗授權（能獲取用戶微信個人信息）
• state：要帶到新頁面的參數(shù)

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

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

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

新頁面中，可以使用用戶的openId，再加上自己的AppId和AppSecret，調(diào)用微信的接口，獲取用戶的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/oauth3/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('/getOauth3', (req, res) => {
 try {
 let params = req.body
 let redirect_uri = params.url
 let state = params.state
 let type = params.type
 // 第一步：用戶同意授權，獲取code
 // type:snsapi_base // 不彈出授權頁面，直接跳轉(zhuǎn)，只能獲取用戶openid
 // type:snsapi_userinfo // 彈出授權頁面，可通過openid拿到昵稱、性別、所在地
 var scope = type // 彈出授權頁面，拿到code
 let url = `https://open.weixin.qq.com/connect/oauth3/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)
 }
})

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。