为了让用户登录网站的门槛更低,微信扫一扫登录变得越来越广泛,所以最近加紧赶制的项目中有用到这个功能,此篇文字的出发点基于微信开放平台已经配置好域名(80端口)并且认证成功获得app_id和secret并有权限调用微信的接口。好了,就先谈一谈微信扫码登录的整个流程吧。

  第一步,我们必须得把二维码放在页面上显示。首先普及一下二维码是有失效时间以及失效状态的,一旦你扫过一次二维码或者在某段时间内没有扫描页面上的二维码,该二维码就失效了。OK,微信官网给我们提供两种方式来显示二维码:1.后台发请求返回一个新的页面;2.前端js实例化二维码内嵌在自己的页面上,显然第一种比较适合懒的人(因为微信直接返回一个打包好的页面啊有木有,都不用各种css调样式了),不过在项目中两种都在用,所以就都说明一下。

  1.后台发请求获取微信返回的扫码页面

$redirect_uri="http://你的微信开放平台绑定域名下处理扫码事件的方法";
$redirect_uri=urlencode($redirect_uri);//该回调需要url编码
$appID="你的appid";
$scope="snsapi_login";//写死,微信暂时只支持这个值
//准备向微信发请求
$url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $appID."&redirect_uri=".$redirect_uri."&response_type=code&scope=".$scope."&state=STATE#wechat_redirect";
//请求返回的结果(实际上是个html的字符串)
$result = file_get_contents($url);
//替换图片的src才能显示二维码
$result = str_replace("/connect/qrcode/", "https://open.weixin.qq.com/connect/qrcode/", $result);
return $result; //返回页面

这样子就会返回一个这样的页面,扫描后调用$redirect_uri,

  2.内嵌JS显示:

  这里就是通过js端实例化一个对象即可,首先在<head>标签内添加如下js文件,

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

  其次在html中定义一个div包含二维码,

<div id="login_container"></div>

最后在$(document).ready()内进行实例化: 

$(document).ready(function()
{var obj = new WxLogin({id:"login_container",//div的idappid: "你的appid",scope: "snsapi_login",//写死redirect_uri:encodeURI("你的处理扫码事件的方法") ,state: "",style: "black",//二维码黑白风格        href: "https://某个域名下的css文件"});
});

  注意其中href里指向的css文件必须放在https协议下才能引用的到,不然页面上就是默认样式(显示上是一个比较大的二维码,你无法调节二维码的大小,位置,太痛苦了)。最后部分页面大概长成这样,这里的二维码大概只有140px:

  

  好了,二维码出现在页面上了,接下来我们就要大概的讲讲扫码的逻辑了,整个流程大概分为5步:

  走完这五步你就拿到扫码用户的所有信息了,之后再写上自己需要的的代码逻辑即可(如重定向或者登陆),在代码里的表现形式如下:

//回调
public function codeinfo()
{$code = $_GET["code"];$appid = "你的appid";$secret = "你的secret";if (!empty($code))  //有code
        {//通过code获得 access_token + openid$url="https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . $appid. "&secret=" . $secret . "&code=" . $code . "&grant_type=authorization_code";$jsonResult = file_get_contents($url);$resultArray = json_decode($jsonResult, true);$access_token = $resultArray["access_token"];$openid = $resultArray["openid"];//通过access_token + openid 获得用户所有信息,结果全部存储在$infoArray里,后面再写自己的代码逻辑$infoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" . $access_token . "&openid=" . $openid;$infoResult = file_get_contents($infoUrl);$infoArray = json_decode($infoResult, true);
     } }

  其实写完代码之后就会知道整个流程大概是怎么样的,本质上就是多个微信接口的配合调用,OK,记录Over!

  

转载于:https://www.cnblogs.com/martianShu/p/5947170.html

微信网页扫码登录的实现相关推荐

  1. 微信网页扫码登录与微信公众号授权登录的区别

    最近着手开发了微信网页扫码登录和公众号授权登录收获颇丰,两者的开发很类似.以下是我个人摸索过程中发现的两者的异同: 两者都可以通过微信客户端扫码授权的方式,让第三方页面获得微信用户的一些基本信息(昵称 ...

  2. 微信网页扫码登录和公众号网页授权登录的比较

    最近在做PC二维码扫码登录的功能,总结了一些问题 # 主要区别 二者的主要区别: 差异 PC网页扫码登录 公众号网页授权登录 账号要求 需要开放平台账号创建网站应用 一个认证过的服务号就可以(也可以使 ...

  3. 黄聪:微信网页扫码登录的实现

    为了让用户登录网站的门槛更低,微信扫一扫登录变得越来越广泛,所以最近加紧赶制的项目中有用到这个功能,此篇文字的出发点基于微信开放平台已经配置好域名(80端口)并且认证成功获得app_id和secret ...

  4. 【前端 VUE】VUE 微信网页扫码登录(微信)

    //网页内调用微信扫码功能  官方文档 //首先必须引入微信JS  <script type='text/javascript' src="http://res.wx.qq.com/c ...

  5. 淘宝和微信的扫码登录实现原理

    目录 基本技术原理 扫码登录功能到底是什么样的? 扫码登录功能的完整技术逻辑 1)网页端与服务器的配合逻辑: 2)手机端与服务器的配合逻辑: 3)登录成功时的逻辑: 4)详细的技术原理总结如下图所示: ...

  6. 微信或企业微信实现扫码登录的三种方式

    通过微信或企业微信扫码登录PC管理后台,替代传统的账号.密码登录. 为了完成这个功能,疯狂百度各种扫码登录的技术文章,能实现微信或企业微信扫码登录的方式可以说有三种: 1.注册一个微信资源开放平台账号 ...

  7. IM要做手机扫码登录?先看看微信的扫码登录功能技术原理

    本文原文由作者Amazing10原创发布于公众号业余码农,收录时有改动,感谢原作者的技术分享. 1.引言 某天中午,吃完午饭,摊在自己的躺椅上,想趁吃饱喝足的午后时间静静享受独自的静谧. 干点什么好呢 ...

  8. 微信网页扫码支付(公众号)JAVA实现

    今天我们来说说微信网页扫码支付,这个支付的步骤和微信公众号网页是差不多的,也和微信小程序的步骤是一致的,不过appid是微信公众号的,我自己收集的微信开发文档希望对大家有用: https://blog ...

  9. 微信|QQ扫码登录网页版二维码失效问题解决方案 网站无法访问PC网页版如何解决 安卓软件历史版本下载 FV fooview悬浮球帮助教程

    前言 1. 手机端浏览器登录网页的同时再用微信或者QQ扫码登录出现二维码失效问题如何解决? 2.部分网站无法访问PC网页版如何解决?请看方案 目录 前言 1.方案 2.方案 使用Edge安卓浏览器访问 ...

  10. 利用公众号实现网页扫码登录

    公众号因为有测试号,所以测试起来蛮方便的. 1.先熟悉微信公众号开发文档. 2.首先网页端需要生成临时二维码 例如:https://mp.weixin.qq.com/cgi-bin/showqrcod ...

最新文章

  1. 报名 | 大咖云集,清华方圆系列之大数据分析与可视化报告会
  2. 员工执行力差怎么办?任正非说,抓住这12条,3天打造狼性团队
  3. DPDK — DPDK APP 的指令行参数
  4. mysql 游标循环_mysql for循环遍历 游标用处
  5. 【numpy求和】numpy.sum()求和
  6. Equinox MANIFEST.MF 中文处理 Bug
  7. 南理工OJ-1098 - 字符串问题
  8. liferay开发小结, liferay瘦身一
  9. fooking文档(不定期更新)
  10. 分布式——分布式面试题
  11. 字节跳动后端日常实习一二+hr面面经(已OC)
  12. JavaScript基本第一天总结
  13. 台式计算机是移动设备吗,超台式电脑!手机成中国第一大上网终端
  14. PSGAN——姿态稳健型可感知空间式生成对抗网络论文详细解读与整理
  15. oracle rebuild online,alter index rebuild
  16. 免费且非常实用的PPT模板网站(免费)亲测可用!!
  17. 阿里年薪50WJAVA工程师转大数据学习路线!
  18. 基因注释 InterProScan的三种使用方法
  19. echarts折线图背景线_echarts-设置折线图中折线线条颜色和折线点颜色
  20. python画分布图(hist)等等

热门文章

  1. 每日一篇_启动又报错了The POM for com.xxxx:qgg-core:jar:0.0.1-SNAPSHOT is missing
  2. How to do video broadcast using multicast group?
  3. spring项目接入flyway(一) 背景、快速入门
  4. 矢量网络分析仪是什么?矢量网络分析仪的组成
  5. dede织梦刀具模具类企业网站源码
  6. shell 的大于等于小于等
  7. CSS-设置表格样式
  8. 【Python PIL】用PIL绘制中国象棋棋盘
  9. ArcGis Server10.2 授权文件教程
  10. 我收藏的阿里云盘资源,牛逼!!