H5/vue/uniapp嵌入微信登录遇到的一些问题(后端版本)
由于项目需要确定用户信息,所以想着加入微信授权,这样就能高效无痛的获取用户数据,但是在网上找了蛮久感觉没有说得很详细的,所以想着自己解决吧还是。
首先微信登录有两个解决方案,一个是利用已经认证的微信公众平台(最好是服务号),另一个是利用已经认证的微信开发平台,这里用到的是微信公众平台。
下面是微信官方文档:微信开放文档 / 开发
https://developers.weixin.qq.com/doc/service/guide/大部分api在文档里面说得比较详细了,这里我们需要一个公众号来测试,但是总不能还直接申请一个公众号进行测试吧,所以这里可以用到下面这个网址,直接登录就能获取到一个测试的公众号:微信公众平台
https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
有了测试号之后就可以开始进行测试了,首先扫码关注一下自己测试的公众号,如果不关注的话就无法调用接口。
然后往下翻,找到网页账号那一栏,最后面有个修改,点开
点开之后会让你填入授权回调的数据,我们可以直接填入后端的地址和端口,比如我这里填的是我本机的ip,也可以填127.0.0.1或者localhost,根据自己的需求填就行,这里的回调页面域名就是我们后面要用到的回调地址,这里配置的要和后面的回调地址一样才行,点击保存之后就可以开发后端了。
然后可以参考下面的开发文档:微信公众平台
https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index参考链接如下,下面的链接只能通过微信自带的浏览器打开才能直接被调用,然后appid这些东西在测试公众号的那个网页中都有展现,这里需要注意的是redirect_uri这个参数,需要填写上面的回调域名的地址,比如我写的是192.168.3.247:8081,然后我回调地址就可以写成192.168.3.247:8081/login,反正只要是前面这个指定的域名为前缀就行,后面的地址不管有多长都不要紧:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
然后就可以直接开发后端了,注意后端要能接收数据的,如果用户打开这个连接之后再同意权限,这个连接就能直接重定位到你设置的那个redirect_uri的网址,并且会自动带上code和state,这里code比较重要,state是你自己带的,根据个人需求看有什么用没有
redirect_uri/?code=CODE&state=STATE
接下来就可以直接通过后端访问下面的链接,因为这里面用到了secret,这个是需要保密的,不能暴露给前端,所以只有靠后端发请求才行了,这里需要把链接拼接成这样,code就是刚刚通过上面连接收到的那个内容:
GET https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
这个连接访问之后返回值如下,可能会有点不同,因为我就多了一个language,但是不要紧,问题不大,然后至此,所有的前置准备工作就都完成了,接下来就是根据开发文档自行开发即可:
正确时返回内容:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE",
"is_snapshotuser": 1,
"unionid": "UNIONID"
}更多推荐


所有评论(0)