第三方网站微信扫微信扫码二维码登录录的功能是怎么实现的

微信网页PC端登录扫二维码登录写的控制器 - ThinkPHP框架
最近搞得PC端扫二维码登录,写了个控制器,把方法和注意事项都整理了一下,给大家共同学习下。先说步骤吧:
1.注册微信开放平台https://open.,一定要清楚微信开放平台和微信公众平台是分别独立的,不能共用。
2.登录进入——管理中心,网站应用,创建网站应用。填写申请,企业还要盖章,然后设置域名,最后交300元保护费。成功通过验证。获得appid和appSecret两个参数。
3.现在可以在web端里写登录控制器了。
4.微信网站登录的文档在https://open./cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open&token=41ab5f757248bbbdcc2aad1a6d52b49fdc19579e&lang=zh_CN。
5.微信登录请求,其实你可以当成是个url跳转。https://open./connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
参数 是否必须 说明
appid 是 应用唯一标识
redirect_uri 是 重定向地址,需要进行UrlEncode
response_type 是 填code
scope 是 应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可
state 否 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验
把appid参数传给开放平台。链接页面会显示一个二维码。
6.用户扫码二维码,扫码成功后,会跳转回你传的域名地址。
同时域名后面会带有code和state参数。这个code则是我们需要拿到的钥匙
redirect_uri?code=CODE&state=STATE
7.在redirect_uri跳转的页面或者控制器中,接收code值
code每次会生成一个,用后即会销毁,也就是你不能不停跳转。
8.通过appid、appSecret还有code值,请求open的access_token接口,获得access_token。
&access_token&:&ACCESS_TOKEN&,
&expires_in&:7200,
&refresh_token&:&REFRESH_TOKEN&,
&openid&:&OPENID&,
&scope&:&SCOPE&,
&unionid&: &o6_bmasdasdsad6_2sgVt7hMZOPfL&
access_token 接口调用凭证
expires_in access_token接口调用凭证超时时间,单位(秒)
refresh_token 用户刷新access_token
openid 授权用户唯一标识
scope 用户授权的作用域,使用逗号(,)分隔
unionid 当且仅当该网站应用已获得该用户的userinfo授权时,才会出现该字段。
这里解释一下,access_token是接口凭证,请求接口需要带上,时间为2个小时。openid是获取用户信息的参数,就如username。而unionid则是uid,用户的唯一ID。
9.拿到token和openid后,可以通过UserInfo接口获得用户数据。https://api./sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
正确的Json返回结果:
&openid&:&OPENID&,
&nickname&:&NICKNAME&,
&province&:&PROVINCE&,
&city&:&CITY&,
&country&:&COUNTRY&,
&headimgurl&: &/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0&,
&privilege&:[
&PRIVILEGE1&,
&PRIVILEGE2&
&unionid&: & o6_bmasdasdsad6_2sgVt7hMZOPfL&
10.基本上流程就是这样。
流程完了就描述下问题。
1.如果第一步跳转到微信接口时,出现“scope参数错误”,说明appid错误或者你没交保护费。用微信公众号的appid没用
2.请求token的时候,需要通过cURL来抓取,CURL抓取时普遍会出现抓取不到的问题,具体没用深究,估计是https的抓取方式和http不一样,写了个httpGet方法实现了抓取,抓取后内容为json数据,需要decode一下转化为数组
3.为了实现与手机端用户一致性,我们需要记录openid以及unionid。公众号与开放平台的openid是不一样的,唯一相同的unionid。但是这两个openid都能获取到用户信息。我建议除了用户表以外,加一个第三方登录表,字段为 id,uid,type,openid,unionid,refresh_token。type 1是微信端,2是PC端。unionid存在时,就不需要再创建一条用户信息。信息获取后创建session或者cookie
4.为防止csrf跨站请求,state我加入了一个随机数,这个随机数存到session中,当用户扫码确认后,返回时,如果不一致即会被认为跨站请求伪造攻击
ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。只需一步,快速开始
后使用快捷导航没有帐号?
所属分类: &
本版块为微信公众号开发教程与公众号开发相关技术分享板块,技术提问请到其他对应的问答板块发帖:)
不用申请微信开放平台实现网页扫描二维码登录网站
查看: 2820|回复: 4
& 主题帖子积分
略知一二, 积分 498, 距离下一级还需 102 积分
略知一二, 积分 498, 距离下一级还需 102 积分
如题,最近需要开发一个这样的功能,度娘了很久,度娘出来的信息基本上都大同小异,通过PC端通过微信扫描二维码登陆(微信开发平台其实有相对应接口,申请地址:),个人觉得很麻烦,同时需要纪录两次的appid等信息,仔细琢磨还是搞定了,直接上代码吧! 前提:需要微信用户提前关注公众号 <font color="#,首页在公共文件中设置好微信公众号的appid以及appsecret,这里我以thinkphp为例,config.php文件中配置如下
return array(
'token'=&'token',
'appid'=&'这里填写微信公众平台提供的应用ID',
'appsecret'=&'这里填写32位微信公众平台提供的密钥',
) 复制代码<font color="#,通过公众平台接口获取access_token( “”),在common文件夹下面新建一个function.php 公共函数获取(也可以在实时使用页面中获取)
&?php
* @param string $token 手动指定access_token,非必要情况不建议用
function get_access_token($token=''){
& & & & if ($token) { //手动指定token,优先使用
& & & & & & & & $access_token = $
& & & & & & & & return $access_
& & & & $url = &https://api./cgi-bin/token?grant_type=client_credential&appid=.&C('appid')&.&secret=&.C('appsecret');
& & & & $result = http_get($url);
& & & & if ($result){
& & & & & & & & $json = json_decode($result,true);
& & & & if (!$json || isset($json['errcode'])) {
& & & & & & & & $this-&errCode = $json['errcode'];
& & & & & & & & $this-&errMsg = $json['errmsg'];
& & & & & & & &
& & & & & & & & $access_token = $json['access_token'];
& & & & & & & & $expire = $json['expires_in'] ? intval($json['expires_in'])-100 : 3600;
& & & & & & & & S($authname,$access_token,$expire);
& & & & & & & & return $access_
function http_get($url){
& & & & $oCurl = curl_init();
& & & & if(stripos($url,&https://&)!==FALSE){
& & & & & & & & curl_setopt($oCurl, CURLOPT_SSL_VERIFYPEER, FALSE);
& & & & & & & & curl_setopt($oCurl, CURLOPT_SSL_VERIFYHOST, FALSE);
& & & & & & & & curl_setopt($oCurl, CURLOPT_SSLVERSION, 1);
& & & & & & & & //CURL_SSLVERSION_TLSv1
& & & & curl_setopt($oCurl, CURLOPT_URL, $url);
& & & & curl_setopt($oCurl, CURLOPT_RETURNTRANSFER, 1 );
& & & & $sContent = curl_exec($oCurl);
& & & & $aStatus = curl_getinfo($oCurl);
& & & & curl_close($oCurl);
& & & & if(intval($aStatus[&http_code&])==200){
& & & & & & & & return $sC
& & & & }else{
& & & & & & & &
} 复制代码<font color="#,生成二维码
&?php
& & & & // $qrcodeID 为传递参数 @qrcodeType 二维码类型&&QR_SCENE 为临时二维码
& & & & public function QrcodeCreate($qrcodeID, $qrcodeType = 'QR_SCENE') {
& & & & & & & & $tempJson = '{&expire_seconds&: 2592000, &action_name&: &' . $qrcodeType . '&, &action_info&: {&scene&: {&scene_id&: ' . $qrcodeID . '}}}';
& & & & & & & & $access_token =get_access_token();
& & & & & & & & $url = &https://api./cgi-bin/qrcode/create?access_token=& . $access_
& & & & & & & & // post 传递参数
& & & & & & & & $tempArr = json_decode ( $this-&JsonPost ( $url, $tempJson ), true );
& & & & & & & & if (@array_key_exists ( 'ticket', $tempArr )) {
& & & & & & & & & & & & return 'https://mp./cgi-bin/showqrcode?ticket=' . $tempArr ['ticket'];
& & & & & & & & } else {
& & & & & & & & & & & & $this-&error = 'qrcode_error';
& & & & & & & & }
& & & & private function JsonPost($url, $jsonData) {
& & & & & & & & $curl = curl_init ();
& & & & & & & & curl_setopt ( $curl, CURLOPT_URL, $url );
& & & & & & & & curl_setopt ( $curl, CURLOPT_SSL_VERIFYPEER, FALSE );
& & & & & & & & curl_setopt ( $curl, CURLOPT_SSL_VERIFYHOST, FALSE );
& & & & & & & & curl_setopt ( $curl, CURLOPT_POST, 1 );
& & & & & & & & curl_setopt ( $curl, CURLOPT_POSTFIELDS, $jsonData );
& & & & & & & & curl_setopt ( $curl, CURLOPT_TIMEOUT, 30 );
& & & & & & & & curl_setopt ( $curl, CURLOPT_RETURNTRANSFER, 1 );
& & & & & & & & $result = curl_exec ( $curl );
& & & & & & & & if (curl_errno ( $curl )) {
& & & & & & & & & & & & $this-&ErrorLogger ( 'curl falied. Error Info: ' . curl_error ( $curl ) ); } curl_close ( $curl );
& & & & & & & & & & & & return $
& & & & & & & & }
& & & & }复制代码<font color="#,通过用户扫描二维码跳转到公众号,然后再通过()公众号提供的接口获取到当前微信用户的openid,获取到的数据跟数据库相匹配就可以实现扫码登录的功能啦 以上纯属个人开发操作流程,文字写的比较糙,基本流程是这样实现,欢迎大家一起探讨
关注我的同学(只显示前32名)
& 主题帖子积分
新人求带, 积分 58, 距离下一级还需 242 积分
新人求带, 积分 58, 距离下一级还需 242 积分
微信登录不用接入开放平台?那必须得好好看一番了,先谢楼主分享
& 主题帖子积分
新人求带, 积分 170, 距离下一级还需 130 积分
新人求带, 积分 170, 距离下一级还需 130 积分
谢谢。新手在研究做开发。
& 主题帖子积分
新人求带, 积分 148, 距离下一级还需 152 积分
新人求带, 积分 148, 距离下一级还需 152 积分
激动人心,无法言表!
& 主题帖子积分
新人求带, 积分 224, 距离下一级还需 76 积分
新人求带, 积分 224, 距离下一级还需 76 积分
激动人心,无法言表!
最接地气、最有诚意的 iWeb峰会(HTML5峰会)将于8月12日在北京国际会议中心隆重开启。
<是专业的第三方微信开发者平台,为生态而生。
本站为第三方微信开发者平台,非腾讯官方网站。
天津市滨海新区中新生态城中成大道生态建设公寓9号楼3层301
欢迎来这里一起喝喝茶,聊聊你的产品。
微信公众号gongzhongkaifa
工作日12小时内回复。
工作日12小时内回复。js微信扫描二维码登录网站技术原理
作者:方倍工作室
字体:[ ] 类型:转载 时间:
这篇文章主要介绍了js微信扫描二维码登录网站技术原理,具有一定的参考价值,有需要的可以了解一下。
微信扫描二维码登录网站是微信开放平台下网站应用的一种接口实现的功能。微信开放平台的网址是
网站应用微信登录是基于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时序图:
第一步:请求CODE
第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:
若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。
应用唯一标识
redirect_uri
重定向地址,需要进行UrlEncode
response_type
应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可
用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验
用户允许授权后,将会重定向到redirect_uri的网址上,并且带上code和state参数
redirect_uri&#63;code=CODE&state=STATE
若用户禁止授权,则重定向后不会带上code参数,仅会带上state参数
redirect_uri&#63;state=STATE
登录一号店网站应用
打开后,一号店会生成state参数,跳转到
微信用户使用微信扫描二维码并且确认登录后,PC端会跳转到
为了满足网站更定制化的需求,我们还提供了第二种获取code的方式,支持网站将微信登录二维码内嵌到自己页面中,用户使用微信扫码授权后通过JS将code返回给网站。
JS微信登录主要用途:网站希望用户在网站内就能完成登录,无需跳转到微信域下登录后再返回,提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录JS实现办法:
步骤1:在页面中先引入如下JS文件(支持https):
&script src="http://res./connect/zh_CN/htmledition/js/wxLogin.js"&&/script&
步骤2:在需要使用微信登录的地方实例以下JS对象:
var obj = new WxLogin({
id:"login_container",
appid: "",
scope: "",
redirect_uri: "",
state: "",
style: "",
第三方页面显示二维码的容器id
应用唯一标识,在微信开放平台提交应用审核通过后获得
应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi_login即可
redirect_uri
重定向地址,需要进行UrlEncode
用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验
提供"black"、"white"可选,默认为黑色文字描述。详见文档底部FAQ
自定义样式链接,第三方可根据实际需求覆盖默认样式。详见文档底部FAQ
第二步:通过code获取access_token
通过code获取access_token
应用唯一标识,在微信开放平台提交应用审核通过后获得
应用密钥AppSecret,在微信开放平台提交应用审核通过后获得
填写第一步获取的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
授权用户唯一标识
用户授权的作用域,使用逗号(,)分隔
错误返回样例:
{"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:
应用唯一标识
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
授权用户唯一标识
用户授权的作用域,使用逗号(,)分隔
错误返回样例:
{"errcode":40030,"errmsg":"invalid refresh_token"}
第三步:通过access_token调用接口
获取access_token后,进行接口调用,有以下前提:
1.1. access_token有效且未超时;
2.2. 微信用户已授权给第三方应用帐号相应接口作用域(scope)。
对于接口作用域(scope),能调用的接口有以下:
snsapi_base
/sns/oauth2/access_token
通过code换取access_token、refresh_token和已授权scope
/sns/oauth2/refresh_token
刷新或续期access_token使用
检查access_token有效性
snsapi_userinfo
/sns/userinfo
获取用户个人信息
其中snsapi_base属于基础接口,若应用已拥有其它scope权限,则默认拥有snsapi_base的权限。使用snsapi_base可以让移动端网页授权绕过跳转授权登录页请求用户授权的动作,直接跳转第三方网页带上授权临时票据(code),但会使得用户已授权作用域(scope)仅为snsapi_base,从而导致无法获取到需要用户授权才允许获得的数据和基础功能。
接口调用方法可查阅《》
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: 200}
impowerBox .title {display:}
impowerBox .info {width: 200}
status_icon {display:none}
impowerBox .status {text-align:}
相关效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具微信开发的扫码登录处理的步骤详解-微信开发-PHP中文网QQ群微信公众号微信开发的扫码登录处理的步骤详解在现今很多网站里面,都使用了微信开放平台的扫码登录认证处理,这样做相当于把身份认证交给较为权威的第三方进行认证,在应用网站里面可以不需要存储用户的密码了。本篇介绍如何基于微信开放平台的扫码进行网站的登陆处理。1、开放平台的认证要使用网站的扫码登录处理,就需要先进行微信开放平台帐号的开发者资质认证,提交相关的资料,以及交付每年300元的认证费用。认证后,建立相关的网站应用后,就有相关的APPID和APPSecret了,这些关键的参数就可以用来获取相关的用户信息了。网站应用的应用详情界面如下所示。整个开放平台感觉没有多少东西,不过需要收费认证才能使用这些功能,感觉不是很爽。我们采用的扫码登录,需要通过开放平台获取用户的信息,因此还需要设置获取用户基本信息接口的域名,否则无法获取信息,从而会导致重定向出错。设置域名在【接口权限】【网页账号】【网页授权获取用户基本信息】的修改入口,如下图所示。然后在弹出的对话框里面输入授权回调的域名即可。 这样设置就可以确保获取到用户信息了。2、扫码登录的说明和具体使用网站应用微信登录是基于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时序图: 从上图我们可以大概了解整个扫码登陆的处理过程。3、扫码登录的各个步骤处理1)用户身份的绑定为了实现二维码扫码登录,我们需要在现有系统里面绑定用户的微信,这样才能在用户扫码的时候,判断用户的身份从而实现自动登录的过程。我们可以在用户管理里面进行统一设置,也可以在常规用户登录(用户名+密码)后进行设置,这个主要看我们是否需要保留用户名密码登陆这种方式。例如可以在用户管理里面统一绑定,也就是在创建用户的时候,让用户绑定下微信,获取微信的唯一标识。也可以在保留用户名密码的登陆方式外,让用户登陆系统后自行进行绑定微信即可。上面的界面,就是在一个页面里面弹出一个层,然后请求二维码显示即可,如下界面代码所示。
&p id=&pWechat& class=&easyui-dialog& style=&width:450height:350padding:10px 20px&
closed=&true& resizable=&true& modal=&true& iconcls=&icon-setting&&
&h4&扫描用户二维码,进行绑定&/h4&
&p align=&center&&
&img id=&imgQRcode& alt=&使用微信扫码进行绑定& style=&height:200width:auto& /&
&p align=&right&&
&a href=&javascript:void(0)& class=&easyui-linkbutton& iconcls=&icon-cancel& onclick=&javascript: $(&#39;#pWechat&#39;).dialog(&#39;close&#39;)&&关闭&/a&
&/p&上面的层在打开的时候,我们使用JS来动态获取二维码进行显示,具体JS代码如下所示。
//绑定微信登陆
function BindWechat() {
var url = &/H5/BindWechat?id=@Session[&UserID&]&;
url = encodeURIComponent(url);
$(&#imgQRcode&).attr(&src&, &/H5/QR?url=& + url);
//打开绑定窗口
$(&#pWechat&).dialog(&#39;open&#39;).dialog(&#39;setTitle&#39;, &#39;使用微信扫码进行绑定&#39;);
}上面的JS只是做前端的数据请求和显示,具体的QR动作Action其实就是生成扫描二维码的过程,这个二维码其实就是采用通用的方式,来构建一个指向我们绑定账号的地址,从而实现我们绑定账号的判断,二维码的生成过程如下所示。
/// &summary&
/// 转换二维码连接为图片格式
/// &/summary&
/// &param name=&url&&二维码连接&/param&
/// &returns&&/returns&
public ActionResult QR(string url)
//初始化二维码生成工具
QRCodeEncoder qrCodeEncoder = new QRCodeEncoder();
qrCodeEncoder.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.BYTE;
qrCodeEncoder.QRCodeErrorCorrect = QRCodeEncoder.ERROR_CORRECTION.M;
qrCodeEncoder.QRCodeVersion = 0;
qrCodeEncoder.QRCodeScale = 4;
//将字符串生成二维码图片
var image = qrCodeEncoder.Encode(url, Encoding.Default);
//保存为PNG到内存流
MemoryStream ms = new MemoryStream();
image.Save(ms, ImageFormat.Png);
image.Dispose();
return File(ms.ToArray(), &image/Png&);
}为了实现用户的绑定,我们需要获取当前用户的身份信息,因此需要在BindWeChat的操作里面做一个转向处理,如下接口所示。
/// &summary&
/// 生成绑定微信的地址
/// &/summary&
/// &returns&&/returns&
public ActionResult BindWechat()这个函数处理里面,我们需要重新定向处理,我们把它定向到BindAccount函数里面,方便获取用户的openid和其他必要的信息。另外我们基于微信开放平台的应用,建立了一个和微信账号信息的联系,因此创建数据库信息如下所示。也就是一个具体的开放平台应用对应着一个具体的微信账号,这样我们就可以充分利用配置进行处理了。上面提到的BindAccount的处理的逻辑就是获取必要的信息,然后在数据库层面对身份信息进行验证,具体代码如下所示。
/// &summary&
/// 绑定用户微信号
/// &/summary&
/// &param name=&id&&账号ID&/param&
/// &returns&&/returns&
public ActionResult BindAccount()
WebAppInfo appInfo = GetWebApp(ConfigData.WebAppId);
AccountInfo accountInfo = GetAccount(appInfo.AccountNo);
var htResult = GetOpenIdAndUnionId(accountInfo.UniteAppId, accountInfo.UniteAppSecret);//存储openid方便使用
string openid = htResult[&openid&].ToString();
var unionid = htResult[&unionid&].ToString();
var userid = Request.QueryString[&id&];
var state = Request.QueryString[&state&];
if (!string.IsNullOrEmpty(openid) && !string.IsNullOrEmpty(userid))
CommonResult result = BLLFactory&User&.Instance.BindUser(openid, unionid, userid.ToInt32());
if (result.Success)
return BindSuccess();
return BindFail();
throw new WeixinException(&无法获取openid& + string.Format(&, openid:{0}, userid:{1}&, openid, userid));
}在绑定的过程,我们需要考虑绑定正确账号,重复绑定其他账号,无效绑定几种情况,如果成功绑定正确账号(可多次处理结果一样),那么得到界面如下所示(这个界面的样式采用了weui的样式)。
2)用户的扫码登录处理上面绑定了账号后,就可以通过扫码进行登录了,扫码回调的时候我们有自己的判断处理,扫码界面如下所示(我们在保留用户名密码登陆的方式外,增加了一个扫码登录的处理)。如果是Bootstrap的界面效果如果是EasyUI的界面效果这个和前面的二维码显示规则差不多,不过他们的连接地址是不同的,这个地方用到了开放平台的接口,也就是我们前面提到开放平台认证的接口了。上面的扫码登录的界面代码如下所示。
&!--二维码扫描登陆的界面层--&
&p id=&pWechat& class=&easyui-dialog& style=&width:550height:500padding:10px 20px&
closed=&true& resizable=&true& modal=&true& iconcls=&icon-setting&&
&p id=&login_container& align=&center&&
&p align=&right&&
&a href=&javascript:void(0)& class=&easyui-linkbutton& iconcls=&icon-cancel& onclick=&javascript: $(&#39;#pWechat&#39;).dialog(&#39;close&#39;)&&关闭&/a&
&/p&上面代码需要引入JS文件,并使用微信JSSDK的API进行显示的。
&!--使用微信扫码进行登陆--&
&script src=&http://res./connect/zh_CN/htmledition/js/wxLogin.js&&&/script&
&script language=&javascript&&
function OpenJSLogin() {
var obj = new WxLogin({
id: &login_container&,
appid: &@ViewBag.appid&,
scope: &snsapi_login&,
redirect_uri: &@ViewBag.redirect_uri&,
state: &@ViewBag.state&,
style: &black&,
href: &.impowerBox .qrcode {width: 200}&
//打开绑定窗口
$(&#pWechat&).dialog(&#39;open&#39;).dialog(&#39;setTitle&#39;, &#39;使用微信扫码进行登陆&#39;);
&/script&这个里面的参数,如APPID就是来源我们认证后的开放平台参数。这些信息我们在MVC控制器后面获取后绑定在ViewBag,方便界面前端的使用。
//使用JSLogin登陆
WebAppInfo appInfo = BLLFactory&WebApp&.Instance.FindByID(ConfigData.WebAppId);
ArgumentValidation.CheckForNullReference(appInfo, &Web应用程序appInfo&);
if (appInfo != null)
ViewBag.appid = appInfo.OpenAppID;
ViewBag.redirect_uri = appInfo.LoginCallBackU
ViewBag.state = ConfigData.AuthS
}其中的redirect_uri是通过数据库获取的LoginCallBackUrl地址,这个地址类似如下格式:/H5/callback?uid=iqidiSoftware也就是我们在开放平台处理返回后进行的回调处理。通过开放平台的APPID和APPSecret,我们可以获取到对应的接口调用凭证,然后根据接口凭证,以及openid,获得用户的公众平台统一的UnionID,这个标识是我们用户的唯一标识,代码如下所示。
var result = baseApi.GetAuthToken(appid, appsecret, code);
if (result != null && !string.IsNullOrEmpty(result.openid))
openid = result.
var unionResult = baseApi.GetSnsapiUserInfo(result.access_token, result.openid);
ht.Add(&openid&, openid);
ht.Add(&unionid&, unionResult != null ? unionResult.unionid : &&);
}有了unionid我们就可以根据这个标识在我们的用户数据库里面查找对应的用户,如下代码所示。
//开放平台的OpenID,不是公众号的OpenID,需要转换为unionid
if (!string.IsNullOrEmpty(openid) && !string.IsNullOrEmpty(unionid))
UserInfo userInfo = BLLFactory&User&.Instance.FindByUnionId(unionid);然后判断我们去到的用户信息是否正确,如下代码所示
if (userInfo != null)
CommonResult loginResult = CheckLogin(userInfo.Name);
if (!loginResult.Success)
(string.Format(&用户登陆不成功,{0}&, loginResult.ErrorMessage));
//登陆成功后的重定向地址
var url = appInfo.HomeU
return Redirect(url);
}如果不成功,那么我们定向到指定的界面即可。
//如不成功,最后都统一提示信息
ViewBag.Error = &获取信息失败,登陆错误&;
return View(&LoginError&);如果我们登陆成功后,需要设置一些Session信息或者Cookie信息,那么就可以通过CheckLogin函数进行处理即可。以上就是我们结合微信开放平台实现微信扫码登录的过程,其中整个过程就是用到了下面几个过程。1)使用JSSDK的脚本实现扫码获取codeJS微信登录主要用途:网站希望用户在网站内就能完成登录,无需跳转到微信域下登录后再返回,提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录JS实现办法:步骤1:在页面中先引入如下JS文件(支持https):&script src=&http://res./connect/zh_CN/htmledition/js/wxLogin.js&&&/script&步骤2:在需要使用微信登录的地方实例以下JS对象:
var obj = new WxLogin({
id:&login_container&,
appid: &&,
scope: &&,
redirect_uri: &&,
state: &&,
style: &&,
});2) 第二步:通过code获取access_token通过code获取access_tokenapi./sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code3)第三步:通过access_token调用接口获取access_token后,进行接口调用,对于接口作用域(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,从而导致无法获取到需要用户授权才允许获得的数据和基础功能。4)获取信息在回调界面中进行登录前处理通过上面接口,我们可以获得相应的用户身份信息,因此可以结合我们用户数据库进行用户身份的认定和处理,并设置必要的Session或者Cookie信息等,最后定位到我们的应用主界面即可。以上就是微信开发的扫码登录处理的步骤详解的详细内容,更多请关注php中文网其它相关文章!共3篇589点赞收藏分享:.&猜你喜欢12345678910
PHP中文网:独家原创,永久免费的在线,php技术学习阵地!
All Rights Reserved | 皖B2-QQ群:关注微信公众号}

我要回帖

更多关于 解封微信扫二维码登录 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信