vue h5微信公众号授权获取用户信息

1.申请测试账号

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

2.修改网页授权，填写自己需要申请授权的前端首页

（比如我这里xuexiao.zhangdengzhen.top,是我的登录页面，我在登录页面申请授权）

3填写申请授权的前端url,token随便写。

提交时，提示错误也不用管它

具体流程

1 第一步：用户同意授权，获取code

2 第二步：通过code换取网页授权access_token

3 第三步：刷新access_token（如果需要）

4 第四步：拉取用户信息(需scope为 snsapi_userinfo)

前端代码

在登录页面获取用户权限

<template><div class="login"><van-row><van-col span="10" offset="4"><van-imageroundwidth="10rem"height="10rem"src="https://img1.baidu.com/it/u=1565027473,2004361185&fm=26&fmt=auto&gp=0.jpg"/></van-col>
</van-row><!-- 居中 -->
<van-row type="flex" justify="center" ><van-col span="20" style="margin-top:20px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"><van-field v-model="text" label="学号"   placeholder="请输学号" /><van-field v-model="password" type="password" label="密码"   placeholder="请输入密码" /><van-fieldv-model="sms"centerclearablelabel="验证码"placeholder="请输入验证码"><template #button><van-imagewidth="4.096rem"src="https://img01.yzcdn.cn/vant/cat.jpeg"/></template></van-field></van-col>
</van-row><!-- 居中 -->
<!-- <van-row type="flex" justify="center" style="margin-top:10px;" > --><van-row type="flex" justify="center" style="margin-top:0.64rem;" ><van-col span="6"><van-button @click="tohome" type="primary" size="large" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">登录</van-button></van-col>
</van-row></div>
</template>
<style scoped></style>
<script>import axios from 'axios'
export default {data(){return{text:"",password:"",sms:"",search:"",urlpost:""}},methods:{tohome(){localStorage.setItem('password', this.password);localStorage.setItem('text', this.text);axios({method:"post",url:this.urlpost,data:{zhanghao:this.text,mima:this.search,yanzhengma:this.sms,openid:JSON.parse(localStorage.getItem("userinfo")).openid}}).then(res=>{console.log(res.data)Toast("登录成功")})this.$router.push('/index') },getCode(){axios.get('http://if:3000/getCode').then(response => (window.location.href=response.data)).catch(function (error) { // 请求失败处理console.log(error);});},isCode(){return  window.location.search.includes('code=')},getUserinfo(){this.search=window.location.searchconst url_params=Object.fromEntries(window.location.search.slice(1).split('&').map(v=>v.split('=')))console.log(url_params)console.log(this.search)axios({method:'post',url:"http://ip:3000/getUserInfo",data:{code:url_params.code,search:this.search}}).then(res=>{console.log(res.data)localStorage.setItem("userinfo",JSON.stringify(res.data))})}},created(){//  this.getCode()this.urlpost=window.g.pachongif(this.isCode()){this.getUserinfo()console.log(this.isCode())}else{this.getCode()}},//  updated(){//    this.getUserinfo()//      if(this.isCode){//             this.getUserinfo()//             console.log(this.isCode())//          }else{//              this.getCode()//          }//  }
}
</script>

后端代码

1.目录结构

2.env文件内容（填写你测试号的APPID和APPSECRET）

3.serve.js内容

const app=require("express")()
const bodyParser=require("body-parser")
const cors=require("cors")
const axios=require("axios")
app.use(bodyParser.json())require('dotenv').config()
app.use(cors())app.get('/',async(req,res)=>{res.send("ok")
})
app.post('/ceshi',async(req,res)=>{console.log("账号",req.body.zhanghao)console.log("密码",req.body.mima)console.log("验证码",req.body.yanzhengma)console.log("openid",req.body.openid)res.send("ok")
})
app.get('/getCode',async(req,res)=>{let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${process.env.APPID}&redirect_uri=${encodeURIComponent(`http://xuexiao.zhangdengzhen.top`)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`//console.log(url)res.send(url)
})
app.post('/getUserInfo',async(req,res)=>{let code=req.body.code;// console.log(req.body.search,"mysearch")// console.log(code)let accessaccess_token_url= `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${process.env.APPID}&secret=${process.env.APPSECRET}&code=${code}&grant_type=authorization_code`let token=(await axios.get(accessaccess_token_url)).data.access_tokenlet userInfo=`https://api.weixin.qq.com/sns/userinfo?access_token=${token}&openid=OPENID&lang=zh_CN`let user=(await axios.get(userInfo)).data//  console.log(accessaccess_token_url)console.log(user,'user')res.send(user)
})
app.listen(3000,()=>{console.log("http://localhost:3000")
})

后端返回的数据情况

vue h5微信公众号授权获取用户信息相关推荐

微信公众号授权获取用户OpenID和UnionId然后发生消息通知
微信公众号授权获取用户OpenID和UnionId然后发生消息通知 1.获取微信公众号code 1.微信公众拿取公众号appid和appSecret 2.网页域名授权,这里的域名拼接上html所在位置 ...
【微信公众号】获取用户信息
author:咔咔 wechat:fangkangfk 已经很久没有在写公众号了,今天在回顾一下首先获取测试账号然后配置域名打开文档看看步骤:https://mp.weixin.qq.com/w ...
微信公众号开发--获取用户信息中文乱码的解决方案
在微信开发中我们会经常需要获取用户的信息. 微信给我们提供了获取用户信息的api, 地址为 https://api.weixin.qq.com/cgi-bin/user/info?access_tok ...
微信公众号网页获取用户信息
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图 html 代码: <!DOCTYPE html> <html><head ...
企业微信接收消息服务器配置php,微信企业号配置及在公众号里获取用户信息
微信企业号配置及在公众号里获取用户信息 1.1.企业公众号里新建应用,回掉模式里自定义回调URL及密钥拿到,创建应答数据配置成功后显示: 已成功配置企业服务器 URL http://75271.co ...
微信小程序授权获取用户信息和手机号码
微信小程序授权获取用户信息和手机号码 1.微信官方文档登录:https://developers.weixin.qq.com/miniprogram/dev/framework/open-abili ...
微信小程序授权获取用户信息
微信小程序授权获取用户信息小程序昵称突然变成了"微信用户",头像也不显示, <!-- 近期很多小伙伴通过该方法获取头像和昵称,代码也没有做改变,突然就变成了下面这样子 - ...
H5 微信公众号授权登录前后端分离篇(资料准备+前端01)
实现微信公众号授权登录,很简单,但是注意的地方要细心,小伙伴们跟着我的思路一起实现吧! 文章目录一.帐号申请 1. 正式账号 2. 测试帐号二.微信文档 2.1. 文档主页 2.2. 授权流程 2 ...
H5微信公众号授权登录
目录一.封装获取code的函数.存储token函数.获取token函数二.点击请求微信公众号授权并跳转三.重定向跳转会当前链接获取code登录四.整体流程的描述: 一.封装获取code的函数. ...

vue h5微信公众号授权获取用户信息

vue h5微信公众号授权获取用户信息

1.申请测试账号

2.修改网页授权，填写自己需要申请授权的前端首页

3填写申请授权的前端url,token随便写。

具体流程

前端代码

后端代码

后端返回的数据情况

vue h5微信公众号授权获取用户信息相关推荐

最新文章

热门文章