The first step: get AppID AppSecret (no explanation, go to the WeChat public platform to apply)
Step 2: Generate and scan the QR code to obtain the code
https://open.weixin.qq.com/connect/qrconnect?appid=AppID&redirect_uri=http://www.baidu.com&response_type=code&scope=snsapi_login&state=2014#wechat_redirect
Step 3: Obtain access_token through code
https://api.weixin.qq.com/sns/oauth2/access_token?appid=AppID&secret=AppSecret&code=00294221aeb06261d5966&grant_type=authorization_code
Step 4: Because the interface frequency has a limit on the number of times, if necessary, refresh the access_token
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=AppID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
Step 5: Obtain basic user information through access_token and openid, including avatar, nickname, gender, and region
https://api.weixin.qq.com/sns/userinfo?access_token=bezXEiiBSKSxW0eoblIewFNHqAG-PyW9OqI_L81E4ZCi2cFpfoJTyQc0xKlPPCtqK1kLJfiRbVrpoOVLw7fjpqh52bn7C68SHa2HSgYsVPXZPvJvtayDa57-_7TeHYw&openid=o39YsbmuV_bIPGpj1MTe
This is the interface online debugging tool: http://mp.weixin.qq.com/debug/
This is the error code description document:
http://mp.weixin.qq.com/wiki/17/fa4e1434e57290788bde25603fa2fcbd.html
In addition, you need to pay special attention. If the developer needs to unify user accounts between multiple official accounts, or between official accounts and mobile applications, he needs to go to the WeChat open platform (open.weixin.qq.com) to bind the official account. The UnionID mechanism can be used to meet the above requirements, document:
http://mp.weixin.qq.com/wiki/14/bb5031008f1494a59c6f71fa0f319c66.html
The principle of third-party login on WeChat webpage
The difference between WeChat open platform and public platform
1. The public platform is for ordinary users, such as from the media and media, and used by the official WeChat public account operators of enterprises. Of course, your team or company has the strength to develop some content, and you can also call the interfaces in the public platform, such as Custom menu, automatic reply, query function. At present, most WeChat accounts are doing this after passing the certification.
mp.weixin.qq.com
2. The open platform is for developers and third-party independent software developers. I think the biggest openness of the development platform is WeChat login. Back then, Tencent did not make great efforts to do the unified login, which led to a set of login mechanisms for each website. Fortunately, they now recognize the situation. Developers or software developers can develop e-commerce websites suitable for enterprises through the platforms and interfaces provided by WeChat, scan the QR code to enter a game interface, and then go to purchase goods and so on. Of course, the subsequent open platform must open the payment interface, so software development vendors like Pockettong can provide services and software such as WeChat stores for large and medium-sized enterprises.
open.weixin.qq.com
The public platform is the management and development backend of the service account subscription account.
The popular point of the development platform is to realize the one-click sharing of the content of the software installed in the mobile phone in the circle of friends;
The following third-party login is based on the function of the open platform (open.weixin.qq.com)
Ready to work
Website application WeChat login is a WeChat OAuth2.0 authorized login system based on the OAuth2.0 protocol standard .
Before performing WeChat OAuth2. Before performing WeChat OAuth2.0 authorized login access, register a developer account on the WeChat open platform, and have an approved website application, and obtain the corresponding AppID and AppSecret, apply for WeChat login and pass the review After that, the access process can be started.
Authorization process description
WeChat OAuth2.0 authorized login allows WeChat users to use WeChat identity to safely log in to third-party applications or websites. After WeChat users are authorized to log in to third-party applications that have access to WeChat OAuth2.0, the third party can obtain the user's interface call credentials (access_token) ), through access_token, we can call the authorization relationship interface of the WeChat open platform, so as to obtain basic open information of WeChat users and help users realize basic open functions.
WeChat OAuth2.0 authorization login currently supports authorization_code mode, which is suitable for application authorization with server side. The overall process of this model is:
1. A third party initiates a WeChat authorization login request. After the WeChat user allows the third-party application to be authorized, WeChat will launch the application or redirect to the third-party website, and bring the authorization temporary ticket code parameter;
2. Add AppID and AppSecret through the code parameter, and exchange for access_token through API;
3. Use access_token to call the interface to obtain basic user data resources or help users achieve basic operations.
Get access_token sequence diagram:
Step 1: Request CODE
Before a third party uses website application authorization to log in, please note that you have obtained the corresponding web page authorization scope (scope=snsapi_login), and you can open the following link on the PC:
https://open.weixin.qq.com/connect/qrconnect?appid =APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
If it says "The link cannot be accessed", please check whether the parameters are filled in incorrectly. For example, the domain name of redirect_uri is inconsistent with the authorized domain name filled in during the audit or the scope is not snsapi_login.
Parameter Description
| parameter | Do you have to | Description |
|---|---|---|
| appid | Yes | Application unique identifier |
| redirects | Yes | Redirection address, UrlEncode is required |
| response_type | Yes | Fill in code |
| scope | Yes | Application authorization scope, with multiple scopes separated by commas (,), web applications currently only need to fill in snsapi_login |
| state | no | Used to maintain the status of the request and callback, and bring it back to the third party as it is after the authorization request. This parameter can be used to prevent csrf attacks (cross-site request forgery attacks). It is recommended that third parties bring this parameter, which can be set to a simple random number plus session for verification |
Return description
After the user allows authorization, it will be redirected to the URL of redirect_uri with the code and state parameters
redirect_uri?code=CODE&state=STATE
If the user prohibits authorization, the code parameter will not be taken after redirection, only the state parameter will be taken
redirect_uri?state=STATE
Request example
Log in to the Yihaodian website application
https://passport.yhd.com/wechat/login.do
After opening, Yihaodian will generate state parameters and jump to
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
After WeChat users use WeChat to scan the QR code and confirm login, the PC will jump to
https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e
In order to meet the needs of a more customized website, we also provide a second way to obtain the code, which allows the website to embed the WeChat login QR code into its own page, and the user uses the WeChat scan code to authorize and then returns the code to the website through JS. .
The main purpose of JS WeChat login: The website hopes that users can complete the login in the website, without jumping to the WeChat domain to log in and then return, improving the fluency and success rate of WeChat login. Implementation of WeChat login JS with QR code embedded in the website:
Step 1: First introduce the following JS file (support https) in the page:
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
Step 2: Instance the following JS objects where you need to log in with WeChat:
var obj = new WxLogin ({
id:"login_container",
appid: "",
scope: "",
redirect_uri: "",
state: "",
style: "",
href: ""
});
Parameter Description
| parameter | Do you have to | Description |
|---|---|---|
| id | Yes | The container id of the QR code displayed on the third-party page |
| appid | Yes | The unique identification of the application, which is obtained after the application is reviewed and approved on the WeChat open platform |
| scope | Yes | Application authorization scope, with multiple scopes separated by commas (,), web applications currently only need to fill in snsapi_login |
| redirects | Yes | Redirection address, UrlEncode is required |
| state | no | Used to maintain the status of the request and callback, and bring it back to the third party as it is after the authorization request. This parameter can be used to prevent csrf attacks (cross-site request forgery attacks). It is recommended that third parties bring this parameter, which can be set to a simple random number plus session for verification |
| style | no | Provide "black", "white" optional, the default is black text description. See the FAQ at the bottom of the document for details |
| href | no | Custom style links, third parties can override the default styles according to actual needs. See the FAQ at the bottom of the document for details |
Step 2: Obtain access_token through code
Get access_token through code
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
Parameter Description
| parameter | Do you have to | Description |
|---|---|---|
| appid | Yes | The unique identification of the application, which is obtained after the application is reviewed and approved on the WeChat open platform |
| secret | Yes | App Secret AppSecret, obtained after submitting the application for review and approval on the WeChat open platform |
| code | Yes | Fill in the code parameters obtained in the first step |
| grant_type | Yes | 填authorization_code |
Return description
Correct return:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE","unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"}
| parameter | Description |
|---|---|
| access_token | Interface call credentials |
| expires_in | Access_token interface call credential timeout time, unit (seconds) |
| refresh_token | User refresh access_token |
| openid | Unique ID of authorized user |
| scope | The scope of user authorization, separated by commas (,) |
| unions | This field will only appear after the user binds the official account to the WeChat open platform account. |
Example of error return:
{"errcode":40029,"errmsg":"invalid code"}
Refresh the validity period of access_token
access_token is the calling credential for calling the authorization relationship interface. Because the access_token has a short validity period (currently 2 hours), when the access_token times out, refresh_token can be used to refresh. There are two types of access_token refresh results:
-
1. If the access_token has timed out, refresh_token will get a new access_token with a new timeout period;
-
2. If the access_token does not expire, then refresh_token will not change the access_token, but the timeout period will be refreshed, which is equivalent to renewing the access_token.
The refresh_token has a long validity period (30 days). When the refresh_token becomes invalid, the user needs to re-authorize.
Request method
After obtaining the code of the first step, request the following link to refresh_token:
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
Parameter Description
| parameter | Do you have to | Description |
|---|---|---|
| appid | Yes | Application unique identifier |
| grant_type | Yes | Fill refresh_token |
| refresh_token | Yes | Fill in the refresh_token parameter obtained through access_token |
Return description
Correct return:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
| parameter | Description |
|---|---|
| access_token | Interface call credentials |
| expires_in | Access_token interface call credential timeout time, unit (seconds) |
| refresh_token | User refresh access_token |
| openid | Unique ID of authorized user |
| scope | The scope of user authorization, separated by commas (,) |
Example of error return:
{"errcode":40030,"errmsg":"invalid refresh_token"}
note:
1、Appsecret 是应用接口使用密钥，泄漏后将可能导致应用数据泄漏、应用的用户数据泄漏等高风险后果；存储在客户端，极有可能被恶意窃取（如反编译获取Appsecret）；
2、access_token 为用户授权第三方应用发起接口调用的凭证（相当于用户登录态），存储在客户端，可能出现恶意获取access_token 后导致的用户数据泄漏、用户微信相关接口功能被恶意发起等行为；
3、refresh_token 为用户授权第三方应用的长效凭证，仅用于刷新access_token，但泄漏后相当于access_token 泄漏，风险同上。
建议将secret、用户数据（如access_token）放在App云端服务器，由云端中转接口调用请求。
第三步：通过access_token调用接口
获取access_token后，进行接口调用，有以下前提：
-
1. access_token有效且未超时；
-
2. 微信用户已授权给第三方应用帐号相应接口作用域（scope）。
对于接口作用域（scope），能调用的接口有以下：
| 授权作用域（scope） | 接口 | 接口说明 |
|---|---|---|
| snsapi_base | /sns/oauth2/access_token | 通过code换取access_token、refresh_token和已授权scope |
| /sns/oauth2/refresh_token | 刷新或续期access_token使用 | |
| /sns/auth | 检查access_token有效性 | |
| snsapi_userinfo | /sns/userinfo | 获取用户个人信息 |
其中snsapi_base属于基础接口，若应用已拥有其它scope权限，则默认拥有snsapi_base的权限。使用snsapi_base可以让移动端网页授权绕过跳转授权登录页请求用户授权的动作，直接跳转第三方网页带上授权临时票据（code），但会使得用户已授权作用域（scope）仅为snsapi_base，从而导致无法获取到需要用户授权才允许获得的数据和基础功能。
接口调用方法可查阅《微信授权关系接口调用指南》
F.A.Q
1. 什么是授权临时票据（code）？
答：第三方通过code进行获取access_token的时候需要用到，code的超时时间为10分钟，一个code只能成功换取一次access_token即失效。code的临时性和一次保障了微信授权登录的安全性。第三方可通过使用https和state参数，进一步加强自身授权登录的安全性。
2. 什么是授权作用域（scope）？
答：授权作用域（scope）代表用户授权给第三方的接口权限，第三方应用需要向微信开放平台申请使用相应scope的权限后，使用文档所述方式让用户进行授权，经过用户授权，获取到相应access_token后方可对接口进行调用。
3. 网站内嵌二维码微信登录JS代码中style字段作用？
答：第三方页面颜色风格可能为浅色调或者深色调，若第三方页面为浅色背景，style字段应提供"black"值（或者不提供，black为默认值），则对应的微信登录文字样式为黑色。相关效果如下：
若提供"white"值，则对应的文字描述将显示为白色，适合深色背景。相关效果如下：
4.网站内嵌二维码微信登录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;}
相关效果如下：
通过code获取access_token
接口说明
通过code获取access_token的接口。
请求说明
http请求方式: GET
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
参数说明
| 参数 | 是否必须 | 说明 |
|---|---|---|
| appid | 是 | 应用唯一标识，在微信开放平台提交应用审核通过后获得 |
| secret | 是 | 应用密钥AppSecret，在微信开放平台提交应用审核通过后获得 |
| code | 是 | 填写第一步获取的code参数 |
| grant_type | 是 | 填authorization_code |
返回说明
正确的返回：
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
| 参数 | 说明 |
|---|---|
| access_token | 接口调用凭证 |
| expires_in | access_token接口调用凭证超时时间，单位（秒） |
| refresh_token | 用户刷新access_token |
| openid | 授权用户唯一标识 |
| scope | 用户授权的作用域，使用逗号（,）分隔 |
错误返回样例：
{
"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，但超时时间会刷新，相当于续期access_token。
refresh_token拥有较长的有效期（30天），当refresh_token失效的后，需要用户重新授权。
请求方法
使用/sns/oauth2/access_token接口获取到的refresh_token进行以下接口调用：
http请求方式: GET
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
参数说明
| 参数 | 是否必须 | 说明 |
|---|---|---|
| appid | 是 | 应用唯一标识 |
| grant_type | 是 | 填refresh_token |
| refresh_token | 是 | 填写通过access_token获取到的refresh_token参数 |
返回说明
正确的返回：
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
| 参数 | 说明 |
|---|---|
| access_token | 接口调用凭证 |
| expires_in | access_token接口调用凭证超时时间，单位（秒） |
| refresh_token | 用户刷新access_token |
| openid | 授权用户唯一标识 |
| scope | 用户授权的作用域，使用逗号（,）分隔 |
错误返回样例：
{
"errcode":40030,"errmsg":"invalid refresh_token"
}
接口说明
检验授权凭证（access_token）是否有效
请求说明
http请求方式: GET
https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID
参数说明
| 参数 | 是否必须 | 说明 |
|---|---|---|
| access_token | 是 | 调用接口凭证 |
| openid | 是 | 普通用户标识，对该公众帐号唯一 |
返回说明
正确的Json返回结果：
{
"errcode":0,"errmsg":"ok"
}
错误的Json返回示例:
{
"errcode":40003,"errmsg":"invalid openid"
}
获取用户个人信息（UnionID机制）
接口说明
此接口用于获取用户个人信息。开发者可通过OpenID来获取用户基本信息。特别需要注意的是，如果开发者拥有多个移动应用、网站应用和公众帐号，
可通过获取用户基本信息中的unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号，用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。
请求说明
http请求方式: GET
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
参数说明
| 参数 | 是否必须 | 说明 |
|---|---|---|
| access_token | 是 | 调用凭证 |
| openid | 是 | 普通用户的标识，对当前开发者帐号唯一 |
返回说明
正确的Json返回结果：
{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
| 参数 | 说明 |
|---|---|
| openid | 普通用户的标识，对当前开发者帐号唯一 |
| nickname | 普通用户昵称 |
| sex | 普通用户性别，1为男性，2为女性 |
| province | 普通用户个人资料填写的省份 |
| city | 普通用户个人资料填写的城市 |
| country | 国家，如中国为CN |
| headimgurl | 用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空 |
| privilege | 用户特权信息，json数组，如微信沃卡用户为（chinaunicom） |
| unionid | 用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。 |
错误的Json返回示例:
{
"errcode":40003,"errmsg":"invalid openid"
}
调用频率限制
| 接口名 | 频率限制 |
|---|---|
| 通过code换取access_token | 1万/分钟 |
| 刷新access_token | 5万/分钟 |
| 获取用户基本信息 | 5万/分钟 |