No Comments

H5 统一登录 解决方案

我们每年要做大量的H5广告 H5游戏等，很多时候需要用到微信登录
微信登录主要面对几个大问题

  1. H5项目登录获取的信息不一致，有时需要头像，有时仅需要openid，两个级别的微信授权，前者体验较差，应该尽量避免
  2. 登录所用的公众号不一样，有时客户没有服务号，可以使用我们提供的，有时又一定客户指定的服务号
  3. 使用客户服务号，很多时候我们无法调整用户服务号配置，这可能会导致客户已有程序出错
  4. 放在客户域名下，因跨域导致ajax无法使用，不易检测登录

为解决这些问题，给出以下解决方案

  1. 统一微信授权接口，授权时传入当前页面地址，授权流程结束后，跳转到原H5地址
  2. 在前端js跳转时就确定好使用snsapi_userinfo级别还是snsapi_base级别的授权，或具体的活动逻辑处进行检测
  3. 注册微信开放平台(open.weixin.qq.com)，使用微信第三方平台接口进行授权，不需要修改客户服务号授权回调域名，以此保证不会影响客户公众号已有程序

  4. 可在前端页面使用jsonp向活动接口检测登录状态
    以下给出前端jsonp检测登录代码

    function checkLogin() {
 var loginUrl = '';
 var checkUrl = apiRoot + 'activity/'+ appname +'/loginOk'
 jsonp(checkUrl,1,'checklogincallback',function(res){
     if (res.code != 1) {
         location.replace(loginUrl);
     }else{
         if(scope != 'snsapi_base'){
             nickname = res.msg['nickname'];
             headimgurl = res.msg['headimgurl'];
         }

     }
 })
}
function jsonp(url, type, callbackName, callbackFun) {
 let w = window;
 if (type == 1) {
     w[callbackName] = callbackFun;
 }
 let jsonpScript = document.createElement('script');
 let head = document.getElementsByTagName('head')[0];
 jsonpScript.onload = function (e) {
     if (type == 0) {
         callbackFun(w[callbackName]);
     }
     e.path[0].src = "";
     w[callbackName] = null;
     delete w[callbackName];
     head.removeChild(e.path[0]);
 };
 head.appendChild(jsonpScript);
 let param;
 if (url.indexOf("?") > 0) {
     param = "&";
 } else {
     param = "?";
 }
 jsonpScript.src = url + param + "k_i_m=" + Math.random() + "&callback=" + callbackName;
}
checkLogin()

最后更新于 2018-09-11 05:13:55 并被添加「H5 统一登录 解决方案」标签，已有 606 位童鞋阅读过。

相关文章

此处评论已关闭