我在完善网站时发现,积木里面的显示归属地功能所用的API不支持https,导致评论页面并不能正常加载归属地:
一开始想换个支持HTTPS的API,但找了一晚上也没有发现能用的免费API,要么IP归属地显示不准确,要么不支持HTTPS。后来好不容易找到一个显示准确害支持HTTPS的,却存在跨域限制。解决跨域限制我想到了反代,也配置成功了,但实际用起来发现速度不理想,于是继续寻找方法。
后来看到腾讯云/阿里云API市场里面有免费的IP归属地查询API接口,0元/10万次,可重复购买,这对于一个网站来说是绰绰有余了。我这里选择的是腾讯云的IP归属地查询(含全球版),开通之后后台会显示SecretID和SecretKey,记录下来下面会用。
在你的网站目录里任意位置新建一个ipapi.php文件,使用下面的代码并填入密钥ID、Key和调用地址:
<?php
// 云市场分配的密钥Id
$secretId = '填入你的SecretID';
// 云市场分配的密钥Key
$secretKey = '填入你的SecretKey';
$source = 'market';
// 签名
$datetime = gmdate('D, d M Y H:i:s T');
$signStr = sprintf("x-date: %s\nx-source: %s", $datetime, $source);
$sign = base64_encode(hash_hmac('sha1', $signStr, $secretKey, true));
$auth = sprintf('hmac id="%s", algorithm="hmac-sha1", headers="x-date x-source", signature="%s"', $secretId, $sign);
// 请求方法
$method = 'GET';
// 请求头
$headers = array(
'X-Source' => $source,
'X-Date' => $datetime,
'Authorization' => $auth,
);
// 查询参数
$queryParams = array (
'ip' => $_SERVER["QUERY_STRING"],
);
// body参数(POST方法下)
$bodyParams = array (
);
// url参数拼接
$url = '填入商品简介页面显示的调用地址';
if (count($queryParams) > 0) {
$url .= '?' . http_build_query($queryParams);
}
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 60);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
curl_setopt($ch, CURLOPT_HTTPHEADER, array_map(function ($v, $k) {
return $k . ': ' . $v;
}, array_values($headers), array_keys($headers)));
if (in_array($method, array('POST', 'PUT', 'PATCH'), true)) {
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($bodyParams));
}
$data = curl_exec($ch);
if (curl_errno($ch)) {
echo "Error: " . curl_error($ch);
} else {
print_r($data);
}
curl_close($ch);
然后编辑积木插件mudules目录里的jumu.js文件,找到最低端OTHERS下的代码,将$.ajax的内容替换为:
$.ajax({
url: 'https://你的域名/文件所在位置/ipapi.php?' + ip
})
将$(that).text这一行的内容替换为以下其中之一(本部分由PCDotFan技术指导):
$(that).text(JSON.parse(response).data.prov + JSON.parse(response).data.city + ' ' + ip)//显示为(省+市+IP,如“广州深圳 117.136.79.114”)
$(that).text(JSON.parse(response).data.prov + JSON.parse(response).data.city)//显示为(省+市,如“广州深圳”)
保存即可。