


WeChat open platform development - web WeChat scan code login (OAuth2.0)
Feb 14, 2017 pm 01:21 PM1, OAuth2.0
OAuth (Open Authorization) is an open standard that allows users to let third-party applications access the user’s private resources (such as photos, videos, contacts) stored on a website. list of people) without providing usernames and passwords to third-party applications.
Allow users to provide a token instead of a username and password to access their data stored with a specific service provider. Each token authorizes a specific website (for example, a video editing website) to access a specific resource (for example, just the videos in a certain album) within a specific period of time (for example, within the next 2 hours). In this way, OAuth allows users to authorize third-party websites to access their information stored on another service provider without sharing their access permissions or the entire contents of their data.
2. Goal
Here we mainly simulate the process of using OAuth2.0. The user obtains the user's basic information by scanning the QR code of our web application and authorizing login. Detailed interface related information can be viewed on the WeChat open platform: https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN
3, Preliminary preparation (obtaining WeChat developer permissions)
We are mainly talking about website (Web) applications. Website application WeChat login is the WeChat OAuth2.0 authorized login system built based on the OAuth2.0 protocol standard (that is, the above agreement). To authorize login on the WeChat client (obtain user information), you can view: http://www.cnblogs.com/0201zcr/p/5131602.html
Performing WeChat OAuth2. Performing WeChat OAuth2.0 authorization Before logging in and accessing, register a developer account on the WeChat open platform, have an approved website application, and obtain the corresponding AppID and AppSecret. After applying for WeChat login and passing the review, you can start the access process.
3.1. Register a developer account
You can apply for a development account here at https://open.weixin.qq.com/. Since it is a Tencent webpage, you can log in directly through your QQ account.
3.2. Submit website application review
In the interface you have logged in, select "Management Center" - "Website Application -" Create Website Application
The following interface will pop up
After filling in, there is still a page to fill in and submit a scanned copy of the paper version of the application (will be provided After we download the template and fill it out, it needs to be stamped and signed), configure the callback domain name (the page that will jump after scanning the QR code to log in), etc.
Then just submit it for review. Once the WeChat review is passed, we can get the appid and AppSecret of the web application we need, and configure the callback domain name (these three are necessary for our development).
3.3. Developer Qualification Certification
Since we are going to use the WeChat login interface here, we also need to apply for certification to WeChat. Only after certification can we use WeChat's advanced interfaces. The unauthenticated one is as shown in the picture below
After authentication it looks like this:
I haven’t found one yet. Apply for a test account like a public account. If there are experts who know how to apply for a test account, I hope they can give you some advice.
Next, we can start the development of our web page WeChat scan code login.
4. Authorization process description
WeChat OAuth2.0 authorized login allows WeChat users to use their WeChat identity to securely log in to third-party applications or websites. After the third-party application, the third party can obtain the user's interface call credential (access_token). Through the access_token, the WeChat open platform authorization relationship interface can be called, thereby obtaining the basic open information of WeChat users and helping users realize basic open functions.
WeChat OAuth2.0 authorized login currently supports authorization_code mode, which is suitable for application authorization with server side. The overall process of this mode is:
##
1.?第三方發(fā)起微信授權(quán)登錄請(qǐng)求,微信用戶(hù)允許授權(quán)第三方應(yīng)用后,微信會(huì)拉起應(yīng)用或重定向到第三方網(wǎng)站,并且?guī)鲜跈?quán)臨時(shí)票據(jù)code參數(shù);2.?通過(guò)code參數(shù)加上AppID和AppSecret等,通過(guò)API換取access_token;3.?通過(guò)access_token進(jìn)行接口調(diào)用,獲取用戶(hù)基本數(shù)據(jù)資源或幫助用戶(hù)實(shí)現(xiàn)基本操作。Obtain access_token sequence diagram:
?
5、獲取網(wǎng)頁(yè)的二維碼
當(dāng)我們通過(guò)微信的認(rèn)證,獲取到了appid和AppSecret,并配置了回調(diào)的域名。我們就已經(jīng)可以獲取屬于我們網(wǎng)頁(yè)的二維碼了,獲取的方式很簡(jiǎn)單,只需打開(kāi)一個(gè)微信的鏈接,加上我們的appid和回調(diào)域名即可在網(wǎng)頁(yè)上面打開(kāi)二維碼,用戶(hù)用微信客戶(hù)端掃碼并授權(quán)登錄之后即會(huì)跳轉(zhuǎn)到我們配置的回調(diào)域名下。
注意:
1、這里填寫(xiě)的是域名(是一個(gè)字符串),而不是URL,因此請(qǐng)勿加http://等協(xié)議頭;2、授權(quán)回調(diào)域名配置規(guī)范為全域名,比如需要網(wǎng)頁(yè)授權(quán)的域名為:www.qq.com,配置以后此域名下面的頁(yè)面http://www.qq.com/music.html?、?http://m.miracleart.cn/?都可以進(jìn)行OAuth2.0鑒權(quán)。但http://pay.qq.com?、?http://m.miracleart.cn/?、?http://m.miracleart.cn/無(wú)法進(jìn)行OAuth2.0鑒權(quán)
5.1、請(qǐng)求url說(shuō)明
第三方使用網(wǎng)站應(yīng)用授權(quán)登錄前請(qǐng)注意已獲取相應(yīng)網(wǎng)頁(yè)授權(quán)作用域(scope=snsapi_login),則可以通過(guò)在PC端打開(kāi)以下鏈接:
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
?
?參數(shù)說(shuō)明
參數(shù) | 是否必須 | 說(shuō)明 |
---|---|---|
appid | 是 | 應(yīng)用唯一標(biāo)識(shí)(前面認(rèn)證網(wǎng)頁(yè)應(yīng)用中獲得) |
redirect_uri | 是 | 重定向地址,需要進(jìn)行UrlEncode(前面認(rèn)證網(wǎng)頁(yè)應(yīng)用中獲得) |
response_type | 是 | 填code |
scope | 是 | 應(yīng)用授權(quán)作用域,擁有多個(gè)作用域用逗號(hào)(,)分隔,網(wǎng)頁(yè)應(yīng)用目前僅填寫(xiě)snsapi_login即可 |
state | 否 | 用于保持請(qǐng)求和回調(diào)的狀態(tài),授權(quán)請(qǐng)求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊(跨站請(qǐng)求偽造攻擊),建議第三方帶上該參數(shù),可設(shè)置為簡(jiǎn)單的隨機(jī)數(shù)加session進(jìn)行校驗(yàn) |
?返回說(shuō)明
? 用戶(hù)允許授權(quán)后,將會(huì)重定向到redirect_uri的網(wǎng)址上,并且?guī)蟘ode和state參數(shù)
redirect_uri?code=CODE&state=STATE
? 若用戶(hù)禁止授權(quán),則重定向后不會(huì)帶上code參數(shù),僅會(huì)帶上state參數(shù)
redirect_uri?state=STATE
5.2、事例:
一號(hào)店的微信二維碼鏈接如下:
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
? 將其復(fù)制到瀏覽器中打開(kāi)即可獲得一號(hào)店的二維碼,二維碼頁(yè)面如下:
通過(guò)使用微信客戶(hù)端的掃一掃功能,掃描該二維碼,即會(huì)跳轉(zhuǎn)到上面填寫(xiě)redirect_uri所在的地址上。假如用戶(hù)同意授權(quán),這里就獲得了微信返回的code參數(shù)了。
6、獲取用戶(hù)信息
假如前面已經(jīng)獲得code。我們可以通過(guò)code參數(shù)去獲取用戶(hù)openid和access_token,進(jìn)而獲得用戶(hù)的信息。
6.1、通過(guò)code參數(shù)獲取access_token
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
?參數(shù)說(shuō)明
參數(shù) | 是否必須 | 說(shuō)明 |
---|---|---|
appid | 是 | 應(yīng)用唯一標(biāo)識(shí),在微信開(kāi)放平臺(tái)提交應(yīng)用審核通過(guò)后獲得 |
secret | 是 | 應(yīng)用密鑰AppSecret,在微信開(kāi)放平臺(tái)提交應(yīng)用審核通過(guò)后獲得 |
code | 是 | 填寫(xiě)第一步獲取的code參數(shù) |
grant_type | 是 | 填authorization_code |
返回說(shuō)明
正確的返回:
{? "access_token":"ACCESS_TOKEN",? "expires_in":7200,? "refresh_token":"REFRESH_TOKEN","openid":"OPENID",? "scope":"SCOPE","unionid":?"o6_bmasdasdsad6_2sgVt7hMZOPfL"}
參數(shù) | 說(shuō)明 |
---|---|
access_token | 接口調(diào)用憑證 |
expires_in | access_token接口調(diào)用憑證超時(shí)時(shí)間,單位(秒) |
refresh_token | 用戶(hù)刷新access_token |
openid | 授權(quán)用戶(hù)唯一標(biāo)識(shí) |
scope | 用戶(hù)授權(quán)的作用域,使用逗號(hào)(,)分隔 |
?unionid | 當(dāng)且僅當(dāng)該網(wǎng)站應(yīng)用已獲得該用戶(hù)的userinfo授權(quán)時(shí),才會(huì)出現(xiàn)該字段。 |
錯(cuò)誤返回樣例:
{"errcode":40029,"errmsg":"invalid?code"}
注意:
code參數(shù)的超時(shí)時(shí)間是5分鐘,且每次請(qǐng)求的code參數(shù)的值都不一樣。
access_token的超時(shí)時(shí)間是32分鐘。
6.2、通過(guò)access_token獲取用戶(hù)的基本信息
獲取的前提條件
access_token有效且為超時(shí);
微信用戶(hù)已授權(quán)給第三方應(yīng)用賬號(hào)相應(yīng)接口作用域(scope)【在二維碼生成連接那里填寫(xiě)】
對(duì)于接口作用域(scope),能調(diào)用的接口有以下:
授權(quán)作用域(scope) | 接口 | 接口說(shuō)明 |
---|---|---|
snsapi_base | /sns/oauth2/access_token | 通過(guò)code換取access_token、refresh_token和已授權(quán)scope |
/sns/oauth2/refresh_token | 刷新或續(xù)期access_token使用 | |
/sns/auth | 檢查access_token有效性 | |
snsapi_userinfo | /sns/userinfo | 獲取用戶(hù)個(gè)人信息 |
?
使用snsapi_base作用域的授權(quán)是掃碼之后無(wú)需用戶(hù)點(diǎn)擊授權(quán),掃碼后直接跳轉(zhuǎn),用戶(hù)感覺(jué)不到授權(quán)了,但這種授權(quán)方式能獲取的數(shù)據(jù)量有限,這里我們要獲取用戶(hù)的基本信息,我們需要使用snsapi_userinfo授權(quán)。使用snsapi_userinfo授權(quán),掃碼后出現(xiàn)類(lèi)似于下面的授權(quán)界面
此接口用于獲取用戶(hù)個(gè)人信息。開(kāi)發(fā)者可通過(guò)OpenID來(lái)獲取用戶(hù)基本信息。特別需要注意的是,如果開(kāi)發(fā)者擁有多個(gè)移動(dòng)應(yīng)用、網(wǎng)站應(yīng)用和公眾帳號(hào),可通過(guò)獲取用戶(hù)基本信息中的unionid來(lái)區(qū)分用戶(hù)的唯一性,因?yàn)橹灰峭粋€(gè)微信開(kāi)放平臺(tái)帳號(hào)下的移動(dòng)應(yīng)用、網(wǎng)站應(yīng)用和公眾帳號(hào),用戶(hù)的unionid是唯一的。換句話(huà)說(shuō),同一用戶(hù),對(duì)同一個(gè)微信開(kāi)放平臺(tái)下的不同應(yīng)用,unionid是相同的。請(qǐng)注意,在用戶(hù)修改微信頭像后,舊的微信頭像URL將會(huì)失效,因此開(kāi)發(fā)者應(yīng)該自己在獲取用戶(hù)信息后,將頭像圖片保存下來(lái),避免微信頭像URL失效后的異常情況。
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
?參數(shù)說(shuō)明
參數(shù) | 是否必須 | 說(shuō)明 |
---|---|---|
access_token | 是 | 調(diào)用憑證(上一個(gè)請(qǐng)求中獲得) |
openid | 是 | 普通用戶(hù)的標(biāo)識(shí),對(duì)當(dāng)前開(kāi)發(fā)者帳號(hào)唯一(上一個(gè)請(qǐng)求中獲得) |
? ? ? ?lang | ? 否 | 國(guó)家地區(qū)語(yǔ)言版本,zh_CN 簡(jiǎn)體,zh_TW 繁體,en 英語(yǔ),默認(rèn)為zh-CN |
返回說(shuō)明
正確的Json返回結(jié)果:
{? "openid":"OPENID","nickname":"NICKNAME","sex":1,"province":"PROVINCE","city":"CITY","country":"COUNTRY","headimgurl":?"http://m.miracleart.cn/","privilege":["PRIVILEGE1",? "PRIVILEGE2"],"unionid":?"?o6_bmasdasdsad6_2sgVt7hMZOPfL"}
參數(shù) | 說(shuō)明 |
---|---|
openid | 普通用戶(hù)的標(biāo)識(shí),對(duì)當(dāng)前開(kāi)發(fā)者帳號(hào)唯一 |
nickname | 普通用戶(hù)昵稱(chēng) |
sex | 普通用戶(hù)性別,1為男性,2為女性 |
province | 普通用戶(hù)個(gè)人資料填寫(xiě)的省份 |
city | 普通用戶(hù)個(gè)人資料填寫(xiě)的城市 |
country | 國(guó)家,如中國(guó)為CN |
headimgurl | 用戶(hù)頭像,最后一個(gè)數(shù)值代表正方形頭像大小(有0、46、64、96、132數(shù)值可選,0代表640*640正方形頭像),用戶(hù)沒(méi)有頭像時(shí)該項(xiàng)為空 |
privilege | 用戶(hù)特權(quán)信息,json數(shù)組,如微信沃卡用戶(hù)為(chinaunicom) |
unionid | 用戶(hù)統(tǒng)一標(biāo)識(shí)。針對(duì)一個(gè)微信開(kāi)放平臺(tái)帳號(hào)下的應(yīng)用,同一用戶(hù)的unionid是唯一的。 |
錯(cuò)誤的Json返回示例:
{? "errcode":40003,"errmsg":"invalid?openid"}
7、總結(jié)?
最近著手開(kāi)發(fā)了微信網(wǎng)頁(yè)掃碼登錄和公眾號(hào)授權(quán)登錄收獲頗豐,兩者的開(kāi)發(fā)很類(lèi)似。以下是我個(gè)人摸索過(guò)程中發(fā)現(xiàn)的兩者的異同:
兩者都可以通過(guò)微信客戶(hù)端掃碼授權(quán)的方式,讓第三方頁(yè)面獲得微信用戶(hù)的一些基本信息(昵稱(chēng)、性別、所在地、在微信唯一標(biāo)示等……)。他們都是通過(guò)提供一個(gè)鏈接讓用戶(hù)授權(quán)的方式。但網(wǎng)頁(yè)版需要在頁(yè)面打開(kāi)二維碼之后授權(quán),而公眾號(hào)則需要用戶(hù)先關(guān)注了我們的公眾號(hào),然后點(diǎn)開(kāi)公眾號(hào)里面的鏈接,確認(rèn)授權(quán)即可。
網(wǎng)頁(yè)掃碼登錄需要將授權(quán)的鏈接(二維碼鏈接)在網(wǎng)頁(yè)中打開(kāi)、而公眾號(hào)授權(quán)登錄的鏈接必須要微信客戶(hù)端中打開(kāi)。
無(wú)論網(wǎng)頁(yè)掃碼登錄還是在公眾號(hào)中授權(quán)登錄,都是通過(guò)授權(quán)的方式獲得一個(gè)code參數(shù),之后通過(guò)code參數(shù)獲取access_token和openid和通過(guò)access_token和openid去獲取用戶(hù)的基本信息的請(qǐng)求鏈接是一樣的。
在開(kāi)發(fā)公眾號(hào)授權(quán)登錄的過(guò)程中,我發(fā)現(xiàn)了有測(cè)試賬號(hào)的提供,足以滿(mǎn)足我們的測(cè)試和開(kāi)發(fā),但在開(kāi)發(fā)網(wǎng)頁(yè)掃碼時(shí),暫時(shí)未發(fā)現(xiàn)哪里能獲取測(cè)試賬號(hào),我是通過(guò)申請(qǐng)獲取的。(希望知道哪里有測(cè)試賬號(hào)的請(qǐng)求高手賜教)。
?公眾賬號(hào)授權(quán)登錄:http://www.cnblogs.com/0201zcr/p/5131602.html
微信公眾號(hào)群發(fā)消息:http://www.cnblogs.com/0201zcr/p/5866296.html
更多微信開(kāi)放平臺(tái)開(kāi)發(fā)——網(wǎng)頁(yè)微信掃碼登錄(OAuth2.0)?相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)
