Javascript前端控制只能在手机微信端访问页面

最近接到一个只能在手机微信端访问页面的需求,限于不能跟微信做交互,所以用js来获取设备信息,前端校验锁死。
关键点:
PC F12被禁用
PC backspace被禁用
//ios终端 禁止ios10以下
加在页面先校验,若不通过则window.stop();停止一切代码加载,也防止了加载无用数据

js代码


```javascript
var str = "本页面禁止PC端使用,请在手机微信客户端操作。感谢您的配合!";
function checkPlatform(){
  //禁止网站F12
  document.onkeydown = function(){
    if(window.event && window.event.keyCode == 123) {
      alert("F12被禁用");
      event.keyCode=0;
      event.returnValue=false;
    }
    if(window.event && window.event.keyCode == 13) {
      window.event.keyCode = 505;
    }
    if(window.event && window.event.keyCode == 8) {
      alert(str+"\n请使用Del键进行字符的删除操作!");
      window.event.returnValue=false;
    }
  }
  var u = navigator.userAgent;
  //ios终端
  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  //android终端
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 

  if(/MicroMessenger/i.test(navigator.userAgent)){
    var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
    if (is_mobi) {
      if(isiOS){
        //判断是不是ios10系统
        var ver = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
        ver = parseInt(ver[1], 10);
        if(ver<10) {
          str = '您当前手机的系统版本不支持,请在IOS10及以上版本操作';
          showforbidpage();
        } else {
          //可以继续操作
        }
      }
    }else{
      str = '请在手机微信客户端打开链接';
      showforbidpage();
    }
  }else {
    str = '请在手机微信客户端打开链接';
    showforbidpage();s
  }
}
function showforbidpage(){
  window.stop();
  var img = '<img style="width:100px; height:100px" src="http://l087-prod.oss-cn-szfinance.aliyuncs.com/lmes_new/dev/h5_image/chahao.png">';
  var div = '<div><div style="padding-top: 20px;text-align: center;">'+img+'</div><div style="padding-top: 20px;text-align: center;"><h4>'+str+'</h4></div></div>';
  $("body").html(div);
}

$(document).ready(function(){
  checkPlatform();
});
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 可以使用微信的第三方登录功能来实现微信登录。首先,需要在微信公众平台上注册网站应用,然后在应用中配置网站的域名。 接下来,在你的网站上添加一个 "微信登录" 按钮。点击按钮时,会跳转到微信的登录界面,用户在微信上登录后,会跳转回你的网站。 在用户跳转回网站时,可以通过 URL 中的参数(例如,code 参数)来获取用户的信息,并使用这些信息来完成登录。下面是一个简单的示例: ``` // 在网站的 JavaScript 中 const loginButton = document.getElementById('login-button'); loginButton.addEventListener('click', () => { // 跳转到微信的登录界面 window.location.href = 'https://open.weixin.qq.com/connect/qrconnect?appid=YOUR_APP_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code'; }); // 在网站的服务器(例如,Node.js) app.get('/callback', (req, res) => { // 使用 code 参数获取用户信息 const code = req.query.code; const url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=YOUR_APP_ID&secret=YOUR_APP_SECRET&code=${code}&grant_type=authorization_code`; request(url, (error, response, body) => { if (!error && response.statusCode === 200) { const data = JSON.parse(body); // 使用 access_token 和 openid 获取用户信息 const userUrl = `https://api.weixin.qq.com/sns/userinfo?access ### 回答2: JavaScript可以通过使用微信的开放接口实现微信登录功能。下面是一个简单的步骤: 1. 获取授权码:用户在微信登录页中授权登录后,微信会返回一个授权码。 2. 通过授权码获取访问令牌:使用授权码向微信服务器发送求,获取访问令牌。访问令牌是访问微信开放接口的必要凭证。 3. 使用访问令牌获取用户信息:使用访问令牌向微信服务器发送求,获取用户的微信ID和其他相关信息。 4. 验证用户信息:根据获取到的用户ID和其他信息,可以进行进一步的用户验证和处理,例如绑定用户账号或保存用户信息。 具体实现方式: - 在网页中引入微信提供的JavaScript SDK (例如微信公众平台提供的JSSDK) - 调用微信SDK提供的接口进行授权登录,获取授权码。 - 使用授权码向指定接口发送求,获取访问令牌。 - 使用访问令牌向指定接口发送求,获取用户信息。 - 根据获取到的用户信息,进行相应的处理和验证。 需要注意的是,微信登录功能需要在微信网页内生效,即只能微信内部打开实现。为了提供良好的用户体验,还可以实现自动登录功能,使用户再次访问时无需重复登录。 总结,通过JavaScript结合微信开放接口,可以实现微信登录功能,使用户能够用微信账号快速登录网页,并获取用户的微信ID及其他相关信息,以便后续的用户处理。 ### 回答3: JavaScript可以通过微信开放的API来实现微信登录功能。具体步骤如下: 1. 首先,在微信开放平台注册一个开发者账号,并创建一个应用。 2. 在应用设置中获取到开放平台分配给应用的AppID。 3. 在页面中引入微信开放平台提供的JavaScript SDK,可以通过在页面头部添加如下代码来引入: ``` <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> ``` 4. 在登录页面中创建一个DOM元素,用于渲染微信登录按钮。例如: ``` <div id="wx-login-btn"></div> ``` 5. 在页面加载完成后,调用微信登录API,传入AppID和回调函数等参数来创建一个微信登录实例,例如: ``` var obj = new WxLogin({ id: "wx-login-btn", appid: "YOUR_APPID", redirect_uri: "YOUR_REDIRECT_URI", scope: "snsapi_login" }); ``` 其中,`id`为指定的DOM元素id,`appid`为应用的AppID,`redirect_uri`为回调地址,`scope`为授权作用域。 6. 用户点击微信登录按钮后,弹出微信登录窗口,用户在弹出的窗口中输入微信账号密码进行登录。 7. 用户登录成功后,微信开放平台会将回调地址重定向到之前指定的回调地址,并携带一个临时授权票据code。 8. 在回调的页面中,通过获取URL参数或其他方式获取到微信传递的临时授权票据code。 9. 调用后接口,将临时授权票据code等参数传递给后,后通过调用微信开放平台提供的API来获取用户的唯一标识openid等信息。 10. 前端可以根据后返回的用户信息进行相应的处理,例如显示用户头像、昵称等。 以此完成微信登录功能的实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

请叫我大豆包

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值