js微信扫描二维码登录网站技术原理

微信扫描二维码登录网站是微信开放平台下网站应用的一个界面功能。微信开放平台的网站是https://open.weixin.qq.com

准备工作/即将工作

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

微信OAuth2之前。在微信OAuth2.0授权登录访问前，在微信开放平台注册开发者账号，拥有已获批的网站申请，并获取相应的AppID和AppSecret。申请微信登录并通过审核后，即可开始访问流程。

授权过程描述

微信OAuth2.0授权登录允许微信用户使用微信身份安全登录第三方应用或网站。微信用户授权登录连接微信OAuth2.0的第三方应用后，第三方可以获取用户的界面调用证书(access_token)，通过该证书可以调用微信开放平台授权关系界面，从而获取微信用户的基本开放信息，帮助用户实现基本开放功能。

微信OAuth2.0授权登录目前支持authorization_code模式，适合与服务器进行应用授权。这个模型的整个过程是：

1.1.第三方发起微信授权登录请求。微信用户允许第三方应用授权后，微信会拉起应用或重定向到第三方网站，并带来授权临时账单的代码参数；

2.2.exchange access _ token通过API通过给代码参数添加AppID和AppSecret

3.3.通过access_token调用接口，获取用户的基础数据资源或帮助用户实现基础操作。

获取访问令牌时序图：

步骤1:请求代码

请注意，第三方在使用网站应用授权登录之前已经获得了相应的网页授权范围(范围=snsapi_login)，然后在PC端打开如下链接：https://open.weixin.qq.com/connect/qrconnect? appid=APPIDredirect _ uri=REDIRECT _ URIresponse _ type=codescope=scope estate=STATE #微信_redirect

如果提示“链接无法访问”，请检查参数填写是否有误，例如，redirect_uri的域名与审核时填写的授权域名不一致，或者作用域不是snsapi_login。

参数描述

参数必须指示appid是否是应用程序的唯一标识。redirect_uri是重定向地址，urlencoderresponse _ type是必需的。代码范围是应用程序授权范围，它有多个由逗号(，)分隔的范围。目前，web应用程序只能使用snsapi_login来保持请求和回调的状态。授权后，它将按原样带回给第三方。此参数可用于防止csrf攻击(跨站点请求伪造攻击)。建议第三方自带这个参数，可以设置为简单的随机数加会话来验证和返回指令

在用户允许授权后，它将被重定向到带有代码和状态参数的redirect_uri的URL

重定向uri？代码=代码状态=状态

如果用户禁止授权，重定向后不会带来代码参数，只会带来状态参数

重定向uri？状态=状态

样本请求

登录一号店网站应用

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

一号店开通后会生成状态参数，跳转到https://open.weixin.qq.com/connect/qrconnect? app id=wxbdc 5610 cc 59 c 1631 redirect _ uri=https://passport . yhd.com/微信/callback . doresponse _ type=codescope=snsapi _ loginstate=3d 6 be 0a 4035d 839573 b 04816624 a 415 e #微信_redirect

微信用户使用微信扫描二维码并确认登录后，PC会跳转到

https://passport.yhd.com/wechat/callback.do?代码=CodeState=3d 6be 0a 4035d 839573 b 04816624 a 415 e

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

JS微信登录的主要目的：网站希望用户可以在网站内登录，无需跳转到微信域登录再返回，从而提高微信登录的流畅性和成功率。网站嵌入二维码微信登录JS的实现方法：

第一步：在页面中引入以下JS文件(支持https):

脚本src=' http:http://res.wx.qq.com/connect/zh _ cn/html edition/JS/wxlogin . JS '/脚本步骤2:在需要使用微信登录的地方实例化以下JS对象：

var obj=new WxLogin({ id : ' log in _ container '，appid: ' '，scope: ' '，redirect_uri: ' '，state: ' '，style: ' '，href : ' ' })；参数描述

参数是否必须指示id是显示在第三方页面上的二维码的容器AppID是应用程序的唯一标识符。微信开放平台提交的申请通过审核后，范围为申请授权范围，多个范围之间用逗号(，)隔开。Web应用目前只能填写snsapi_login。redirect_uri是重定向地址，需要UrlEncode状态来保持请求和回调的状态。授权后，将按原样带回给第三方。此参数可用于防止csrf攻击(跨站点请求伪造攻击)。建议第三方自带这个参数，可以设置为简单的随机数加会话进行验证。如果样式不可用，“黑色”和“白色”是可选的，默认为黑色文本描述。详见文档底部的FAQ href无自定义样式链接，第三方可以根据实际需要覆盖默认样式。有关详细信息，请参见文档底部常见问题解答的第2步：通过代码获取access_token

通过代码获取access_token

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPIDsecret=SECRETcode=CODEgrant _ type=authorization _ code

参数描述

参数是否必须注明appid是申请的唯一标识，微信开放平台提交申请审批后获得的秘密是申请密钥AppSecret，微信开放平台提交申请审批后获得的代码是填写第一步获得的代码参数。grant_type是填写授权_代码返回描述

正确返回：

{ ' 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授权用户唯一标识由范围用户授权的范围，并使用逗号(，)分隔错误返回示例：

{“err code”:40029，“err msg”:“无效代码”}

刷新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到期时，用户需要重新授权。

请求方法

获取第一步的代码后，请求以下链接刷新_token:

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPIDgrant _ 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授权用户唯一标识由范围用户授权的范围，并使用逗号(，)分隔错误返回示例：

{“err code”:40030，“err msg”:“refresh _ token”无效}

第三步：通过access_token调用接口

获取access_token后，调用接口，前提是：

1.1.access_token有效，尚未超时；

2.2.微信用户已授权第三方应用账号对应的接口范围。

对于接口范围，可以调用的接口如下：

授权范围接口描述SNSAPI _ base/SNS/oauth 2/access_token交换access_token、refresh_token和授权范围/sns/oauth2/refresh_token的代码，以刷新或续订access _ token供使用/通过sns/auth检查access _ token的有效性。snsapi_userinfo /sns/userinfo获取用户的个人信息，其中snsapi_base属于基础接口。如果应用程序具有其他范围权限，则默认情况下它具有snsapi_base的权限。使用snsapi_base可以使移动网页授权绕过跳转到授权登录页面请求用户授权的动作，直接跳转到带有授权临时账单(代码)的第三方网页，但会使用户授权范围只为snsapi_base，导致无法获取需要用户授权的数据和基本功能。

接口调用方法可以在《微信授权关系接口调用指南》中找到

F.阿q

1.什么是授权临时票据(代码)？

答：第三方通过代码获取access_token是必要的。代码的超时时间为10分钟，一个代码只能成功交换一次access_token，这意味着它将变得无效。代码的临时性和一次性保证了微信授权登录的安全性。第三方可以通过使用https和状态参数来进一步加强自身授权登录的安全性。

2.授权范围是什么？

答：授权范围代表用户授权给第三方的接口权限。第三方应用需要向微信开放平台申请权限使用相应范围后，用户可以按照文档中描述的方式进行授权。用户授权后，获取相应的access_token后即可调用接口。

3.风格字段在网站嵌入二维码微信登录JS码中的作用是什么？

答：第三方页面的颜色风格可能是浅色，也可能是深色。如果第三方页面背景较浅，样式字段应提供‘黑色’的值(或者不提供，黑色为默认值)，对应的微信登录文字样式为黑色。相关影响如下：

如果提供了“白色”的值，相应的文本描述将以白色显示，这适用于深色背景。相关影响如下：

4.href字段在网站嵌入二维码微信登录JS码中的作用是什么？

答：如果第三方觉得微信团队提供的默认样式与自己的页面样式不匹配，可以提供自己的样式文件来覆盖默认样式。比如第三方觉得默认二维码太大，可以提供相关的css样式文件，在href字段填写链接地址

导入对话框。二维码{ width: 200px} impowerBox。title { display: none} impowerBox。信息{ width: 200px} status _ icon { display:none } ImpowerBox。状态{ text-align : center；}相关效果如下：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。