微信网页第三方登录原理

最新推荐文章于 2021-12-20 12:08:35 发布
最新推荐文章于 2021-12-20 12:08:35 发布
阅读量4.8k 收藏 3
点赞数
分类专栏： 微信 文章标签： 微信 开放平台 二维码 腾讯 开发人员

微信网页第三方登录原理


标签：

微信开放平台和公众平台的区别

1.公众平台面向的时普通的用户，比如自媒体和媒体，企业官方微信公众账号运营人员使用，当然你所在的团队或者公司有实力去开发一些内容，也可以调用公众平台里面的接口，比如自定义菜单，自动回复，查询功能。目前大多数微信通过认证之后，都在做这个事情。

mp.weixin.qq.com


2.开放平台面向的开发者和第三方独立软件开发商。我觉得开发平台最大的开放就是微信登录。当年腾讯没有花大力气去做统一登录这个事情，导致目前各个网站都要弄一套登录机制。好在他们现在认清了局势。开发者或软件开发商，通过微信开放提供的平台和接口，可以开发适合企业的电子商务网站，扫描二维码进去一个游戏界面，然后去购买商品等。当然后续开放平台要开放支付接口，那么类似口袋通这种软件开发厂商，就可以为大型，中小企业提供微信小店这种服务和软件了。

open.weixin.qq.com

 

公众平台就是服务号订阅号的管理开发后台。

开发平台说得通俗一点就是实现手机里边安装软件的内容一键分享朋友圈；

下面的第三方登陆就是依托于开放平台（open.weixin.qq.com）的功能

 

准备工作

网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。

在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。

授权流程说明

微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站，在微信用户授权登录已接入微信OAuth2.0的第三方应用后，第三方可以获取到用户的接口调用凭证（access_token），通过access_token可以进行微信开放平台授权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

微信OAuth2.0授权登录目前支持authorization_code模式，适用于拥有server端的应用授权。该模式整体流程为：

　　1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；

　　2. 通过code参数加上AppID和AppSecret等，通过API换取access_token；

　　3. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

获取access_token时序图：

技术分享

第一步：请求CODE

第三方使用网站应用授权登录前请注意已获取相应网页授权作用域（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

若提示“该链接无法访问”，请检查参数是否填写错误，如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。

参数说明
参数是否必须说明
appid是应用唯一标识
redirect_uri是重定向地址，需要进行UrlEncode
response_type是填code
scope是应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
state否用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
返回说明

用户允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数

redirect_uri?code=CODE&state=STATE

若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数

redirect_uri?state=STATE

请求示例

登录一号店网站应用

https://passport.yhd.com/wechat/login.do

打开后，一号店会生成state参数，跳转到
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

为了满足网站更定制化的需求，我们还提供了第二种获取code的方式，支持网站将微信登录二维码内嵌到自己页面中，用户使用微信扫码授权后通过JS将code返回给网站。

JS微信登录主要用途：网站希望用户在网站内就能完成登录，无需跳转到微信域下登录后再返回，提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录JS实现办法：

步骤1：在页面中先引入如下JS文件（支持https）：

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

步骤2：在需要使用微信登录的地方实例以下JS对象：

                          var obj = new WxLogin({

                              id:"login_container", 

                              appid: "", 

                              scope: "", 

                              redirect_uri: "",

                              state: "",

                              style: "",

                              href: ""

                            });

参数说明
参数是否必须说明
id是第三方页面显示二维码的容器id
appid是应用唯一标识，在微信开放平台提交应用审核通过后获得
scope是应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
redirect_uri是重定向地址，需要进行UrlEncode
state否用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
style否提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ
href否自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ
第二步：通过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

参数说明
参数是否必须说明
appid是应用唯一标识，在微信开放平台提交应用审核通过后获得
secret是应用密钥AppSecret，在微信开放平台提交应用审核通过后获得
code是填写第一步获取的code参数
grant_type是填authorization_code
返回说明

正确的返回：

{ 
"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID", 
"scope":"SCOPE","unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"}

参数说明
access_token接口调用凭证
expires_inaccess_token接口调用凭证超时时间，单位（秒）
refresh_token用户刷新access_token
openid授权用户唯一标识
scope用户授权的作用域，使用逗号（,）分隔
 unionid只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。

错误返回样例：

{"errcode":40029,"errmsg":"invalid code"}

刷新access_token有效期

access_token是调用授权关系接口的调用凭证，由于access_token有效期（目前为2个小时）较短，当access_token超时后，可以使用refresh_token进行刷新，access_token刷新结果有两种：

  1. 1. 若access_token已超时，那么进行refresh_token会获取一个新的access_token，新的超时时间；

  2. 2. 若access_token未超时，那么进行refresh_token不会改变access_token，但超时时间会刷新，相当于续期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

参数说明
参数是否必须说明
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_inaccess_token接口调用凭证超时时间，单位（秒）
refresh_token用户刷新access_token
openid授权用户唯一标识
scope用户授权的作用域，使用逗号（,）分隔

错误返回样例：

{"errcode":40030,"errmsg":"invalid refresh_token"}

注意：

1、Appsecret 是应用接口使用密钥，泄漏后将可能导致应用数据泄漏、应用的用户数据泄漏等高风险后果；存储在客户端，极有可能被恶意窃取（如反编译获取Appsecret）；

2、access_token 为用户授权第三方应用发起接口调用的凭证（相当于用户登录态），存储在客户端，可能出现恶意获取access_token 后导致的用户数据泄漏、用户微信相关接口功能被恶意发起等行为；

3、refresh_token 为用户授权第三方应用的长效凭证，仅用于刷新access_token，但泄漏后相当于access_token 泄漏，风险同上。

 

建议将secret、用户数据（如access_token）放在App云端服务器，由云端中转接口调用请求。

 
第三步：通过access_token调用接口

获取access_token后，进行接口调用，有以下前提：

  1. 1. access_token有效且未超时；

  2. 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_inaccess_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. 1. 若access_token已超时，那么进行refresh_token会获取一个新的access_token，新的超时时间；

  2. 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_inaccess_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_token1万/分钟
刷新access_token5万/分钟
获取用户基本信息5万/分钟
林中轩
关注
专栏目录
第三方登陆原理
SJian123的专栏
04-29 2418
对于用户资源的授权来讲, OAuth并不是唯一的, 但是目前OAuth2.0应该已经是各种平台的事实标准了, 对于OAuth2.0协议, 有一系列RFC阐述了OAuth2.0。 不过OAuth2。0虽然已经是一个标准， 但是各个平台对它的实现并不完全相同，但是最基本的流程是一样，所以你要先了解这个协议。知道了大体流程之后你就可以结合具体的平台， 比如QQ或微博的开发文档来看。 OAut
微信第三方开发平台接入公众号整体技术方案
最新发布
小杨互联网
09-25 972
微信公众平台微信公众号就像是你在微信里的一个“官方小号”，专门用来发布内容、和粉丝互动。用户可以关注你的公众号，收到你发布的消息，就像朋友圈那样。公众号还能提供很多实用功能，比如：自动回复消息：有人发消息给公众号，系统会根据设定自动回复。自定义菜单：在公众号的界面设置一些按钮，粉丝可以点进去直接访问某些功能或页面（比如商品链接、查询服务等）。推送文章：你可以定期发布文章、新闻或活动通知。支付功能：通过公众号直接进行商品销售，支持微信支付。公众号的主要类型：订阅号。
第三方账号登录的原理
访问受限丶
09-23 1051
第三方授权登录的原理 一个网站或APP, 如果没有用户，那就没有价值。所以，如何吸引用户注册和登录，是一个重要问题，这就涉及到账号体系了。 自建账号体系的注册和登录，前面文章已经讲过。可是，很多用户并不想注册你开发的网站或APP，此时可考虑用第三方账号登录，比如微信登录和QQ登录。如下是某网站的登录页面： 我们以知乎为例，在访问知乎网页时，是不需要登录的，游客模式即可，知乎系统并不知道你是谁。但是，如果想在知乎上进行发帖、评论或点赞，知乎系统就需要知道你是谁，这就要求你先登录知乎。 如果你不想注册知乎，那
第三方登录原理
qq_38331606的博客
08-06 1118
以百度网盘通过qq登录为例，剖析第三方登录原理 1.用户在百度网盘登录页点击qq登录链接，百度网盘重定向用户的当前链接到qq 2.用户在百度网盘重定向到的qq登录页面，输入账户密码，发送信息到qq 3.qq校验通过后，返回一个code到客户端，此时客户端发送该信息code到百度网盘 code的特点：只能使用...
微信网页第三方登录详解：OAuth2.0授权与流程
微信网页第三方登录原理详解深入剖析了微信网页与第三方应用之间的集成方式，主要依赖于OAuth2.0协议。微信提供了两个主要平台：公众平台和开放平台，它们各有不同的服务对象和功能。 1. **公众平台**：主要针对...
微信第三方登录接口
zhuang_kang
09-12 480
今天的积累都是为了更好的明天，加油！我是java程序员可以关注我一起学习哈！ 微信开放平台官方文档连接：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=e0973e138e9c34...
微信第三方登陆接口
Tiglle的博客
03-26 1130
1.在微信开放平台注册开放平台账号,并提交网站进行审核,成功后获得相应的AppID和AppSecret2.向微信发起第三方登陆请求,微信返回登陆页面,用户登陆成功后,会向回调地址返回code参数3.通过code参数加上AppID和AppSecret等参数换取access_token4.通过access_token和openid进行接口调用，获取用户基本数据资源或帮助用户实现基本操作5.access_
微信网页 第三方登录原理详解
09-01
本文主要介绍微信网页 第三方登录原理，这里整理了详细的资料及接口说明和参数说明，有需要的小伙伴可以参考下
第三方登录接口资源
02-17
第三方登录（微信、新浪、QQ）接口文档，包含demo，申请流程，SDK
谈谈第三方App接入微信登录 解读
11-30
接入微信登录： 1、准备工作 1.在微信开放平台https://open.weixin.qq.com/注册成为开发者。 2.在“管理中心”中创建一个移动应用，需“应用名称、简介、及28*28和108*108的PNG图片各一张，且大小不超过300k”,点击下一步，需“应用官网地址，应用签名及包名”等信息，然后即可提交审核。 说明： 应用签名：可在微信开发平台的资源中心》》资源下载》》中下载“签名生成工具”，用户获取已经安装到手机的第三方应用的签名。输入应用包名，即可获得该应用的签名值。 3.提交审核后，在7个工作日内腾讯将给出审核结果。（通常较快，几个小时就可反馈结果） 2、微信登录接入
第三方登录原理探究
devliu的博客
05-03 1140
底层协议 流程梳理 第三方登录的实质 为什么使用第三方登录 第三方登录与本地登录的关联 第三方登录解除授权实践
第三方登录实现原理
热门推荐
坏小哥
06-07 2万+
简单说，OAuth 就是一种授权机制。数据的所有者告诉系统，同意授权第三方应用进入系统，获取这些数据。系统从而产生一个短期的进入令牌（token），用来代替密码，供第三方应用使用。 首先，我们先看一下 底层协议： OAUTH协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用...
oauth2授权码模式——微信第三方登录原理
u012886301的博客
12-20 3942
大部分第三方登录采用的都是oauth2授权码模式，下面我们以微信第三方登录为例，理解和学习授权码模式 oauth2有四种授权模式，授权码模式是最常用的模式 oauth2其实就是一种通用的协议，如果你的应用想要支持这种协议就需要通过代码来实现它 不过也没有谁会从头开始去实现这个协议，各种编程语言已经有现成的框架已经实现了oauth2协议，直接引入框架就可以开发一个支持oauth2协议的服务器了 首先思考一个问题：oauth2授权码模式是为了解决什么问题？ 解决的问题： 方便用户登录，一个普通用户相比于输入号
第三方登录原理---Oauth 2.0
愤怒的皮蛋瘦肉粥的博客
05-27 331
OAuth2是一个关于授权（authorization）的开放网络标准 Oauth2 是指一个应用得到用户的另一个应用 Oauth2 需要理解的名词： Third-party application：第三方应用程序，本文中又称"客户端"（client） 及上面说的App HTTP service：HTTP服务提供商，本文中简称"服务提供商"，即上一节例子中的QQ。 Resource Owner：资源所有者，本文中又称"用户"（user）。 User A...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值