发表于: 2018-07-02 23:52:13
1 519
今天完成的事情
今天在图神的梳理下理清了步骤。
1、用户访问自定义菜单的url..下面的地址需要在微信公众平台自定义菜单中自行设置。appid是服务号id。uri是回调域名。
https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXX&redirect_uri=http://mxr.dounixue.net/&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
2、微信解析到
http://mxr.dounixue.net/?code=061lWlgU1CiUYV0Ez6hU1paegU1lWlgx&state=STATE
之前一直想不明白该如何通过授权登陆跳到这一页。然而实际上是等跳到这一页之后再去向后端请求。我们只要关注微信公众号,访问自定义菜单,第一次就会出现获取个人信息的授权请求。
而等确认登陆之后。自然跳转到上面那个链接。然后截取code
我要截取url上的code。向后端发送请求。。他返回给我一个id。。和openid
具体方法:
let url = window.location.href;// let url ="http://mxr.dounixue.net/?code=061jAEDj20EePG0lIBDj2c7UDj2jAEDe&state=STATE";console.log("url", url);// 截取code.let code = url.split("code=")[1].split("&state=")[0];console.log("code", code);this.$http.get("http://122.152.216.183:8092/home/login", {params: {code: code}})response:
{"status": 0,"data": {"id": 18,"openid": "021SFAjY02C6412Z9OfY0VxIjY0SFAj7"},"msg": "验证成功"}这里的code只能请求一次。第二次请求就是会向微信端重新发送请求。code值立马就变化了。尤其是vue是响应式的,vscode中修改代码,本地立马就变了。请求重新发送。重新在微信工具上获取跳转路径。
解决办法是不予理会,本地测试使用静态的带code的url。将服务器返回的字段存在sessionstorage中
<!-- 以下是用code通过官方接口返回的json包。 --><!-- https://api.weixin.qq.com/sns/oauth2/access_token?appid=XXXXXX&secret=XXXXXXXX&code=071TbCs11sFTBZ1kikt11toGs11TbCsb&grant_type=authorization_code 不能测试对比。应该是一样的。如果这样在浏览器中再打开。会提示code已经使用了。。所以只要后端弄好了就行
{"access_token": "11_YNfmJ6NLK6Mm3AW9iDYH2VKlu8bo2pnuBAy77sZgzjyrqE52iI417odqpEzfveZpKwt5uXhc_DLsoSYS7Rgz4Q","expires_in": 7200,"refresh_token": "11_qtTfdF4t2cpYYfBG3THeOHjB9NGuuB6uBj0O-0UtzP0GhGD0Fhe-MYlxxUO4Bk7Y2lDUX2UI9AufDW8FFGP2vQ","openid": "oSV35t1edoa7ocKrAhuK_bGJZXQc","scope": "snsapi_userinfo"}
3、我通过code=openid get请求
http:GET(请使用https协议) https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=oSV35t1edoa7ocKrAhuK_bGJZXQc=zh_CN
this.$http.get("https://api.weixin.qq.com/sns", {params: {access_token: access_token,openid: openid,lang: "zh_CN"}}).then(response => {
https://api.weixin.qq.com/sns/userinfo?access_token=11_9ITM3olLR6jBlZ5kCvN7LHUFxN9W0dq5ags-yzq_eXK99iWTcbTdTdSHaFLLPZ1fxdKdiimli1mUoGeGHuMf2w&openid=oSV35t1edoa7ocKrAhuK_bGJZXQc&lang=zh_CN
"openid": "oSV35t1edoa7ocKrAhuK_bGJZXQc", "webAccessToken": "11_aDux0RGd41BZehuTXMlmZ-nYF3edaZoTaWFhKSUO0hS7ZLmIw3IfLCANG4-YT9TUTUSwdd8CoRl6bjkv7VzsNA"测试返回json包。而实际上返回
{
"openid": "oSV35t1edoa7ocKrAhuK_bGJZXQc","nickname": "素·锦年·时","sex": 1,"language": "zh_CN","city": "","province": "","country": "中国","headimgurl": "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI027H6e1tkyLzF6OTe53LveYWvBEQUKsLqib1hYgfOCHibpX3FXlob71gYZb4jnVmXtEMroE8JnTww/132","privilege": []}
明天计划的事情
获取微信上传图片接口。等后端返回三个字段,就去调用微信图片上传的接口
评论