微信授权

Posted 2021-02-04 Smile_ruo

微信授权分为两种，一种是以snsapi_base为scope发起的网页授权，无授权窗口弹出，用于获取进入页面的用户的openid，叫做静默授权；另一种则是以snsapi_uerinfo为scope发起的网页授权，有窗口弹出，需要用户手动授权，用来获取用户的基本信息。其实对于已经关注过公众号的用户，再次进入该公众号，即使scope为snsapi_userinfo，也相当于静默授权，用户无感知。 具体而言，网页授权流程分为四步： A

微信授权分为两种，一种是以snsapi_base为scope发起的网页授权，无授权窗口弹出，用于获取进入页面的用户的openid，叫做静默授权；另一种则是以snsapi_uerinfo为scope发起的网页授权，有窗口弹出，需要用户手动授权，用来获取用户的基本信息。其实对于已经关注过公众号的用户，再次进入该公众号，即使scope为snsapi_userinfo，也相当于静默授权，用户无感知。

具体而言，网页授权流程分为四步：

A、引导用户进入授权页面同意授权，获取code

B、通过code换取网页授权access_token（与基础支持中的access_token不同）

C、如果需要，开发者可以刷新网页授权access_token，避免过期

D、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

1. 非静默授权(https://llbao.com.cn/carownervipcn/nextpro/learnJSSDK.html)

　　　　// 获取地址栏参数值
        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;
        }
        // 微信授权
        function wxLogin() {
            var appId = \'xxxx\';//申请的AppId
            var oauth_url = \'xxx.com/xxx\';//后台用于获取用户信息的接口
            /**
             * redirect_uri 授权回调地址，由于code是在跳转url链接在其后地址栏传参方式返回的，这里重定向地址为当前页面
             *                 xx.com 域名是要备案的，可以在开发-权限接口-网页授权获取用户信息 里面配置
             * response_type 值为code时，用于调用access_token，接口获取授权后的access_token。
             * scope    -----> 1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）
             * scope    -----> 2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。
             * state    否    重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
             * #wechat_redirect    是    无论直接打开还是做页面302重定向时候，必须带此参数
             * */
            var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split(\'#\')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
            var code = getUrlParam("code");
            // 判断code是否存在
            if (!code) {
                // 获取code
                window.location.href = url;
            } else {
                alert(window.location.href)
                alert(code)
                // 拿code换取用户的相关基本信息
                $.ajax({
                    type: \'GET\',
                    url: oauth_url,
                    dataType: \'json\',
                    data: {
                        code: code
                    },
                    success: function (data) {
                        alert(JSON.stringify(data))
                    }
                })
            }
        }

效果图如下：

 

2.静默授权

 var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split(\'#\')[0] + "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"