原文地址:http://www.tuicool.com/articles/YbMJjqE
準備工作
網(wǎng)站應用微信登錄是基于OAuth2.0協(xié)議標準構建的微信OAuth2.0授權登錄系統(tǒng)丽已。
在進行微信OAuth2.在進行微信OAuth2.0授權登錄接入之前只搁,在微信開放平臺注冊開發(fā)者帳號,并擁有一個已審核通過的網(wǎng)站應用,并獲得相應的AppID和AppSecret斩芭,申請微信登錄且通過審核后,可開始接入流程蹦玫。
授權流程說明
微信OAuth2.0授權登錄讓微信用戶使用微信身份安全登錄第三方應用或網(wǎng)站烟馅,在微信用戶授權登錄已接入微信OAuth2.0的第三方應用后,第三方可以獲取到用戶的接口調用憑證(access_token)康辑,通過access_token可以進行微信開放平臺授權關系接口調用摄欲,從而可實現(xiàn)獲取微信用戶基本開放信息和幫助用戶實現(xiàn)基礎開放功能等。
微信OAuth2.0授權登錄目前支持authorization_code模式疮薇,適用于擁有server端的應用授權胸墙。該模式整體流程為:
1. 第三方發(fā)起微信授權登錄請求,微信用戶允許授權第三方應用后按咒,微信會拉起應用或重定向到第三方網(wǎng)站迟隅,并且?guī)鲜跈嗯R時票據(jù)code參數(shù);
2. 通過code參數(shù)加上AppID和AppSecret等,通過API換取access_token智袭;
3. 通過access_token進行接口調用奔缠,獲取用戶基本數(shù)據(jù)資源或幫助用戶實現(xiàn)基本操作。
獲取access_token時序圖:
12168b9 1
第一步:請求CODE
第三方使用網(wǎng)站應用授權登錄前請注意已獲取相應網(wǎng)頁授權作用域(scope=snsapi_login)吼野,則可以通過在PC端打開以下鏈接:
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“該鏈接無法訪問”添坊,請檢查參數(shù)是否填寫錯誤,如redirect_uri的域名與審核時填寫的授權域名不一致或scope不為snsapi_login箫锤。
csss 2
返回說明
用戶允許授權后贬蛙,將會重定向到redirect_uri的網(wǎng)址上,并且?guī)蟘ode和state參數(shù)
redirect_uri?code=CODE&state=STATE
若用戶禁止授權谚攒,則重定向后不會帶上code參數(shù)阳准,僅會帶上state參數(shù)
redirect_uri?state=STATE
請求示例
登錄一號店網(wǎng)站應用
https://passport.yhd.com/wechat/login.do
打開后,一號店會生成state參數(shù)馏臭,跳轉到
https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect
微信用戶使用微信掃描二維碼并且確認登錄后野蝇,PC端會跳轉到
https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e
為了滿足網(wǎng)站更定制化的需求,我們還提供了第二種獲取code的方式括儒,支持網(wǎng)站將微信登錄二維碼內(nèi)嵌到自己頁面中绕沈,用戶使用微信掃碼授權后通過JS將code返回給網(wǎng)站。
JS微信登錄主要用途:網(wǎng)站希望用戶在網(wǎng)站內(nèi)就能完成登錄帮寻,無需跳轉到微信域下登錄后再返回乍狐,提升微信登錄的流暢性與成功率。 網(wǎng)站內(nèi)嵌二維碼微信登錄JS實現(xiàn)辦法:
步驟1:在頁面中先引入如下JS文件(支持https):
步驟2:在需要使用微信登錄的地方實例以下JS對象:
var obj = new WxLogin({
id:"login_container",
appid: "",
scope: "",
redirect_uri: "",
state: "",
style: "",
href: ""
});
cs555 3
第二步:通過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
cs558 4
返回說明
正確的返回:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
cs485 5
錯誤返回樣例:
{"errcode":40029,"errmsg":"invalid code"}
刷新access_token有效期
access_token是調用授權關系接口的調用憑證固逗,由于access_token有效期(目前為2個小時)較短浅蚪,當access_token超時后,可以使用refresh_token進行刷新烫罩,access_token刷新結果有兩種:
1. 若access_token已超時惜傲,那么進行refresh_token會獲取一個新的access_token,新的超時時間贝攒;
2. 若access_token未超時盗誊,那么進行refresh_token不會改變access_token,但超時時間會刷新隘弊,相當于續(xù)期access_token哈踱。
refresh_token擁有較長的有效期(30天),當refresh_token失效的后长捧,需要用戶重新授權嚣鄙。
請求方法
獲取第一步的code后,請求以下鏈接進行refresh_token:
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN 18556 6
返回說明
正確的返回:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
1829 7
錯誤返回樣例:
{"errcode":40030,"errmsg":"invalid refresh_token"}
第三步:通過access_token調用接口
獲取access_token后串结,進行接口調用,有以下前提:
1. access_token有效且未超時;
2. 微信用戶已授權給第三方應用帳號相應接口作用域(scope)肌割。
對于接口作用域(scope)卧蜓,能調用的接口有以下:
561615 8
其中snsapi_base屬于基礎接口,若應用已擁有其它scope權限把敞,則默認擁有snsapi_base的權限弥奸。使用snsapi_base可以讓移動端網(wǎng)頁授權繞過跳轉授權登錄頁請求用戶授權的動作,直接跳轉第三方網(wǎng)頁帶上授權臨時票據(jù)(code)奋早,但會使得用戶已授權作用域(scope)僅為snsapi_base盛霎,從而導致無法獲取到需要用戶授權才允許獲得的數(shù)據(jù)和基礎功能。
接口調用方法可查閱《微信授權關系接口調用指南》
F.A.Q
1. 什么是授權臨時票據(jù)(code)耽装?
答:第三方通過code進行獲取access_token的時候需要用到愤炸,code的超時時間為10分鐘,一個code只能成功換取一次access_token即失效掉奄。code的臨時性和一次保障了微信授權登錄的安全性规个。第三方可通過使用https和state參數(shù),進一步加強自身授權登錄的安全性姓建。
2. 什么是授權作用域(scope)诞仓?
答:授權作用域(scope)代表用戶授權給第三方的接口權限,第三方應用需要向微信開放平臺申請使用相應scope的權限后速兔,使用文檔所述方式讓用戶進行授權墅拭,經(jīng)過用戶授權,獲取到相應access_token后方可對接口進行調用涣狗。
3. 網(wǎng)站內(nèi)嵌二維碼微信登錄JS代碼中style字段作用艰额?
答:第三方頁面顏色風格可能為淺色調或者深色調,若第三方頁面為淺色背景饼齿,style字段應提供”black”值(或者不提供锈死,black為默認值),則對應的微信登錄文字樣式為黑色掸宛。相關效果如下:
112112124 9
若提供”white”值死陆,則對應的文字描述將顯示為白色,適合深色背景唧瘾。相關效果如下:
112216 10
4.網(wǎng)站內(nèi)嵌二維碼微信登錄JS代碼中href字段作用措译?
答:如果第三方覺得微信團隊提供的默認樣式與自己的頁面樣式不匹配,可以自己提供樣式文件來覆蓋默認樣式饰序。舉個例子领虹,如第三方覺得默認二維碼過大,可以提供相關css樣式文件求豫,并把鏈接地址填入href字段
.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display:none}
.impowerBox .status {text-align: center;}
相關效果如下:
2112314 11