网页中使用微信授权。

微信授权,做过一次之后就会发现这个功能点,很简单,但是第一次写这功能的好多同学,就会摸不到头脑,微信文档,我看头疼,还有这个授权必须要真机测试,本地测试走不通,这就很烦了,
一.
授权分为俩种:
一种是静默授权(snsapi_base)。
1. 以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)
一种非静默授权(snsapi_userinfo)。
2.以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。
授权其实就是去跳微信给的地址:
地址需要自己配置:
1. appid:‘绑定公众号时获取的,’
2. scope:设置授权的类型,snsapi_userinfo/snsapi_base。
3. redirect_uri:设置地址授权后重定向的回调链接地址,这里详细说下,当你跳转微信地址后微信那边会自动再跳到一个地址,这个地址是由你控制的,比如:redirect_uri=‘www.baidu.com’。一般都会写自己的项目地址。
4. 网页中使用微信授权。_第1张图片

 https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=www.baidu.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
  1. 当微信重定向地址之后,跳回来地址中会携带一个openId的参数,这个参数也就是你要获取的参数 这个时候你把地址中的openId参数截取下来当作参数去调接口,就ok了。
  2. 获取到openId后,授权基本就完成了,具体的逻辑还需要自己去写,但是授权就是这么多内容。

我自己的代码

 //用户授权登陆
        wech_login(){
            // 获取活动编号
            const Appid = "abcdefg";     //
           // wx 获取open Id 用户信息,并保存到数据库
          window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${Appid}&redirect_uri=http://www.baidu.cn/VoteSystem/voter/login&response_type=code&scope=snsapi_userinfo&state=11#wechat_redirect=www.baidu.com`   
         
             // 获取url中openid
            let url = window.location.href;
            let serch1 ='openId=';
            let openId = url.indexOf(serch1);
            // openid 存在
            if (openId != -1 )
                // 截取openid
                var second_url = url.substring(openId+serch1.length,openId+serch1.length+28);
               // 把openI存缓存中,其他地方需要调用可以去缓存里面取。
                window.localStorage.setItem('second_url', second_url);  
                // 分享出去链接时从新获取openid
                window.location.href=`http://www.baidu.cn/VoteSystem/dist/index.html?vid=${styid}`;
            }
            // openid 已存在,就跳转首页
            if(window.localStorage.getItem('second_url') !== null) 
                     this.$router.push({path: "/home"});
            }   
       }
    },

逻辑需要看自己需求去编写,登录原理就是这么个原理。域名需要去微信公众号中帮定,不然会失败的。

你可能感兴趣的:(微信端)