網頁分享鏈接和網頁授權獲取用戶的信息

最近做一個新項目接觸到和微信網頁授權有關的兩方面的內容：

1. 分享鏈接， 自定義標題、描述、分享圖片。

2. 網頁授權獲取用戶的信息。

 

第一個接口已經完成了，是直接調用其他人寫好的現成的接口，而我們服務端只是做了一個透傳，數據給到前端，其實目的就達到了。但是，調用的過程中會有很多疑問，比如接口是如何封裝的？封裝了哪些信息？access_token的刷新機制是什么？對我們來說是一個黑箱。后面還遇到了其他的問題，比如網頁授權接口我們是要自己寫還是依然調用理科的接口？他和之前分享鏈接的接口有沒有聯系？要解決這些疑問，還是要研究這兩個功能到底是如何實現的。下面是根據開發過程整理出文檔，記錄下來，后續還有類似功能開發，可以借鑒。

 

1. 分享鏈接， 自定義標題、描述、分享圖片。

 

文檔地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

簡單介紹：微信JS-SDK是微信公眾平台面向網頁開發者提供的基於微信內的網頁開發工具包。他提供了很多功能，我們這里使用的是分享功能，分享到微信，朋友圈。

概念：

a. access_token：access_token是公眾號的全局唯一接口調用憑據, 公眾號調用各接口時都需使用access_token。access_token的有效期目前為2個小時，需定時刷新，重復獲取將導致上次獲取的access_token失效。生成新token后，新舊access_token在5分鍾內都有效。

 

b. jsapi_ticket: jsapi_ticket是公眾號用於調用微信JS接口的臨時票據, 通常有效期為7200秒，通過access_token來獲取。

 

注意： 由於獲取access_token和jsapi_ticket的api調用次數非常有限，頻繁刷新jsapi_ticket會導致api調用受限，影響業務，所以必須在服務全局緩存 。

 

開發步驟：

a. 獲取access_token: access_token是公眾號的全局唯一接口調用憑證，所以，保存到一個全局的位置。各應用程序使用的時候從全局獲取即可。更新和刷新都是有全局統一操作。

https請求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
grant_type是獲取access_token填寫client_credential

返回結果：

{"access_token":"ACCESS_TOKEN","expires_in":7200}

 

b.獲取jsapi_ticket：jsapi_ticket是公眾號用於調用微信JS接口的臨時票據。有效期為7200秒。調用接口：

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功返回如下JSON：

{
  "errcode":0,
  "errmsg":"ok",
  "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
  "expires_in":7200
}

 

c. 獲取簽名

參與簽名的參數有： 隨機字符串noncestr， 時間戳timestamp， jsapi_ticket，業務url。

第一步：對所有待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

第二步：對string1進行sha1簽名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

第三步：返回簽名信息

{
  appId: '', 
  timestamp: ,
  nonceStr: '', 
  signature: '',
}

注意： 返回的參數中nonceStr和timestamp是第一步參與簽名的nonceStr和timestamp

 

以上操作都是在服務端完成。下面的操作是在客戶端完成

 

第四步：在分享頁面引入微信js文件（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

第五步：通過config接口注入權限驗證配置

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

備注： 這里的appId，timestamp，nonceStr，signature就是在第三步返回的值。

 

第六步：通過ready接口處理成功驗證

wx.ready(function(){
      // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});

第七步：通過error接口處理失敗驗證

wx.error(function(res){
      // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
});

 

第八步：判斷當前客戶端版本是否支持指定JS接口

wx.checkJsApi({
  jsApiList: ['chooseImage'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
  success: function(res) {
  // 以鍵值對的形式返回，可用的api值true，不可用為false
  // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
  }
});

 

第九步：分享給朋友

wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
  wx.updateAppMessageShareData({ 
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
    imgUrl: '', // 分享圖標
    success: function () {
      // 設置成功
    }
  })
}); 

 

第十步：分享到朋友圈

wx.ready(function () {      //需在用戶可能點擊分享按鈕前就先調用
  wx.updateTimelineShareData({ 
    title: '', // 分享標題
    link: '', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
    imgUrl: '', // 分享圖標
    success: function () {
      // 設置成功
    }
  })
});

在這里就實現了分享鏈接自定義標題，和圖片。如果不操作這個，會怎么樣呢？分享出去就是一個url的地址。這種方式可以有更好地用戶體驗， 也更好的吸引用戶的眼球。

 

 

 

2. 網頁授權獲取用戶的信息。

 

文檔地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#3

功能介紹：如果用戶在微信客戶端中訪問第三方網頁，公眾號可以通過微信網頁授權機制，來獲取用戶基本信息，進而實現業務邏輯。

 

概念說明：

1）code: 用戶同意授權后微信返回的code，這個code是獲取網頁授權access_token的票據。

2） access_token：這里的access_token是網頁授權access_token, 與基礎的access_token是不同的。

 

網頁授權的方式：

網頁授權的方式有兩種：一種是靜默授權，另一種是顯示授權

1） 靜默授權： scope值設置為snsapi_base， 只獲取用戶的openid， 對用戶無感知。

2） 顯示授權： scope值設置為snsapi_userinfo, 可以獲取用戶openid，以及用戶的基本信息， 需要用戶手動同意。

 

網頁授權流程

備注： 本次我們使用的是靜默授權，這里寫出靜默授權的試下步驟。

 

第一步：用戶同意授權，獲取code

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“該鏈接無法訪問”，請檢查參數是否填寫錯誤，是否擁有scope參數對應的授權作用域權限。

第二步：通過code換取網頁授權access_token

獲取code后，請求以下鏈接獲取access_token：  https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

請求成功，返回數據如下：

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

如果網頁授權的作用域為snsapi_base，則本步驟中獲取到網頁授權access_token的同時，也獲取到了openid。snsapi_base式的網頁授權流程即到此為止。

 

我們本次需求調用的就是靜默授權，所以執行到這里就可以了。

 

 

總結： 現在看，我們都只是調用已經寫好的接口，做了一個透傳， 但並不知道接口是如何實現的。這樣一梳理，就知道了整個流程，后面在對接的時候也就清晰明確了。