小程序的登录授权

  1. 登录授权流程
  2. 项目中的实现思路
点击进入店铺--进入首页--获取到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

总结微信登录授权流程:

  1. 通过wx.login获取code

  2. 通过code换取用户的匿名信息,并将获取的token缓存起来

在这里插入图片描述
在这里插入图片描述

  1. 通过调取微信wx.getUserProfile()方法来获取用户详细信息
  toLogin() {
    wx.getUserProfile({
      lang:'zh_CN',
      desc:'我要获取信息用户',
      success:(res)=>{
        console.log('用户详情:',res);
        this._updateUser(res.userInfo)
      }
    })
  }
  1. 再调公司后台修改用户的接口(/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);
    })

  1. 最后拉取用户信息,将用户信息渲染到视图上
//获取用户信息
  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)

    }

  }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值