wechat

github
手把手實現微信網頁授權和微信支付，附源代碼（VUE and thinkPHP）

概述

公眾號開發是痛苦的，痛苦在好多問題開發者文檔是沒有提到的，是需要你猜的. 在開發過程中翻了好多的文檔，都是說明其中的一部分問題的，很費時間,所以在此總結大體過程。我們模擬的是一個支付的商城，在實現購買過程中基本是把微信公眾號最主要模塊實現了，其余的功能我們沒有涉及，但應該是觸類旁通的。

我們敘述的過程是按開發流程進行敘述的，不會是按照開發文檔的形式敘述，希望您能結合微信的開發文檔一起閱讀，當然在流程中我們會提醒你閱讀的部分

目錄

• 概述
  • [解決的問題]
  • [前端技術棧]
  • [後端技術棧]
  • [基本說明]
• [開發過程]
  • [0.準備]
  • [1.基本配置]
  • [2.網頁授權]
• JS-SDK
  • [簽名]
  • [簽名後臺]
  • [簽名前臺]
  • [微信支付]

解決的問題

• [x] 微信網頁授權
• [x] 公眾號支付
• [x] 公眾號分享
• [x] 公眾號掃一掃
• [x] 微信後臺獲取webapp(spa-vue)路由，導致 invalid 問題
• [x] 前端history.pushState()導致ios失效問題
• [x] 換取微信openID 順序問題
• [x] 網頁授權後強制登錄官網賬戶，全局進行攔截

前端技術棧

vue2 + vuex + vue-router + webpack + ES6/7 + axios + sass + flex

後端技術棧

thinkPHP3.2 + mysql + 阿裏雲Linux Ubuntu

基本說明

開發環境 macOS 10.13.3 nodejs 8.0.0 centOS 7.4

本文中使用的url是m.example.com (demo), 開發過程中需要替換成你的URL。

如有問題請直接在 Issues 中提，或者您發現問題並有非常好的解決方案，歡迎 PR

本著線上線下一樣的原則，最好申請兩個認證微信公眾號，一個是發布使用，一個是本地開發使用。微信自帶提供的微信測試功能也不太好用

可以添加群交流 544958637

開發過程

0.準備

請閱讀以下微信開發者文檔

首頁

開發者規範

公眾號接口權限說明

全局返回碼說明

附：參數說明

appid：公眾號唯一標識id（公眾號-開發-基本配置中查看）。

secret：公眾號開發密鑰（初次請保存本地，忘記請重置）。

openid: 每個微信用戶關註此公眾號後會生成openid，並且在此公眾號中每個用戶得openid是唯一的。

code ： code作為換取access_token的票據，每次用戶授權帶上的code將不一樣，code只能使用一次，5分鐘未被使用自動過期。

IP 白名單:允許訪問微信服務器的ip（linux 公網ip 註意如果服務器有CDN加速，CDN請添加白名單）

1.基本配置

此部分對應文檔的 入門指引 接入指南

1. 基礎工具

   • 一個已經認證的公眾號（就是你已經交300元）
   • 已經備案的域名
   • 域名解析到服務器 傳送門node項目發布+域名及其二級域名配置+nginx反向代理+pm2
   • 微信開發者工具下載 : 微信開發可定使用這個工具。必須把前端代碼放到》服務器上》用這個工具調試。請仔細閱讀微信web開發者工具 使用指南

2. 設置web開發者工具

   在開發-開發者工具-web開發者工具設置開發者賬號

3. 設置IP 白名單

   在設置-安全中心-IP白名單設置你服務器的IP，通過開發者ID及密碼調用獲取access_token接口時，需要設置訪問來源IP為白名單。

4. 設置基本配置-開發者ID

   設置開發者密碼（AppSecret）

   

   我們獲取到的AppSecret (eg) a66b789009df271cde47aaaaaaa

5. 設置服務器基本配置

   這部的目的是為了和微信服務器建立聯系， 通過微信平臺實現我們的業務邏輯。

詳細版：

![image](//upload-images.jianshu.io/upload_images/2491178-87d4e2f74ea3da4b?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

接入微信公眾平臺開發，開發者需要按照如下步驟完成：

1、填寫服務器配置

2、驗證服務器地址的有效性

3、依據接口文檔實現業務邏輯

下面詳細介紹這3個步驟。

**第一步：填寫服務器配置**

    * 登錄微信公眾平臺官網後，在公眾平臺官網的開發-基本設置頁面，勾選協議成為開發者，點擊“修改配置”按鈕、。

    * 填寫服務器地址（URL）、Token和EncodingAESKey

    * URL是開發者用來接收微信消息和事件的接口URL。

    * Token可由開發者可以任意填寫，用作生成簽名（該Token會和接口URL中包含的Token進行比對，從而驗證安全性）

    * EncodingAESKey由開發者手動填寫或隨機生成，將用作消息體加解密密鑰。

    * 同時，開發者可選擇消息加解密方式：明文模式、兼容模式和安全模式。模式的選擇與服務器配置在提交後都會立即生效

    * 加解密方式的默認狀態為明文模式，選擇兼容模式和安全模式需要提前配置好相關加解密代碼

第二步：驗證消息的確來自微信服務器
?
現在如果你點擊確認 按鈕，肯定會報認證錯誤。因為我們沒有做微信認證請求 接收。 開發者提交信息後，微信服務器將發送GET請求到填寫的服務器地址URL上，GET請求攜帶參數如下表所示：
?

開發者通過檢驗signature對請求進行校驗（下面有校驗方式）。若確認此次GET請求來自微信服務器，請原樣返回echostr參數內容，則接入生效，成為開發者成功，否則接入失敗。加密/校驗流程如下：

1. 將token、timestamp、nonce三個參數進行字典序排序
2. 將三個參數字符串拼接成一個字符串進行sha1加密
3. 開發者獲得加密後的字符串可與signature對比，標識該請求來源於微信

微信官方提供在文檔中提供了PHP原生示例 PHP原生驗證demo

Thinkphp 3.2 驗證示例

<?php
namespace Home\Controller;//命名空間註意用自己的
use Think\Controller; //引入Think Controller

/**
 * Class IndexController
 * @package Home\Controller
 * @name 微信服務器驗證類
 * @author weikai
 */
class IndexController extends Controller {
    //微信服務器接入 
    public function index()
    {
        //這個echostr呢  只有說驗證的時候才會echo  如果是驗證過之後這個echostr是不存在的字段了
        if($_GET[‘echostr‘]){
            $echoStr = $_GET["echostr"];
            if ($this->checkSignature()) {
                ob_clean();//防止之前緩存區數據影響
                echo $echoStr;
                exit; 
            }
        }else{
            $this->responseMsg(); //如果沒有echostr，則返回消息
        }
    }
    //驗證微信開發者模式接入是否成功
    private function checkSignature()
    {
        //signature 是微信傳過來的簽名
        $signature = $_GET["signature"];
        //微信發過來的時間戳
        $timestamp = $_GET["timestamp"];
        //微信傳過來的值隨機字符串
        $nonce     = $_GET["nonce"];
        //定義你在微信公眾號開發者模式裏面定義的token 這裏舉例為weixin
        $token  = "weixin";
        //三個變量 按照字典排序 形成一個數組
        $tmpArr = array(
            $token,
            $timestamp,
            $nonce
        );
        // 字典排序
        sort($tmpArr, SORT_STRING);
        $tmpStr = implode($tmpArr);
        //哈希加密  在laravel裏面是Hash::
        $tmpStr = sha1($tmpStr);
        //哈希加密後的數據 和微信服務器傳過來的簽名比較
        if ($tmpStr == $signature) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * @name 消息接收
     * @author weikai
     */
    public function responseMsg()//執行接收器方法
    {
      //獲取微信服務器的XML數據 轉化為對象 判斷消息類型
        $postStr = $GLOBALS["HTTP_RAW_POST_DATA"];
        if (!empty($postStr)){
            $postObj = simplexml_load_string($postStr, ‘SimpleXMLElement‘, LIBXML_NOCDATA);
            $RX_TYPE = trim($postObj->MsgType);
            switch($RX_TYPE){
                case "event":
                    $result = $this->receiveEvent($postObj);
                    break;
                case "text":
                    $result = $this->handleText($postObj);
                    break;
            }
            echo $result;
        }else{
            echo "";
            exit;
        }
    }

} //classend

註意：示例代碼中 Token 要與微信公眾號基本配置中的Token 一致

微信公眾號基本配置中點擊啟用配置，如果驗證失敗可能是網絡延遲導致，再點擊啟用多試幾次，3次以上不成功，請檢查代碼。

2.網頁授權

如果使用支付功能，必須先授權

大家應該經歷過，我們在公眾號打開頁面，一般都會彈出一個按鈕需要我們點擊同意才會繼續瀏覽頁面

但是我們第二次點擊的時候是不需要點擊授權的，這兩個過程是不同的，是兩種授權：（樣例不可直接使用，是demo）

• 非靜默授權的 URL 樣例：（scope=snsapi_userinfo）

請註意加粗部分

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&**scope=snsapi_userinfo**&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

點擊`允許`即可帶著用戶信息跳轉到第三方頁面，如上圖. 
作用： 是用來獲取用戶的基本信息的

• 靜默授權的 URL 樣例： (scope=snsapi_base)

請註意加粗部分

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&**scope=snsapi_base**&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

在微信 web 開發者工具中打開類似的授權頁 URL 則會`自動跳轉`到第三方頁面。
作用：是用來獲取進入頁面的用戶的openid的

註意：倆者授權區別

非靜默授權:可獲取微信用戶基礎信息如 用戶微信昵稱 、城市、語言、頭像、關註公眾號時間、openid等。

靜默授權：用戶體驗好，用戶不知覺間完成授權，但只可以獲取到用戶得openid。

網頁授權

請通讀微信網頁授權

請註意 關於網頁授權access_token和普通access_token的區別 章節

具體而言，網頁授權流程分為四步：

註意： 步驟一是由前臺完成的，前臺獲取code 之後需要傳給後臺，由後臺完成 2 3 4

1. 引導用戶進入授權頁面同意授權後微信跳轉回調地址並傳遞參數code 獲取code

2. 通過code換取網頁授權access_token（與基礎支持中的access_token不同）

3. 如果需要，開發者可以刷新網頁授權access_token，避免過期

4. 通過網頁授權access_token和openid獲取用戶基本信息（支持UnionID機制）

1、引導用戶進入授權頁面同意授權，獲取code

建議：如果路由由vue管理，建議code由前臺獲取並發送給後臺。 在公眾賬號中配置授權回調域名

（${redirect_url}看下面）

微信授權是前端發起的，

• 時機： 是在你需要獲取微信信息之前的頁面發起請求，當然大部分情況是用戶進入webapp 我們就開始授權，我們的dome中就是進入立馬授權

• 前臺（Vue）： 前臺做引導到授權頁面，使用location.href 就可以實現。授權過程中會有幾次這頁面跳轉。我們把授權函數放在router.beforeEach((to, from, next)=> {}) 函數中，好控制。

• 跳轉： 我們剛才提到前臺需要引導，這個引導路徑是需要後臺提供，基本的形式是location.href = http://m.example.com/Home/WxSignature/getBaseInfos?redirect_url=${redirect_url}。要註意redirect_url=${redirect_url}，${redirect_url} 是告訴後臺回調到前臺的URL(請encodeURIComponent).

• 後臺（PHP）: 前臺調到了後臺，後臺此時需要獲取code了。後臺要通過 特定的URL（見官網第一步：用戶同意授權，獲取code）獲取code.

  api參數解釋：

  • appid : 請查看本文 參數說明

  • redirect_uri : 回調鏈接，完成用戶授權後微信服務器自動回調得uri，一般為業務首頁鏈接（註意請轉義）。

  • response_type ： 固定為code 。

  • scope ： 授權方式 可選靜默（snsapi_base） 或者非靜默（snsapi_userinfo）

  • state ： 此參數可為業務需求使用，根據業務需要傳入。

  • 靜默授權方式獲取code： https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

  • 非靜默授權方式獲取code：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

   /**
     * @name 授權引導後微信會跳轉到回調地址並攜帶code參數
     * @author weikai
     */

public function getBaseInfos(){
    $redirect_url = I(‘get.redirect_url‘);//獲取前臺傳遞的回調地址
    $app_id = C(‘WX_APPID‘);//獲取自己公眾號的 appid
    $redirect_uri = urlencode($redirect_url);//處理url
    $url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=".$app_id."&redirect_uri=".$redirect_uri."&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
    header(‘location:‘.$url);

}

錯誤返回碼說明如下：

• 前臺獲取code

引導用戶到授權頁面後 微信服務器會根據redirect_uri參數跳轉，並且攜帶code參數和值

前臺截取出code 就可以了，傳給後臺，到這裏基本就可以了。但是我們通常是用戶每次登陸都需要進行授權，我們判斷url中的參數就可以實現了。往往我們也要監聽用戶是否登錄，判斷用戶是否需要賬號密碼登錄也需要在 router.beforeEach((to, from, next)=> {}) 實現，beforeEach()有些復雜了，請大家閱讀具體代碼。請結合自己具體的業務書寫

/**
 * 判斷用戶是否需要賬號密碼登錄，login頁面監聽
 * @Author   Hybrid
 * @DateTime 2018-02-28
 */
let checkIsLoginGotologin = function(to, next) {
    // isRelation 判斷用戶微信賬戶是否關聯官網賬戶
    // routeArr 是一些路由是不需要受監聽的
    // !res ? 已經授權 ：沒有授權
  isRelation().then(res => {
    if (routeArr.includes(to.path)) {
      !res ? next(‘index‘) : next();
    } else {
      // 沒有授權且不是授權頁                             // 當在授權的情況下是不允許訪問login頁面
      (res && to.path !== ‘/login‘) ? next(‘/login‘): ((!res && to.path === ‘/login‘) ? next(‘index‘) : next())
    }
  })
}

/**
 * 獲取和推送code
 * @Author   Hybrid
 * @DateTime 2018-02-28
 * @param    {}   url 路徑   
 */
let getCodePullCode = async function(url) {
  let mycode = url.substring(url.indexOf(‘code=‘) + 5, url.indexOf(‘state=‘) - 1);// 前臺截取code
  selfStore.set(‘wechatCodeStr‘, mycode); // 存儲code
  //傳送給後臺code
  await axios
    .get("/home/WxSignature/getCode", {
      params: {
        code: mycode
      }
    })
    .then(res => {
      //需要登錄
      var res = res.data;
      if (res && res.status === 1) {
        selfStore.set(‘openId‘, res.data);//本地存儲Openid，也可以不存儲。由後臺調配

        location.href = `http://m.example.com/?a=1#${location.href.split(‘#‘)[1]}`; // 增加a=1 防止支付錯誤 防止前臺死循環
      }
    });
}

/**
 * 全局路由
 * @Author   Hybrid
 * @DateTime 2018-02-28
 */
if (process.env.NODE_ENV == ‘production‘) {
  router.beforeEach((to, from, next) => {
    let url = location.href;
    // 同時判斷‘a=1‘ 和code= 防止前臺死循環 
    // wechatCode沒有 發起授權
    if ((url.indexOf(‘a=1‘) < 1) && (url.indexOf(‘code=‘) < 1)) {
      let redirect_url = encodeURIComponent(`http://m.example.com#${to.path}`);
      location.href = `http://m.example.com/Home/WxSignature/getBaseInfos?redirect_url=${redirect_url}`;
    } else {
      // 後臺重定向頁面，授權登錄
      (!(url.indexOf(‘code=‘) < 1)) ? getCodePullCode(url): checkIsLoginGotologin(to, next)
    }
  })
}

2、通過code換取網頁授權access_token（與基礎支持中的access_token不同）

appid : 請查看本文 參數說明

secret : 請查看本文 參數說明

code ：獲取到得code。

grant_type ： 固定為authorization_code

獲取code後，請求以下鏈接獲取access_token以及用戶得openid：

 https://api.weixin.qq.com/sns/oauth2/access_token?appid=你的appid&secret=你的sercret&code=剛剛獲取得code&grant_type=authorization_code

  /**
     * 前臺傳遞code,後臺存儲
     * @Author   weikai
     * @DateTime 2017-11-23
     * @return   [type]     [description]
     */
    public function getCode() {
        $code = I(‘get.code‘);//授權用code
        $appid = C(‘WX_APPID‘);//你的公眾號appid
        $secret = C(‘WX_APPSECRET‘);//你的公眾號secret
         // 組合獲取的url
            $url="https://api.weixin.qq.com/sns/oauth2/access_token?                appid=$appid&secret=$secret&code=$code&grant_type=authorization_code";
            // curl獲取access_token 和openid
            $result=$this->curl_get_contents($url);//curl get請求函數請自行百度
            $result=json_decode($result,true);//json轉數組
            $data[‘openid‘]=$result[‘openid‘];
            $data[‘access_token‘] = $result[‘access_token‘];
            $data[‘refresh_token‘] = $result[‘refresh_token‘];
        if($data){
            return $this->ajaxReturn(show(1,‘獲取access_token 和openid‘,$data));//show()方法為自定義封裝消息
        }else{
            return $this->ajaxReturn(show(0,‘沒有access_token 和openid‘)); 
        }
    }

正確時返回的JSON數據包如下：

{ "access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE" }

有些數據是需要存儲到後臺數據庫的如openid

錯誤時微信會返回JSON數據包如下（示例為Code無效錯誤）:

{"errcode":40029,"errmsg":"invalid code"}

其實完成第二步就完成了基本的網頁授權但是還沒有獲取到用戶的信息，授權也沒有實際作用了。

3、刷新access_token（如果需要）

由於獲取用戶信息所用得access_token有效時常比較短，如果想獲取access_token後間隔時間較長獲取微信用戶基本信息請請求刷新access_token api

我這裏沒有采用授權後拉取用戶信息的api，而是采用用戶信息獲取的api。

請求方法

獲取第二步的refresh_token後，請求以下鏈接獲取access_token：
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

  /**
     * 刷新access_token
     * @Author   weikai
     * @refresh_token 用與刷新access_token的參數
     * @DateTime 2017-11-23
     * @return   [type]     [description]
     */
    public function reAccessToken($refresh_token) {
        $appid = C(‘WX_APPID‘);//你的公眾號appid
         // 組合獲取的url
            $url="https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=$appid&grant_type=refresh_token&refresh_token=$refresh_token";
            // curl請求刷新access_token 
            $result=$this->curl_get_contents($url);//curl get請求函數請自行百度
            $result=json_decode($result,true);//json轉數組
            $data[‘access_token‘] = $result[‘access_token‘];
        if($data){
            return $this->ajaxReturn(show(1,‘獲取access_token‘ ,$data));//show()方法為自定義封裝消息
        }else{
            return $this->ajaxReturn(show(0,‘沒有access_token‘)); 
        }
    }

返回說明

正確時返回的JSON數據包如下：

{ "access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE" }

和上步返回的數據相同，目的就是刷新了access_token 的有效時間，有效期內可以使用access_token 和openid獲取微信用戶信息

4、通過網頁授權access_token和openid獲取用戶基本信息

註意：

這裏微信提供了兩個不同的api

1.在微信授權裏微信提供拉取用戶信息的api（access_token時間限制為五分鐘失效）

http：GET

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

參數說明

2.微信用戶管理提供的獲取用戶信息api（只需要使用全局access_token有效期2小時，和openid）

推薦使用這個接口獲取用戶信息

http: GET

https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

參數說明

如果網頁授權參數為snsapi_userinfo（非靜默授權），則此時可以通過access_token和openid獲取用戶信息了。

PHP示例

    /**
     * @return mixed
     * @name 使用全局access_token獲取用戶詳細信息 
     * @author weikai
     */
    public function getWxUserInfo($openid){
        $access_token = $this->getAccess_Token();
        $url = "https://api.weixin.qq.com/cgi-bin/user/info?access_token=".$access_token."&openid=".$openid."&lang=zh_CN";
        $data = $this->cUrl($url);
        $data = json_decode($data);
      if($data){
        return $data;  
      }     
    }

返回說明

正確時返回的JSON數據包如下：

{    "openid":" OPENID",
" nickname": NICKNAME,
"sex":"1",
"province":"PROVINCE"
"city":"CITY",
"country":"COUNTRY",
"headimgurl":    "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
"privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

錯誤時微信會返回JSON數據包如下（示例為openid無效）:

{"errcode":40003,"errmsg":" invalid openid "}

手把手實現微信網頁授權和微信支付，附源代碼（VUE and thinkPHP）