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


Posted in Javascript onDecember 01, 2016

微信扫描二维码登录网站是微信开放平台下网站应用的一种接口实现的功能。微信开放平台的网址是https://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.1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;

2.2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;

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

获取access_token时序图:js微信扫描二维码登录网站技术原理

第一步:请求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" 
}

参数 说明
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.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_in access_token接口调用凭证超时时间,单位(秒)
refresh_token 用户刷新access_token
openid 授权用户唯一标识
scope 用户授权的作用域,使用逗号(,)分隔

错误返回样例:

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

第三步:通过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为默认值),则对应的微信登录文字样式为黑色。相关效果如下:js微信扫描二维码登录网站技术原理js微信扫描二维码登录网站技术原理

若提供"white"值,则对应的文字描述将显示为白色,适合深色背景。相关效果如下:js微信扫描二维码登录网站技术原理js微信扫描二维码登录网站技术原理

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;}

相关效果如下:
js微信扫描二维码登录网站技术原理js微信扫描二维码登录网站技术原理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
jquery下操作HTML控件的实现代码
Jan 12 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
Bootstrap的class样式小结
Dec 01 #Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 #Javascript
AngularJS中的JSONP实例解析
Dec 01 #Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 #Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 #Javascript
实例解析jQuery工具函数
Dec 01 #Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 #Javascript
You might like
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
Cookie 小记
2010/04/01 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
python基础教程之Hello World!
2014/08/29 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
Django如何使用redis作为缓存
2020/05/21 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
大学班长竞选稿
2015/11/20 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫