小程序的登录授权
2021/4/14 22:25:28
本文主要是介绍小程序的登录授权,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
- 登录授权流程
- 项目中的实现思路
点击进入店铺--进入首页--获取到token,uid 如何获取token 第一步:通过wx.login得到code,调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息 第二步:通过调用公司后台接口(自动注册/登录接口)获取腾讯用户的匿名信息 //引入接口 const {authorize}=require('../../http/api') //登录/注册 goLogin() { wx.login({ success(res) { console.log(res); let {code}=res; authorize(code).then(res=>{ console.log('我能获取到信息:',res); if(res.code===0) { //解析出token,uid,但是得到是匿名用户信息 let {token,uid}=res.data if(!wx.getStorageSync('token')) { wx.setStorageSync('token', token) } } }) } }) } 第三步:获取微信详细的用户信息 获取微信用户详细: 以前:wx.getUserInfo() 现在:wx.getUserProfile() token:是用户的唯一标识,是用户(前端)登录之后,后台对用户名,密码和失效时间加密返回给浏览器的一个字符串,用户(前端)可以利用token写其他业务代码 检测token是否有效:调取公司后台接口来检测是否有效 user/check-token 检测微信登录态是否有效 wx.checkSession() //检测微信登录状态 async function checkSession(){ return new Promise((resolve, reject) => { wx.checkSession({ success() { return resolve(true) }, fail() { return resolve(false) } }) }) } // 整体检测微信和token是否失效,返回 true / false async function checkHasLogined() { const token = wx.getStorageSync('token') if (!token) { return false } const loggined = await checkSession() if (!loggined) { wx.removeStorageSync('token') return false } const checkTokenRes = await WXAPI.checkToken(token) if (checkTokenRes.code != 0) { wx.removeStorageSync('token') return false } return true } 小程序登录、用户信息相关接口调整说明: https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801
总结微信登录授权流程:
-
通过wx.login获取code
-
通过code换取用户的匿名信息,并将获取的token缓存起来
- 通过调取微信wx.getUserProfile()方法来获取用户详细信息
toLogin() { wx.getUserProfile({ lang:'zh_CN', desc:'我要获取信息用户', success:(res)=>{ console.log('用户详情:',res); this._updateUser(res.userInfo) } }) }
- 再调公司后台修改用户的接口(/user/modify),来更新用户信息
/** * 修改用户信息 * @obj {Object} 要接收的对象参数如下: * city:所在城市 * nick:昵称 * province:省份 * avataUrl:头像地址 * gender:性别 * token */ modifyUser:(obj)=>{ return request('user/modify','POST',obj,true) }, _updateUser(userInfo) { let token=wx.getStorageSync('token'); let {city,nickName,avatarUrl,province,gender}=userInfo; let _data={city,nick:nickName,avatarUrl,province,gender,token} // console.log(_data); modifyUser(_data).then(res=>{ console.log('修改成功:',res); })
- 最后拉取用户信息,将用户信息渲染到视图上
//获取用户信息 async getUserInfo() { let token=wx.getStorageSync('token') //调取用户详情的接口 const res=await getUserDetail(token) console.log('调取用户详情:',res); let _data={} if(res.code===0) { let {avatarUrl,id,nick}=res.data.base; let n=0; if(nick && avatarUrl ) { n=2; }else { n=1; } _data={avatarUrl,id,nick,isShow:n} this.setData(_data) } }
这篇关于小程序的登录授权的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具