• js 微信公众号网页用户授权,获取微信code,access_tocken,用户信息


    第一次做微信网页授权,过程有点艰难,主要是不知道redirect_uri的地址要怎么写,刚开始我以为就是授权结束后要跳转到的首页地址,于是写成了uri = 'http://18i194c049.iask.in/credit/ProfessionalCredit/html/homePage.html'这种形式的,结果到了授权页面一直就弹出授权界面,像个死循环,后来想想应该是重定向url没写对以至于code没法传给后台换取不到access_token,所以一直循环弹出授权界面,最后请教大佬终于明白了,这个地址很重要,写你当前访问的页面的 href,因为点击同意授权后他会拼接?code='123456789'&href='www.baidu.com'等一些参数回来页面将跳转至 redirect_uri/?code=CODE&state=STATE页面,才能传给后台code换取access_token,登录成功。

    具体过程请阅读微信公众号开发者文档,就不详细说了https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

    直接上前端代码:

     1 (function () {
     2     var href = location.href;
     3     if(href.indexOf("code=") === -1){ //如果没有code参数就直接调用授权函数
     4         get_weixin_code_login();//调用授权函数
     5     }else{ //如果有拿取code值
     6         getUrlCode();
     7         var local = window.location.href;
     8         this.code = this.getUrlCode().code;
     9         alert(this.code);
    10         if (this.code == null || this.code == '' || this.code == 'undefined') {
    11             window.location.href = url;
    12         }
    13         getWxUserInfo(this.code);
    14     }
    15 })();
    16 
    17 function get_weixin_code_login() {
    18     var uri = window.location.href;
    19     var appid = '**************';//自己公众号的appid
    20     var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' +
    21         encodeURIComponent(uri) + '&response_type=code&scope=snsapi_userinfo&state=54321#wechat_redirect';
    22     window.location.href = url;
    23     // 这里走完就是已经授权了。如果授权了就会url中带有code
    24 }
    25 
    26 //获取url参数
    27 function getUrlCode() {
    28     var url = location.search;
    29     this.winUrl = url;
    30     var theRequest = new Object();
    31     if (url.indexOf("?") != -1) {
    32         var str = url.substr(1);
    33         var strs = str.split("&");
    34         for (var i = 0; i < strs.length; i++) {
    35             theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
    36         }
    37     }
    38     return theRequest;
    39 }
    40 
    41 /**
    42  * 授权后获取用户的基本信息
    43  */
    44 function getWxUserInfo(coDe) {
    45     mui.ajax({
    46         type: "post",
    47         url: 'http://18i194c049.iask.in/credit/caf/Verification/rz.do',
    48         async: false,
    49         data: {
    50             code: coDe,
    51         },
    52         headers: {'Content-Type': 'application/json'},
    53         dataType: "json",
    54         //jsonp: "jsoncallback",
    55         success: function (data) {
    56             console.log("success : " + data);
    57             alert('授权成功');
    58         },
    59         error: function () {
    60             alert('授权失败');
    61         }
    62     });
    63 };
    不积跬步无以至千里
  • 相关阅读:
    MySQL运维案例分析:Binlog中的时间戳
    身边有位“别人家的程序员”是什么样的体验?
    苹果收取30%过路费_你是顶是踩?
    1019 数字黑洞 (20 分)C语言
    1015 德才论 (25 分)C语言
    1017 A除以B (20 分)C语言
    1014 福尔摩斯的约会 (20 分)
    求n以内最大的k个素数以及它们的和、数组元素循环右移问题、求最大值及其下标、将数组中的数逆序存放、矩阵运算
    1005 继续(3n+1)猜想 (25 分)
    爬动的蠕虫、二进制的前导的零、求组合数、Have Fun with Numbers、近似求PI
  • 原文地址:https://www.cnblogs.com/lyt0207/p/11740776.html
Copyright © 2020-2023  润新知