需求:后台需要添加微信扫码登录。
首先需要阅读官方文档,了解大致过程。介绍有两种微信扫码,一是跳转到微信网页生成的二维码进行扫码,二是把二维码内嵌到自己的网站页面。下面微信文档。
https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
准备:
1.appid 开放平台查找
2.redirect_uri 回调链接 跟开放平台配置一致,使用时需要urlEncode处理。用php 处理直接用urlEncode,用JavaScript处理用urlEncode没反应的话就用,encodeURIComponent。
例一,跳转扫码
<?php
$appid = "填写你的APPID";
$redirect_uri = UrlEncode("http://www.baidu.com/login.php");
$data = time();
$state = MD5($data);
//跳转页面
echo "<script>location.href=\"https://open.weixin.qq.com/connect/qrconnect?appid=$appid&redirect_uri=$redirect_uri&response_type=code&scope=snsapi_login&state=$state#wechat_redirect\";</script>";
?>
效果
情形二:把二维码内嵌到网页
<!-- 引入微信扫码登录js文件 -->
<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>
<body>
<!-- 放置二维码的div -->
<div id="login_container"></div>
</body>
<script type="text/javascript">
var obj = new WxLogin({
self_redirect:true,
id:"login_container", //二维码容器id
appid: "wxbdc5610cc59c1631",
scope: "snsapi_login",
redirect_uri: encodeURIComponent("http://"+window.location.host+"/..."),
state: Math.ceil(Math.random()*