网页端微信登录

wwtx2048

已于 2023-08-30 15:03:49 修改

阅读量324

点赞数 1

分类专栏：微信 js 文章标签：前端

于 2023-08-30 15:01:09 首次发布

本文链接：https://blog.csdn.net/weixin_45673305/article/details/132582353

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

微信

3 篇文章 0 订阅

订阅专栏

网页端微信登录授权

1.微信网页授权：

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑

2.官方文档：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

3.思路：

	1.网页端将参数拼接到微信授权页面链接上然后location.href跳转到微信授权的页面；
	2.用户确定授权后拿到code拼接到上一步的参数redirect_uri上跳转回去;
	3.然后拿code调用微信接口换取openid和unionid(这个一定要存，不要存openid)；
	4.有需要的话可以拿openid去获取用户微信信息；
	第三步第四步接口可以前端调用也可以后端调用，由于安全性官方文档推荐服务端调用，不过实际看情况吧。

4.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.min.js"></script>
</head>

<body></body>
<script>
    var config = { appId: "yourappid", secret: "yoursecret" }
    handlecheckCode();
    function handlecheckCode() {
        let obj = getUrlParams();
        console.log(obj)
        if (obj.code) {
            // code换取openId和unionid            
            handleGetWXInfoByCode(obj)
        } else {
            // 跳转微信登录            
            //同意授权后跳转到的页面            
            let redirect_uri = `https://www.you.com/login.html?url=${obj.url}`;
            let wxInfo = {
                appid: config.appId,
                redirect_uri: encodeURIComponent(redirect_uri),//要携带code跳转的地址                
                response_type: "code",
                scope: "snsapi_userinfo",//应用授权作用域，
                snsapi_base, //（不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）            
            }
            let openurl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wxInfo.appid}&redirect_uri=${wxInfo.redirect_uri}&response_type=${wxInfo.response_type}&scope=${wxInfo.scope}&state=STATE#wechat_redirect`
            // console.log(openurl)            
            window.location.href = openurl
        }
    }
    //获取openid和unionid    
    function handleGetWXInfoByCode(obj) {
        console.log(config)
        $.ajax({
            url: `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${config.appId}&secret=${config.secret}&code=${obj.code}&grant_type=authorization_code`,
            method: "get"
        }).then((data) => {
            console.log(data);
            if (data.errcode) {
                alert(data.errmsg);
                return
            }
            localStorage.setItem("WXLoginInfo", data);
            //  window.location.href=obj.url            
            handleGetWXUserInfo(JSON.parse(data), "data")
        }, (err) => { console.log(err, "err") })
    }    //获取微信用户信息，看情况调用    
    function handleGetWXUserInfo(obj) {
        $.ajax({
            url: `https://api.weixin.qq.com/sns/userinfo?access_token=${obj.access_token}&openid=${obj.openid}&lang=zh_CN`,
            method: "get"
        }).then((data) => {
            if (data.errcode) {
                alert(data.errmsg);
                return
            } localStorage.setItem("WXUserInfo", data);
        }, (err) => { console.log(err, "err") })
    }
    function getUrlParams() {
        var args = {};
        if (location.search.length > 1) {
            var query = location.search.substring(1);//获取查询串            
            var pairs = query.split("&");
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('=');//查找name=value               
                if (pos == -1) continue;//如果没有找到就跳过                
                var argname = pairs[i].substring(0, pos);//提取name                
                var value = pairs[i].substring(pos + 1);//提取value                
                args[argname] = decodeURIComponent(value);//存为属性            
            }
        }
        return args;
    };
</script>

</html>