为了让用户登录网站的门槛更低,微信扫一扫登录变得越来越广泛,所以最近加紧赶制的项目中有用到这个功能,此篇文字的出发点基于微信开放平台已经配置好域名(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/huangcong/p/11109007.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新文章

  1. 用系统滚动条实现NumericUpDown的原理
  2. 【java开发系列】—— 集合使用方法
  3. 如何成为数据科学家_成为数据科学家需要了解什么
  4. 枚举类型 实现一个enumeration对于类的加工的函数
  5. 五大软件设计原则学习笔记3——Liskov 替换原则
  6. 【前端】【element】el-progress组件使用文档补充——大小调整与数字颜色
  7. Linux 登陆用户时启动 ssh-agent 并在退出时关闭
  8. 蓝桥杯 ADV-95 算法提高 字符串比较
  9. 实时监控Cat之旅~对请求是否正常结束做监控(分布式的消息树)
  10. SANXIN-B01开发板verilog教程V3电子版
  11. BAT54C 二极管是如何工作的?
  12. android 百度输入法表情,百度输入法安卓8.6版本发布,AI输入法成为最懂你的“斗图神器”...
  13. 短信服务商与短信运营商的区别在哪里?
  14. oracle11g 网页账号,oracle11g 创建用户并受权
  15. 华为 Mate8 Emui 5.0 安卓 7.0 root 记录
  16. 企业邮箱怎样申请注册?
  17. SAP MM02主数据维护多语言长文本,丢失空格的解决办法
  18. 计讯物联环保数采仪全系列产品为节能降耗减碳贡献绿色力量
  19. OpenNLP ngram n元语法模型(简介)
  20. HJ88 扑克牌大小

热门文章

  1. 【leetcode刷题笔记】Sqrt(x)
  2. cUrl 强大的文件上传/下载工具
  3. 04-07 接口请求构造
  4. SSM三大框架超详细总结(适合你重新回顾)
  5. ggsci | ggplot2的颜色标度拓展包(1):科研配色风格
  6. 安装mysql需要配置什么软件_软件配置篇-MySQL下载及安装
  7. .net mysql 工作流_一个适合于.NET Core的超轻量级工作流引擎:Workflow-Core
  8. 自从知道了这几个 JavaScript 技巧,下班都变早了!
  9. c++设置一个二维字符组初值_6.8 C++字符数组
  10. mysql 二进制日志大小_mysql二进制日志。