|
本帖最后由 周大胖子 于 2022-7-5 14:55 编辑
我的血泪史啊,
先提一个 坑爹的点: 注意事项: 拿完网页微信配置后,比如说获取微信收货地址,在调试器中就会报错、必须在真实环境中测 才可以正常运行。
第一步 单纯在该网页中获取微信授权
这就是获取code 别问我啥是CODE 我也不晓得 ,但是存起来用就可以获取到用户的一些信息
1.1 判断是不是微信浏览器
function is_weixin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { return false; }
}
if (is_weixin()) {
// console.log('这是微信浏览器')
} else {
// console.log('不是')
}
1.2 获取授权的code 利用code 获取openid 只能获取一次
- let appid = "***"; //微信APPid
- let local = window.location.href;
- let code = getUrlCode().code; //是否存在code
- if (code == null || code === "") {
-
- //不存在就打开上面的地址进行授权
- window.location.href =
- "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
- appid +
- "&redirect_uri=" +
- encodeURIComponent(local) +
- "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
-
- } else {
-
- console.log(code) // 这就是获取到了code
-
- }
- function getUrlCode() {
- // 截取url中的code方法
- var url = location.search;
- var theRequest = new Object();
- if (url.indexOf("?") != -1) {
- var str = url.substr(1);
- var strs = str.split("&");
- for (var i = 0; i < strs.length; i++) {
- theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
- }
- }
- console.log(theRequest);
- return theRequest;
- }
复制代码
第二步 获取用户的openid 利用code 获取openid 只能获取一次,code 不能重复利用
这是一个前后台配合的操作 :
2.1 前台把code 传给 后台 ,后台向微信发出请求 获得 结果
前台简单的一个AJAX 就可以 例如
- api('api/home/use/getwx', {'code': localStorage.getItem('wxcode')}, 'GET').then((e) => {
- // console.log(e)
- if (e.status == 200) {
- $("input[name=wxid]").val(e.data.data.openid);
-
- }
- });
复制代码
2.2 后台请求微信token,并把需要的值传回给前台
- // 根据CODE 获取 access_token 和 用户信息
- public function getwx( Request $request )
- {
- if(!$request->param('code')){
- return app('json')->fail('没收到code');
- }
- $code = $request->param('code');
- $timeout=array(
- 'https'=>array(
- 'timeout'=>5000
- )
- );
- $ctx=stream_context_create($timeout);
- $text=file_get_contents('https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx79d8025aa45db24e&secret=ec81fc6d2381da603d64af2e3f6d9272&code='.$code.'&grant_type=authorization_code',0,$ctx);
-
- $m = array(
- 'data'=> json_decode($text)
- );
- $text = json_decode($text);
- Cache::set('wxtoken', $text->access_token ,3600);
-
- return app('json')->success( $m );
- }
-
复制代码
第三步 获取调用支付、获取地址等功能
3.1 首先明白一个事情, 要想调用微信的API 就需要 在当前页面 获取他的签名 ,
3.1.1 获取签名在前台, 要获取签名 就需要引入微信的文件,才能使用 wx.什么什么
- <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
复制代码
3.1.2 然后直接发起请求,并且把 当前页面的链接传到后台 [ 这里其实有个问题就是关于 code获取时的链接地址 后面有个= 后面还有别的什么,我个人不喜欢,所以之前把code 存在了前端的缓存中,然后每次刷新页面除了读url 中的code, 还读缓存中是否有没过期的code 。有效期两小时 ,这样我就可以保证URL的纯净,等于把授权的code 藏起来了 ]
- // 获取微信的配置
- function weixinConfigFun(){
- api('api/home/use/getSignature', {
- 'url': location.href
- }, 'GET').then((e) => {
- // console.log(e)
- if (e.status == 200){
- // alert(1)
- wx.config({
- debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
- appId: e.data.appId, // 必填,公众号的唯一标识
- timestamp: e.data.timestamp, // 必填,生成签名的时间戳
- nonceStr: e.data.nonceStr, // 必填,生成签名的随机串
- signature: e.data.signature,// 必填,签名
- jsApiList: [
- 'editAddress',
- 'checkJsApi',
- 'openAddress',
- ] // 必填,需要使用的 JS 接口列表
- // “openProductViewWithPid”,“batchAddCard”,“chooseCard”,“batchViewCard”,“editAddress”,“checkJsApi”
- });
-
- wx.openAddress({
- success: function (res) {
- console.log(res)
- }
- });
- }
- });
-
- }
-
复制代码
注意 只要配置成功,后面的API调用在微信开发者工具中 很可能出问题,建议真机尝试
3.2 PHP 获取微信的签名 配置 注意配置获取 直接访问 getSignature
-
- // 获取微信的access_token
- public function getWxAccessToekn(){
- if(Cache::get('wxtoken')){
- return Cache::get('wxtoken');
- }else{
-
- $timeout=array(
- 'https'=>array(
- 'timeout'=>5000
- )
- );
- $ctx=stream_context_create($timeout);
- // $text=file_get_contents('https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx79d8025aa45db24e&secret=ec81fc6d2381da603d64af2e3f6d9272&code='.$code.'&grant_type=authorization_code',0,$ctx);
- $text=file_get_contents('https://api.weixin.qq.com/cgi-bin/token?appid=wx79d8025aa45db24e&secret=ec81fc6d2381da603d64af2e3f6d9272&&grant_type=client_credential',0,$ctx);
-
- $text = json_decode($text);
- Cache::set('wxtoken', $text->access_token ,3600);
- return Cache::get('wxtoken');
- }
- }
-
- /**
- * 微信签名获取
- */
- public function getSignature( Request $request )
- {
- // 先判断cache
- $jsapiTicket =$this->getTicket() ;
-
- $nonceStr = $this->createNonceStr();
-
- $timestamp = time();
-
- // var test = window.location.href; 这样就可以获取当前页面url,最近我写个微信功能也这样取的。[我的想法是前端的URL当前页,传给后台]
- // 签名用的url必须是调用JS接口页面的完整URL”
- // 注意 URL 一定要动态获取,不能 hardcode.
- // $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
- // $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
-
- $url = $request->param('url');
- // $url = $request->param('url');
- // 这里参数的顺序要按照 key 值 ASCII 码升序排序
- $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
-
- $signature = sha1($string);
- // dd($config['app_id']);
-
- $signPackage = array(
- "appId" => '*******',
- "nonceStr" => $nonceStr,
- "timestamp" => $timestamp,
- "url" => $url,
- "signature" => $signature,
- "rawString" => $string,
- "jsapiTicket"=>$jsapiTicket
- );
- // return [
- // 'code'=>0,
- // 'message'=> '获取微信配置成功',
- // 'data'=>$signPackage
- // ];
- // return $signPackage;
- return app('json')->success( $signPackage );
- }
-
- public function getTicket()
- {
- if(Cache::get('ticket')){
- return Cache::get('ticket');
- }else{
-
- // $config = $this->sendConfig();
- // $app = Factory::officialAccount($config);
-
- $accessToken = $this->getWxAccessToekn();
- $url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='. $accessToken.'&type=jsapi';
-
- //初始化
- $ticketArr = $this->curl_get($url);
-
- $ticket = $ticketArr['ticket'];
- Cache::set('ticket', $ticket ,3600);
-
- return $ticket;
- }
-
- }
- public function curl_get($url)
- {
- $headerArray =array("Content-type:application/json;","Accept:application/json");
- $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);
- curl_setopt($ch,CURLOPT_HTTPHEADER,$headerArray);
- $output = curl_exec($ch);
- curl_close($ch);
- $output = json_decode($output,true);
- return $output;
- }
-
- /**
- * 生成随机数
- */
-
- public function createNonceStr($length = 16) {
- $returnStr='';
- $pattern = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
- for($i = 0; $i < $length; $i ++) {
-
- $returnStr .= $pattern {mt_rand ( 0, 61 )};
- }
- return $returnStr;
- }
-
-
-
复制代码
|
|