WeChat development web page authorization to obtain basic user information

WeChat public platform recently launched WeChat authentication, and you can obtain advanced interface permissions after authentication. Many friends fail or cannot understand their content when using it. Today, the editor of the new technology channel provides you with WeChat development web page authorization to obtain basic user information.

1. What is OAuth2.0

Official website: http://oauth.net/ http://oauth.net/2/

Authoritative definition: OAuth is An open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications.

OAuth is an open agreement that allows users to obtain private resources (such as user personal information, photos, videos, contact lists) stored by third-party applications in a secure and standard way (such as user personal information, photos, videos, contact lists) stored on a website, mobile or desktop application without providing username and password to third-party applications.

OAuth 2.0 is the next version of the OAuth protocol, but is not backward compatible with OAuth 1.0. OAuth 2.0 focuses on the simplicity of client developers, while providing a dedicated certification process for web applications, desktop applications and mobile phones, and living room devices.

OAuth allows users to provide a token instead of a username and password to access the data they store in a specific service provider. Each token authorizes a specific website (e.g., a video editing website) to access a specific resource (e.g., just a video in a certain album) within a specific period of time (e.g., within the next 2 hours). In this way, OAuth allows users to authorize third-party websites to access information they store on another service provider without sharing all of their access permissions or their data.

Sina Weibo API currently also uses OAuth 2.0.

2. Authorization of the WeChat public platform OAuth2.0

The detailed steps for authorization of the WeChat public platform OAuth2.0 are as follows:

1. Users follow WeChat public accounts.

2. The WeChat public account provides the URL of the user request authorization page.

3. The user clicks on the authorization page URL and will initiate a request to the server.

4. The server asks the user whether he agrees to authorize the WeChat public account (there is no such step when scope is snsapi_base)

5. User agrees (there is no such step when scope is snsapi_base)

6. The server passes CODE to the WeChat public account through callback

7. Get CODE on WeChat public account

8. WeChat public account requests Access Token to the server through CODE

9. The server returns Access Token and OpenID to the WeChat public account

10. WeChat public account requests user information to the server through Access Token (there is no such step when scope is snsapi_base)

11. The server sends user information back to the WeChat public account (there is no such step when scope is snsapi_base)

The AppId and AppSecret used can be found in the Developer Center-Developer ID.

1. Configure the domain name of the authorization callback page

After entering the WeChat public platform background, enter the developer center-permission table in turn, find the web page authorization to obtain basic user information.

Click Edit on the right.

The domain name configuration specification for authorization callback is a full domain name and does not include http. For example, the domain name that requires web authorization is: www.qq.com. After configuration, the pages below this domain name http://www.qq.com/music.html and http://www.qq.com/login.html can all perform OAuth2.0 authentication. However, http://pay.qq.com, http://music.qq.com, and http://qq.com cannot perform OAuth2.0 authentication.

Here we fill in a Baidu application secondary domain name from Fangbi Studio as mascot.duapp.com

If your URL is not blacklisted, it will appear at the top

Then, the domain name configuration succeeds.

2. User authorization and obtain code

In the root directory of the domain name, create a new file, name it oauth2.php, and its content is

 <?phpif (isset($_GET['code'])){ echo $_GET['code'];}else{ echo "NO CODE";}?>

Let’s first understand how to construct the authorization page:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

Parameter description

Application authorization scope: Since snsapi_base can only obtain openid, it doesn't make much sense, so we use snsapi_userinfo.

Callback address: Fill in as the file address of oauth2.php just uploaded,

State parameters: any number, fill in 1 here

The construct request url is as follows:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx888888888888888&redirect_uri=http://mascot.duapp.com/oauth2.php&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

Send this link to WeChat to open in WeChat browser. Here, use the A link to encapsulate it as follows:

Welcome to follow [Jinbao], which can make it more convenient for you to find catering, clothing, department stores, and beauty salon stores that suit your wishes near you.

<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx888888888888888&redirect_uri=http://mascot.duapp.com/oauth2.php&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect">Click here to bind</a>

Technical support Fangbi Studio

Show as follows in WeChat

After clicking on binding, the application authorization interface pops up

Select Allow, click

Jump to auth2.php page and execute

echo $_GET['code']

The code is displayed on the interface. At this time, the link is obtained by copying the link in the button in the upper right corner:

http://mascot.duapp.com/oauth2.php?code=00b788e3b42043c8459a57a8d8ab5d9f&state=1

We successfully got the code.

Note: If such an interface appears during binding, it means that the parameters are incorrect and you need to go back and check the parameters.

3. Use code to exchange access_token

How to construct the access_token page for exchange for web authorization:

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

Parameter description

Code: Fill in here as the value obtained in the previous step

The construct request url is as follows:

https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx88888888888888&secret=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&code=00b788e3b42043c8459a57a8d8ab5d9f&grant_type=authorization_code

You can execute this statement directly in the browser:

(

Here is the key, which is to obtain the json data code through the above url

 $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // Require the result to be a string and output to the screen curl_setopt($ch, CURLOPT_HEADER, 0); // Don't http header speed up efficiency curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MSIE 5.01; Windows NT 5.0)'); curl_setopt($ch, CURLOPT_TIMEOUT, 15); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); // https request does not verify certificates and hosts curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); $output = curl_exec($ch); curl_close($ch); $jsondecode = json_decode($output); // Encode strings in JSON format $array = get_object_vars($jsondecode); //Convert to array//The two red lines are the key point, for https, I have been struggling for more than one day echo $array;

)

Get the following json data:

 { "access_token": "OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5AI1bw2uqN--2jXoBLIM5d6L9RImvm8Vg8cBAiLpWA8Vw", "expires_in": 7200, "refresh_token": "OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5CZPAwZksiuz_6x_TfkLoXLU7kdKM2232WDXB3Msuzq1A", "openid": "oLVPpjqs9BhvzwPj5A-vTYAX3GLc", "scope": "snsapi_userinfo,"}

The data format is interpreted as follows:

So, we successfully exchanged access_token and refresh_token through code.

Refresh access_token

The official document mentions the function of refreshing access_token, but this is not a must. You can ignore it for the first time using it.

The url request method is as follows:

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

Parameter description

The structure is as follows:

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=wx88888888888888&grant_type=refresh_token&refresh_token=OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5CZPAwZksiuz_6x_TfkLoXLU7kdKM2232WDXB3Msuzq1A

Execute json data in the same format in the browser

4. Use access_token to obtain user information

Request method:

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

Parameter description

The url is constructed as follows:

https://api.weixin.qq.com/sns/userinfo?access_token=OezXcEiiBSKSxW0eoylIeAsR0GmYd1awCffdHgb4fhS_KKf2CotGj2cBNUKQQvj-G0ZWEE5-uBjBz941EOPqDQy5sS_GCs2z40dnvU99Y5AI1bw2uqN--2jXoBLIM5d6L9RImvm8Vg8cBAiLpWA8Vw&openid=oLVPpjqs9BhvzwPj5A-vTYAX3GLc

You can execute this statement directly in the browser:

Get the following json data:

 { "openid": "oLVPpjqs9BhvzwPj5A-vTYAX3GLc", "nickname": "fangbi", "sex": 1, "language": "zh_CN", "city": "Shenzhen", "province": "Guangdong", "country": "CN", "headimgurl": "http://wx.qlogo.cn/mmopen/utpKYf69VAbCRDRlbUsPsdQN38DoibCkrU6SAMCSNx558eTaLVM8PyM6jlEGzOrH67hyZibIZPXu4BK1XNWzSXB3Cs4qpBBg18/0", "privilege": []}

Parameter interpretation:

This is consistent with my personal WeChat information

At this point, without entering my account and password, the WeChat public account Jinbao obtained my personal information, including my nickname, gender, country, province, city, personal avatar and privilege list.

A complete OAuth2 certification is complete.

3. Detailed demonstration

Follow Fangbei Studio (see the QR code below), reply "Authorization", return to the graphic and text message, click on the picture

On the confirmation page, click "Allow"

The result obtained pops up (the picture is subject to anti-theft processing, so it cannot be displayed directly, you can download it locally and display it)

The above is about the information about the web development of WeChat authorization to obtain user basic information, the web authorization to obtain user information, and the relevant information will be added in the future. Thank you for your support from the new technology channel!