官网文档
网页授权流程分为四步：
- 引导用户进入授权页面同意授权，获取code
- 通过 code 换取网页授权access_token（与基础支持中的access_token不同）（我的需求只需要到第二部）
- 如果需要，开发者可以刷新网页授权access_token，避免过期
- 通过网页授权access_token和 openid 获取用户基本信息（支持 UnionID 机制）
前提
-
已认证服务号，默认拥有 scope 参数中的snsapi_base和snsapi_userinfo 权限
-
回调域名授权
第一步：用户同意授权，获取code
在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（已认证服务号，默认拥有 scope 参数中的snsapi_base和snsapi_userinfo 权限），引导关注者打开如下页面：
若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有 scope 参数对应的授权作用域权限。
尤其注意：由于授权操作安全等级较高，所以在发起授权请求时，微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问
参考链接(请在微信客户端中打开此链接体验)##
尤其注意：跳转回调redirect_uri，应当使用 https 链接来确保授权 code 的安全性。
如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
<meta name='apple-mobile-web-app-capable' content='yes'>
<meta name='format-detection' content='telephone=no' />
<title>授权测试</title>
<script src='/js/jq.vue.js'></script>
<style>
html {
background-color: #F1F1F1;
}
</style>
</head>
<body>
<section id='app'>
<div style="margin: 20px;font-size:20px;" @click="getOpenid">微信授权获取用户id</div>
<div style="margin: 20px;font-size:20px;" @click="getUserid">支付宝授权获取用户id</div>
<div style="margin: 20px;display: flex;flex-direction: column;justify-content: flex-start" >
<input v-model="openid" style="margin: 10px;line-height: 30px;">
<input v-model="userid" style="margin: 10px;line-height: 30px;">
</div>
</section>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
appid: "wxsfsdf72d1a07badd5", //自己的 公众号 appid
openid: "",
userid: ""
},
methods: {
getOpenid() {
let uri = "https://testapp.hyaomall.com//index.php/Template/Zhanganpingtest/test_pay"; //重定向回调地址
let url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+ this.appid+"&redirect_uri=" + uri+"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
const querystring = this.getQueryString();
let code = querystring.code;
if(!code){
location.href = url;
alert(url);
}else{
$.ajax({
type: 'post',
url: "/index.php/Data/Testdata/getQuth", //后台请求路径 获取oppid
data: {
"code": code
},
dataType: "json",
success: function (data) {
alert(JSON.stringify(data));
},
error: function (data) {
alert(JSON.stringify(data));
}
});
}
},
/**
* url參數截取
* @returns {{}}
*/
getQueryString() {
const url = location.search;
const rs = {}
if(url.indexOf('?') === 0){
const querystring = url.substr(1);
const kvArr = querystring.split('&');
kvArr.forEach(item => {
const temp = item.split('=')
const key = temp[0];
const val = temp[1];
rs[key] = val
})
}
return rs;
},
getUserid(){
}
}
});
</script>
</html>
PHP 后台代码
public function getQuth(){
$code = trim(I ('post.code' ));//code
//公众号id
$appid = "wx3e3d72d1a07wsesa";
//公众号密钥
$appsecret = 'c7b2a1951bf1b59398ddsafe890';
$oauth2Url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appid&secret=$appsecret&code=$code&grant_type=authorization_code";
$oauth2 = $this->getJson($oauth2Url);
echo json_encode($oauth2);
}
private function getJson($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
return json_decode($output, true);
}
效果演示 （上传不了视频，配图了）
在微信客户端打开
重定向回调地址（这里通过截取回调地址携带的code）
code传入后台进行获取token 以及 openid
