美文网首页
萌新前端,微信公众号授权登录

萌新前端,微信公众号授权登录

作者: 美树小埋 | 来源:发表于2021-01-07 10:55 被阅读0次

           时间飞逝,转眼已经2021年了。今天是2021年的第一个周四,漫天飞雪,肯定是幸运的一天并一年!呐,俗话不都是说,瑞雪兆丰年嘛,今年是我的年,肯定会多眷顾我的,一定!

          废话不多说,先开始我的总结吧。今年一整年差不多都在写微信公众号和小程序,遇到很多坑也有很多想法。

          先说微信公众号,坑多些~~~

          微信公众号的授权,必须注意两点,1、网页授权获取用户的基本信息,这里写的授权回调页面域名,必须跟需要回调授权的访问路径一摸一样,必须一摸一样包括端口配置了端口访问路径就必须有端口,没配置端口访问路径就不能有端口(测试号可以配置端口 ,正式号只能配置域名)

    网页授权获取用户的基本信息

    2、JS接口安全域名,这里是配置接口地址,必须配置!!

    JS接口安全域名

    配置好了之后就可以开始写代码啦~~~

    微信公众号授权登录,先重定向

    let url = window.location.href; let redirectUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3e2c7a119c33d387&redirect_uri=" + encodeURIComponent(url) + "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"; window.location.href = redirectUrl;

    这里需要注意的就是拿到的访问地址,需要用encodeURIComponent()重新编码。调用完这个函数之后,就会开始重定向,重定向的地址是微信返回的后面会直接拼接一个code,类似 http://www.baidu.com?code=xxxxxxxxxxxxxxxxxxxxxxx。

    const code = location.href.split('?')[1]if (!code) return {}const obj = {}code.split('&').forEach(item => { const arr = item.split('=') obj[arr[0]] = arr[1]})this.code = obj.code;

    拿到code,传给后台,换取openId,拿到openId,那么恭喜你登录成功啦~~~~

    总结一下,先去微信后台填写网页授权获取用户的基本信息,再填写JS安全域名,然后调微信重定向,最后拿到code传给后台~

    相关文章

      网友评论

          本文标题:萌新前端,微信公众号授权登录

          本文链接:https://www.haomeiwen.com/subject/laizwktx.html