五分钟内反应回复,平均十分钟解决任何IT技术问题,按难度跟工作量收费!

php怎么实现电脑网站用微信扫码登录:开放者账号、不关注公众号的两个登录版本

疯狂的小程序员 |浏览62次 |售价:0元 |联系博客主
收藏|2022/12/02 17:17

在给出具体的实现代码之前,我们先来分析下微信扫码登录的流程。
首先我们必须要把二维码放在页面上显示出来,二维码是有失效时间以及失效状态的,一旦你扫过一次二维码或者在某段时间内没有扫描页面上的二维码,那么这个二维码也就失效了。微信官网给我们提供了两种方式来显示二维码:
一种是后台发请求返回一个新的页面,另一种是前端js实例化二维码内嵌在自己的页面上。
很显然第一种方式比较简单方便,但是在实际的项目中两种方式都会使用到,既然如此我们就把这两种方式都说明一下。

第一种:后台发请求获取微信返回的扫码页面


$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



微信截图_20221202170943.png



第二种:内嵌JS显示:


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


<script src="https://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的id
        appid: "你的appid",
        scope: "snsapi_login",//写死
        redirect_uri:encodeURI("你的处理扫码事件的方法") ,
        state: "",
        style: "black",//二维码黑白风格        
        href: "https://某个域名下的css文件"
    });
});



实际案例:

微信截图_20221202171601.png

咨询/回复该博客即可获得 2 经验值,咨询/回复被采纳即可获得 2 经验值!
咨询/回复

验证码

  换一个
全部回答(0)
该博客主的其他博客文章
+1
 加载中...