正文

微信内登陆与认证

名字被占用  2022-02-14  632

关键词：

之前一直做PC端比较多，最近在做公司的微信公众号，涉及到一个问题，我们这个公众号是为特定的企业开放的，用于园区资产平台管理，所以涉及到一个用户登录认证的问题。

一、描述。

在微信的内部页面运行：当用户未关注公众号（或企业号），则自动引导到关注画面，关注后进入公众号，公众号中有“主页”，用户点击进入我们的平台，可以实现提交工单服务需求，查看园区信息等。但是在进入我们平台时需要做一个登录认证。

具体：如果用户尚未登录（未获取到其身份信息）时，则跳至特定页面获取凭证。已经登录则继续判断是否与我们平台进行了绑定，没有绑定则跳至绑定页面填写信息进行绑定，成功后方可进入平台。

二、实现。

由于平台开发文档发生了更新，所以流程变化如下：

最终流程：在平台内的任一页面，判断该 Url 中是否有 accessKey 参数存在，无则跳至指定 url 获取 accessKey，获取后自动跳至主页；有则跳转至主页，按照我们设置的流程进入我们的平台。在进入平台主页时判断用户是否与平台绑定，已绑定则存 accessKey ，没绑定则跳至绑定页面进行绑定。

【即上图 3 中去掉了主页判断。】

所以，在公共js文件中：

1、判断有无凭证（accessKey）。

var accessKey = "";
var my_userId = "";
var my_userName = "";

// 内部认证参数
var APPID = '';
var REDIRECT_URI = encodeURIComponent("redirect_uri");
var SCOPE = 'snsapi_userinfo';  // 静默授权
var STATE = 'home';   // 认证后跳转的目标

var url_accessKey = getUrlParam('accesskey');

/*判断有无凭证*/
if(url_accessKey){
    legal();
}else{
    if (window.localStorage.getItem('accesskey')) {
        accessKey = window.localStorage.getItem('accesskey');
        my_userId = window.localStorage.getItem('userId');
        my_userName = window.localStorage.getItem('userName');
        var saveTime = localStorage.getItem('saveTime');
        var nowdate = (new Date()).getTime();
        var a = nowdate - saveTime;
        a= (a/1000/60/60/24);
        if (a > 2) {    // 过期时间2天，过期重新获取accessKey
            illegal();   // 无凭证或非法，跳到特定页面获取凭据
        }
           
    }else{       
        //alert('url+local都无，无凭证，去获取');
        illegal();   // 无凭证或非法，跳到特定页面获取凭据
    }
}

【上述内部认证参数 APPID、REDIRECT_URI、SCOPE、STATE 在平台开发文档中有，这里的 APPID 和 REDIRECT_URI 就不写出来了。】

但是，要注意的一个地方是，REDIRECT_URI 需要编码，不能直接写文档中的 http://.....

2、有无凭证情况下执行对应函数。

function illegal(){
    var new_href = ('https://open.weixin.qq.com/connect/oauth2/authorize?appid='+APPID+'&redirect_uri='+REDIRECT_URI+
    '&response_type=code&scope='+SCOPE+'&state='+STATE+'#wechat_redirect').toLowerCase();  
    window.location.href = new_href;
}
// 存accessKey
function legal(){
    var url_accessKey = getUrlParam('accesskey');
    var url_userId = getUrlParam('userid');
    var url_userName = getUrlParam('userName');
    localStorage.setItem('accesskey', url_accessKey); // 
    localStorage.setItem('userName', url_userName); // 
    localStorage.setItem('userId', url_userId); // 
    localStorage.setItem('saveTime', (new Date()).getTime());// 保存变量时的时间点，当前时间戳
    my_userId = url_userId;
    my_userName = url_userName;
    accessKey = url_accessKey;
}

3、获取 url 中的参数，getUrlParam()：

//获取url中的参数
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    //  if (r != null) return unescape(r[2]); return null; //返回参数值  (解析中文参数时候出现乱码)
    if (r != null) return decodeURI(r[2]); return null; //返回参数值
}

比较无奈的是，获取 url 中的参数要改成下面的才行。

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    //  if (r != null) return unescape(r[2]); return null; //返回参数值  (解析中文参数时候出现乱码)
    if (r != null) {//返回参数值
        return decodeURI(r[2]);
    }else{
        return null;
    }
}

三、调试。

在将代码上传到服务器上之后，需要进行很重要的一步，就是调试，测试可能出现的各种问题，我用的是微信web开发者工具，用起来还可以，就是感觉每次都要清除缓存有点麻烦。

1、在 WebStorm 中运行除主页的任一页面（服务详情页面），在浏览器中会出现提示：

2、能出现提示，至少说明跳去微信内部是对的，复制上面的链接在微信web开发者工具中打开：

由于我之前已经登录了，localStorage 中已经存在 accessKey ，所以正在自动登录。

3、但是我还没有绑定信息，所以会跳至信息绑定页面：

提交信息之后，绑定成功。

【这里有个信息绑定是因为我们的公众号的使用人群是工程服务团队的，如果使用者不在工程服务团队中，是收不到验证码，也看不到任何信息的。即文章开始说的为特定的企业开放。】

4、再次在微信web开发者工具中打开刚刚复制的链接：

这次是之前登录过且已绑定信息的状态。

5、点击主页中的各个模块进入对应的模块内容：

但是，我点模块进去，总是重复出现上面的 4 。查找原因，即 二、实现 中的流程3 ，不用做主页判断，做了主页判断，每次点都是只能进主页 o(╯□╰)o

四、手机获取验证码。

哈哈，今天来更新我之前遇到的问题，其实发了这篇之后就解决了，但是一直没时间写。之前遇到的奇怪问题是因为后台给的开发文档中的返回信息，大小写写错了，好无奈、、、

不过值得一提的是 Ajax 的跨域请求问题，这个我会在后面详细写一篇。

五、扩展。

1、扫码方式绑定信息：

由于项目使用对象的扩展，目前这个微信公众号适用于多家企业，所以，我们使用扫码绑定信息从而确定用户绑定的项目。

用户扫码后公众号会推送绑定信息，点击进入绑定页面，扫描的二维码中包含用户所在项目及用户名、手机号，会自动填充至页面。

2、url 后面加参数：

在写获取 url 中的参数的函数时候，想到了，于是。。。

// 在url后面加参数
function UrlUpdateParams(url, name, value){
    var r = url;
    if (r != null && r != 'undefined' && r != "") {
        value = encodeURIComponent(value);
        var reg = new RegExp("(^|)" + name + "=([^&]*)(|$)");
        var tmp = name + "=" + value;
        if (url.match(reg) != null) {
            r = url.replace(eval(reg), tmp);
        }
        else {
            if (url.match("[\?]")) {
                r = url + "&" + tmp;
            } else {
                r = url + "?" + tmp;
            }
        }
    }
    return r;
}

微信内网页跳转app功能

...用户访问已认证服务号的JS接口安全域名时，可以通过“微信开放标签”打开符合条件的APP。特别说明：1、“微信开放标签”只开放给JS接口安全域名，使用此功能前请确保网页所属的域名已绑定为服务号的JS接查看详情

微信网页授权认证获取用户的详细信息，实现自动登陆-微信公众号开发干货

...了解什么web开发工具：官方提供的开发工具，使用自己的微信号来调试微信网页授权、调试、检验页面的JS-SDK相关功能与权限，模拟大部分SDK的输入和输出。下载地址：w 查看详情

微信登陆必须要经过开发者资质认证吗

参考技术A如果是纯粹只是登陆微信好根本不需要验证开发者查看详情

微信登陆必须要经过开发者资质认证吗

参考技术A微信开放平台开发者资质认证是面向微信开放平台开发者提供的真实性认证，能够更好的保护企业及用户的合法权益。开发者资质认证通过后，该开发者帐号下提交的应用将获得智能接口等高级能力。本回答被提问者... 查看详情

微信内h5网页打开app

...转满足一定条件的App。在使用该标签之前，首先需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App。详细配置规则参考文档《微信内网页跳转APP功能》。备注... 查看详情

discuz无法通过微信登陆

...x3.2,最近很多使用discuz的用户反映，在论坛网站上安装了微信这个插件后，却无法登陆，绑定微信号和无法通过扫面登陆微社区等现象。很多原因要么是因为用户自己没有认证服务号的却选择了认证服务号项，要么就是有认证服... 查看详情

关于citrix与rsa认证结合认证模式

...现Citrix与RSA结合的认证模式主要有三种：1)仅使用RSA认证登陆，就可以访问应用程序，类似智能卡认证模式；2)在认证登陆界面上，同时输入UserName、Password、PassCode的认证模式；3)实现分步登陆模式，首先由RSA的Web界面使用RSA的Pas... 查看详情

苹果手机在微信内打开app下载链接时怎么做到直接微信内下载

大家是不是经常会遇到微信内点击链接或扫描二维码无法打开指定网页的问题？只要你使用微信转发分享，相信你就一定会遇到，那么打不开的原因很简单了，就是被微信拦截了。这个问题我们只需要实现从微信内直接跳出到外... 查看详情

discuz无法通过微信登陆怎么处理？

wordpress免认证微信关注登陆插件master

介绍：Wordpress免认证微信关注登陆插件，个人用户无需申请服务号以及认证，支持未认证的订阅号实现关注公众号一键登录网站！首先需要去公众号里配置一下，进公众号，开发–基本配置，配置IP白... 查看详情

javascript判断是否是微信内嵌浏览器访问

functionisWeiXin(){　　varua=window.navigator.userAgent.toLowerCase();　　　　if(ua.match(/MicroMessenger/i)==‘micromessenger‘){　　　　returntrue;　　　　}else{　　　　returnfalse;　　　　}　　} 查看详情

微服务架构的登陆认证问题

从过去单体应用架构到分布式应用架构再到现在的微服务架构，应用的安全访问在不断的经受考验。为了适应架构的变化、需求的变化，身份认证与鉴权方案也在不断的更新变革。面对数十个甚至上百个微... 查看详情

微信内打开链接如果跳转到默认浏览器打开

微信内打开链接如何直接跳转到默认浏览器打开找到答案了：www.appinshare.top用360卫士做体检，你这个情况有可能是浏览器被绑架了，桌面的浏览器图标被劫持了还有设置的默认浏览器是可以修改的参考技术A狠狠正常，微信内打... 查看详情

基于node(express)实现微信内第三方网页获取用户信息

近来，有个需求：用户在微信中打开第三方网页，然后输入姓名手机号登录。用户退出后，再次进入网页不需要登录。拿到需求后，就看了下微信的公众平台开发者文档，原来微信内打开第三方网页，可以拿到用户的ope... 查看详情

用herl工具解决微信内链接可直接用外部浏览器打开

很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接，其实这并不难，只要我们实现微信跳转功能即可。下面给大家推荐FishJump工具（http://www.fishtool.cn/）使用步骤1.用浏览器打开我们... 查看详情

微信内分享第三方h5链接无法使用内置浏览器打开的解决方案

很多朋友在微信内想分享转发H5链接的时候都会很容易碰到H5链接在微信内无法打开或在微信内无法打开app下载页的情况。通常这种情况微信会给个提示 “已停止访问该网址”，那么导致这个情况的因素有哪些呢，主要... 查看详情

微信内嵌h5网页解决js倒计时失效

项目要求：将H5商城页面嵌套到公司微信公众号里项目本身的开发跟移动端网页并无太多差异，只是这昨天遇到一个问题，说是棘手，到也简单。用户下单后，在选择支付方式页面，有个倒计时的逻辑（从下单... 查看详情

微信怎么显示企业微信身份

操作：1、打开企业微信，点击我。2、点击企业下面的二维码图标。3、保存该二维码。4、打开微信，点击扫一扫，进行扫保存的二维码。5、最后就可以查看到微信上有企业信息了。参考技术A1、手机上打开企业微信，进去工作... 查看详情

正文

微信内登陆与认证

一、描述。

二、实现。

三、调试。

四、手机获取验证码。

五、扩展 。

微信内网页跳转app功能

微信网页授权认证获取用户的详细信息，实现自动登陆-微信公众号开发干货

微信登陆必须要经过开发者资质认证吗

微信登陆必须要经过开发者资质认证吗

微信内h5网页打开app

discuz无法通过微信登陆

关于citrix与rsa认证结合认证模式

苹果手机在微信内打开app下载链接时怎么做到直接微信内下载

discuz无法通过微信登陆怎么处理？

wordpress免认证微信关注登陆插件master

javascript判断是否是微信内嵌浏览器访问

微服务架构的登陆认证问题

微信内打开链接如果跳转到默认浏览器打开

基于node(express)实现微信内第三方网页获取用户信息

用herl工具解决微信内链接可直接用外部浏览器打开

微信内分享第三方h5链接无法使用内置浏览器打开的解决方案

微信内嵌h5网页解决js倒计时失效

微信怎么显示企业微信身份

五、扩展。