uniapp 小步调实现微信授权登录（前端和后端）

                       
原文链接：https://blog.csdn.net/weixin_43835425/article/details/131147690
掘金地点：https://juejin.cn/post/7290371873547583548
1.前端：通过 uni.getUserProfile 和 uni.login 来实现
1.重要流程：先通过 uni.getUserProfile授权获取用户名称和头像等信息 在调用 uni.login 获取微信登录必要的暂时code
2. 前端代码：

2.     async onLogin() {
3.       //获取用户信息 （头像和名称）
4.       const [, userProfile] = await uni.getUserProfile({
5.         desc: "获取用户信息",
6.         lang: "zh_CN",
7.       });
8.       if (userProfile) {
9.         //调用微信登录接口获取临时code
10.         const [, loginInfo] = await uni.login({ provider: "weixin" });
11.         if (loginInfo) {
12.          // 登录临时code
13.           const { code } =  loginInfo;
14.           const {userInfo: { avatarUrl, nickName }} = userProfile;
15.           // 组装后端接口需要的数据
16.           const params = {code, avatarUrl, userName: nickName};
17.           // 调用登录接口
18.           const { data } = await wxLogin(params);
19.           uni.setStorageSync(USER_TOKEN, data.token);
20.           this.$store.commit("SET_USER_INFO", data);
21.           this.$api.msg("登陆成功");
22.         }
23.       }
24.     },

复制代码

2.后端：必要通过调用微信提供的第三方接口来实现
1.重要流程：在前端调用接口乐成的将暂时code 转达给后端时 ，后端通过调用微信的第三方接口拿到 openid, session_key 这两个参数，查询数据库是否有 openid 假如有则更新 session_key ，假如没有则在数据库中新建一条用户信息的数据
2.后端代码（node.js）

2. /**
3.    @description 微信登录
4.   * @param {String} code
5.   * @type {POST}
6.   * @return
7. */
8. router.post('/wxLogin', async (req, res, next) => {
9.   try {
10.     const { code, avatarUrl, userName } = req.body
11.     let token = Token.tokenSet()
12.     // 当前微信开发者的appId
13.     const appId = 'wx66dee29d470c6095'
14.     const appSecret = '79ee1240fa1ee8f67066d67fa7692e21';
15.     // 微信登录的第三方接口
16.     const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`
17.     //调用微信登录第三方接口
18.     const { data: { openid, session_key } } = await axios({ url, method: 'get' })
19.      //更新当前用户的信息
20.     const updateInfo = await db.findOneAndUpdate({ openId: openid }, { $set: { sessionKey: session_key, token,avatarUrl,userName } })
21.     if (updateInfo) {
22.       const userInfo = await db.findOne({openId: openid})
23.       return res.jsonp({ code: 1, message: '登录成功', data: userInfo})
24.     } else {
25.       //如果当前用户没有登录则插入一条新的用户信息
26.       const insertInfo = { openId: openid, sessionKey: session_key, userType: 2, status: 1, token, userName,avatarUrl }
27.       const userInfo = await db.findOne({openId: openid})
28.       await db.insertMany(insertInfo)
29.       return res.jsonp({ code: 1, message: '登录成功', data: userInfo})
30.     }
32.   } catch {
33.     next({ message: '接口错误' })
34.   }
35. })

复制代码

 
完备的代码逻辑可参考
前端：https://gitee.com/ZHANG_6666/uni-app/blob/master/pages/myCenter/myCenter.vue
后端：https://gitee.com/ZHANG_6666/express–vue3–ant-design2/blob/master/routes/users.js
 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金