一、事先準備工作
配置參數(shù)測試公眾平臺信息（測試號相關(guān)配置示例）：
1沙廉、打開公眾平臺的測試賬號
2扶叉、配置js接口安全域名
3、掃碼關(guān)注測試公眾號
4荧缘、修改網(wǎng)頁授權(quán)地址
配置授權(quán)回調(diào)的域名皆警，至于什么是OAuth2.0，大家自行百度吧截粗。這里的域名也要與上面的域名一致信姓。配置成功會有通過安全監(jiān)測的提示，這里不上截圖了绸罗。
注意：
1意推、這里填寫的是域名（是一個字符串），而不是URL珊蟀，因此請勿加http://等協(xié)議頭菊值；
2、授權(quán)回調(diào)域名配置規(guī)范為全域名育灸，比如需要網(wǎng)頁授權(quán)的域名為：www.qq.com腻窒，配置以后此域名下面的頁面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以進行OAuth2.0鑒權(quán)描扯。但http://pay.qq.com 定页、 http://music.qq.com 、 http://qq.com 無法進行OAuth2.0鑒權(quán)
以上信息配置正確后绽诚。將參數(shù)傳給后端（redirect_uri 需要 urlEncode 對鏈接進行處理后端更好處理）拼接起來典徊。用返回的地址 window.locahost.href=‘xxxx’。調(diào)整新的地址并攜帶code
二恩够、授權(quán)登錄
1卒落、微信登錄的幾種情況：
PC端：
PC端微信瀏覽器 -> 網(wǎng)頁內(nèi)嵌二維碼方式（需要掃碼，使用微信服務(wù)號的 appid 和 appsecret）
PC端其他瀏覽器 -> 跳轉(zhuǎn)微信的掃碼登錄頁面（需要掃碼蜂桶，使用微信開放平臺注冊的PC應(yīng)用 appid 和 appsecret）
移動端：
微信客戶端打開 -> 直接調(diào)用微信授權(quán)（不掃碼儡毕，使用微信服務(wù)號的 appid 和 appsecret）
其他手機瀏覽器打開 -> 跳轉(zhuǎn)微信的掃碼登錄頁面（需要掃碼，使用微信開放平臺注冊的PC應(yīng)用 appid 和 appsecret）
2扑媚、區(qū)分是否是PC環(huán)境的方法：
2.1腰湾、判斷是PC環(huán)境還是移動環(huán)境是為了相應(yīng)切換應(yīng)用的布局，目前采用css媒體查詢來做判斷：
/* 屏幕寬度小于等于1070像素時識別為移動端（1070像素是使推薦頁常用情報站欄不現(xiàn)實滾動條的最小寬度） */
@media screen and (max-width: 1070px) {
/* 移動端布局css樣式 */
}
/* 屏幕寬度大于1071像素識別為PC端 */
@media screen and (min-width: 1071px) {
/* PC端布局樣式 */
}
2.2疆股、js判斷客戶端是PC端還是移動端訪問
function IsPC(){
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag;
}
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
//alert(navigator.userAgent);
window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
//alert(navigator.userAgent);
window.location.href ="Android.html";
} else {
window.location.href ="pc.html";
};
3费坊、PC網(wǎng)頁微信授權(quán)登錄
3.1、網(wǎng)頁外鏈跳轉(zhuǎn)的方式
1）旬痹、請求后臺的接口附井，會返回一個微信掃碼的界面地址讨越，使用js跳轉(zhuǎn)過去即可
wxlogin () {
User.wxlogins().then(res => {
console.log(res)
window.location.href = res.result.url
})
},
2）、用戶在掃完碼點擊確定授權(quán)后永毅，后臺會拿到微信授權(quán)用戶的信息后把跨，會幫我們跳轉(zhuǎn)到事先給后臺重定向的地址頁面（這里我是新建了一個空白頁用來接收后臺返回的數(shù)據(jù)），在地址后面后臺會拼接一個token沼死，我們拿到這個token着逐，去獲取用戶信息，跳轉(zhuǎn)到首頁漫雕，即可完成登錄
let token = this.$route.query.token
if (token) {
this.getUserInfo().then(ures => {
this.$router.push({
name: 'home'
})
})
}
3.1滨嘱、網(wǎng)頁內(nèi)嵌二維碼方式
1）、配置好下面相關(guān)參數(shù)浸间，即可生成微信授權(quán)登錄/綁定二維碼太雨，（注意：setWxerwma （）此方法需在mounted中調(diào)用）
setWxerwma () {
const s = document.createElement('script')
s.type = 'text/javascript'
s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
const wxElement = document.body.appendChild(s)
wxElement.onload = function () {
var obj = new WxLogin({
id: '', // 需要顯示的容器id
appid: '', // 公眾號appid wx*******
scope: 'snsapi_login', // 網(wǎng)頁默認即可
redirect_uri: encodeURIComponent(''), // 授權(quán)成功后回調(diào)的url
state: Math.ceil(Math.random() * 1000), // 可設(shè)置為簡單的隨機數(shù)加session用來校驗
style: 'black', // 提供"black"、"white"可選魁蒜。二維碼的樣式
href: '' // 外部css文件url囊扳，需要https
})
}
},
2）、后面的邏輯根據(jù)后臺返回的數(shù)據(jù)來處理即可兜看，同方法一步驟二類似
或者也可以用下面步驟：
1）锥咸、在頁面中先引入如下JS文件（支持https）：
http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
2）、在需要使用微信登錄的地方實例以下JS對象：
var obj = new WxLogin({
self_redirect:true,
id:"login_container",
appid: "",
scope: "",
redirect_uri: "",
state: "",
style: "",
href: ""
});
參數(shù)說明：
redirect_uri 為回調(diào)鏈接细移，由后端提供給前端
引入遠程js的方法：
mounted () {
const wxJs = document.createElement('script')
wxJs.type = 'text/javascript'
wxJs.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
document.body.appendChild(wxJs)
},
beforeRouteLeave (to, from, next) {
document.body.removeChild(wxJs)
next()
}
tips：用戶掃碼授權(quán)后搏予，進入回調(diào)頁面，由后端完成與微信開放平臺間的數(shù)據(jù)請求后弧轧，重定向回到前端頁面鏈接雪侥，鏈接后面帶上參數(shù)，然后前端截取鏈接后面的參數(shù)精绎，請求后端接口速缨，進行登錄操作，例子如下：
beforeRouteEnter (to, from, next) {
next(vm => {
if (JSON.stringify(vm.$route.query) === '{}') {
console.log('沒有參數(shù)')
} else {
// 使用this.$route.query截取鏈接后面的參數(shù)代乃，請求后端接口
vm.pWxLogin()
}
})
},
4旬牲、移動端微信授權(quán)登錄
靜默授權(quán)的意思是用戶無感知的獲取用戶信息，不需要用戶有任何的操作動作搁吓，注意靜默授權(quán)只能獲取到用戶的openId原茅。并不能獲取到用戶的其他信息。
非靜默授權(quán)的意思是需要用戶去操作堕仔，點擊同意按鈕擂橘，也就是說，如果產(chǎn)品要求是非靜默授權(quán)贮预，那么前端會彈起用戶授權(quán)的按鈕贝室，待用戶同意之后，就可以獲取到用戶的openId,個人信息仿吞，關(guān)注信息等相關(guān)內(nèi)容滑频。
注：靜默授權(quán)和非靜默授權(quán)的區(qū)別在于調(diào)用的接口的 scope 字段是 snsapi_base 還是 snsapi_userinfo
4.1、創(chuàng)建一個按鈕唤冈，點擊觸發(fā)事件,跳轉(zhuǎn)到微信授權(quán)頁面
wxlogin () {
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
}
//this.appid 公眾號APPID this.url 用戶點擊授權(quán)后峡迷，會跳轉(zhuǎn)到后臺幫我們重定向的頁面（這里我是新建了一個空白頁，專門接收code）
其中：
appid：是應(yīng)用的appid
redirect_uri：是指回調(diào)的url
response_type：只寫code
scope：表示授權(quán)的作用域你虹，多個可以用逗號隔開绘搞，snsapi_base表示靜默授權(quán)，snsapi_userinfo表示非靜默授權(quán)
state：用于保持請求和回調(diào)的狀態(tài)傅物，授權(quán)請求后原樣帶回給第三方夯辖。該參數(shù)可用于防止csrf攻擊（跨站請求偽造攻擊），建議第三方帶上該參數(shù)董饰，可設(shè)置為簡單的隨機數(shù)加session進行校驗
4.2蒿褂、頁面會自動跳轉(zhuǎn)到類似以下地址，在重定向的頁面拿到給我們返回的 code卒暂，會拼接在URL后面
https://www.test.com/?code=021MZkll2DUtR63EuUnl21BZPv0MZklE&state=STATE
注意：如果用戶同意授權(quán)啄栓，頁面將跳轉(zhuǎn)至 redirect_uri/?code=CODE&state=STATE。若用戶禁止授權(quán)也祠，則重定向后不會帶上code參數(shù)昙楚，僅會帶上state參數(shù)redirect_uri?state=STATE
4.3、通過code換取網(wǎng)頁授權(quán)access_token
在業(yè)務(wù)代碼中诈嘿，用JS獲取code參數(shù)堪旧，然后訪問以下地址：
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
其中：
appid：應(yīng)用的 Appid,
secret: 應(yīng)用密鑰 AppSecret,
code：上一步中獲取到的code
grant_type：值為authorization_code
成功后的返回數(shù)據(jù)如下：（主要是拿access_token和openid字段）
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
4.4、用access_token 和openid獲取用戶信息
用access_token和openid字段訪問以下地址：
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
其中：
access_token：上一步的access_token
openid:上一步的openid
返回值如下：
{
"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數(shù)據(jù)包如下（示例為openid無效）:
{"errcode":40003,"errmsg":" invalid openid "}
用戶管理類接口中的“獲取用戶基本信息接口”永淌，是在用戶和公眾號產(chǎn)生消息交互或關(guān)注后事件推送后崎场，才能根據(jù)用戶OpenID來獲取用戶基本信息。這個接口遂蛀，包括其他微信接口谭跨，都是需要該用戶（即openid）關(guān)注了公眾號后，才能調(diào)用成功的李滴。
網(wǎng)頁授權(quán)獲取用戶基本信息也遵循UnionID機制螃宙。即如果開發(fā)者有在多個公眾號，或在公眾號所坯、移動應(yīng)用之間統(tǒng)一用戶帳號的需求谆扎，需要前往微信開放平臺（open.weixin.qq.com）綁定公眾號后，才可利用UnionID機制來滿足上述需求芹助。
UnionID機制的作用說明：如果開發(fā)者擁有多個移動應(yīng)用堂湖、網(wǎng)站應(yīng)用和公眾帳號闲先，可通過獲取用戶基本信息中的unionid來區(qū)分用戶的唯一性，因為同一用戶无蜂，對同一個微信開放平臺下的不同應(yīng)用（移動應(yīng)用伺糠、網(wǎng)站應(yīng)用和公眾帳號），unionid是相同的斥季。
尤其注意：由于公眾號的secret和獲取到的access_token安全級別都非常高训桶，必須只保存在服務(wù)器，不允許傳給客戶端酣倾。后續(xù)刷新access_token舵揭、通過access_token獲取用戶信息等步驟，也必須從服務(wù)器發(fā)起躁锡。
