微信小程序登录流程,双登录,手机号登录和账户密码登录_小程序账号密码登录-程序员宅基地

技术标签: 微信小程序  服务器  小程序  

一、第一步:

在app.js文件中调用wx.login方法发送res.code和appid给后台,后台返回openid和session_key,把openid和session_key存入storage中。因为之后获取解码的手机号码需要用到session_key。

app.js文件中
// 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        loginTool.getOpenId(res.code)
      }
    })

 

 二、写点击账号登陆或者微信登录的触发事件,用button标签,设置open-type="getPhoneNumber"就可以弹出获取手机号的弹框 ,bindgetphonenumber="getPhoneNumber"是点击触发函数。

<button class="denglubtn flexCenten" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumberByLogin">
          登录
        </button>


<button class=" wxLogin flexCenten" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
    <image src="../../image/login/wechat.png" class="wechatIcon"></image><text>微信登录        
    </text>
</button>

 三、从点击事件中自带的参数中可获取到加密后的手机号码,把encryptedData,iv,session_key传给后端,后端返回解密后的手机号码过来,拿到手机号码后,调用微信登录后端写的接口把appid和手机号码传给后端,后端返回登陆状态,根据状态做出成功和失败的现在。

/**
   * 获取手机号码
   */
  getPhoneNumber(e) {
    if (e.detail.errMsg == 'getPhoneNumber:ok') {
      let param = {
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv,
        session_key: storageData.getSession_key()
      }
      decryptPhone(param).then(res => {
        if (res.code == 200) {
          this.wechatLogin(res.dataInfo.phoneNumber);
        }
      })
    } else {}
  },
/**
   * 微信登录
   */
  wechatLogin(moData) {
    loginTool.changeUser(moData, '', '../../pages/index/index')
  },

/**
   * 获取密码登录号码
   */
  getPhoneNumberByLogin(e) {
    this.normalLogin();
  },
/**
   * 账户密码登录
   */
  normalLogin() {
    if (this.data.userName == '') {
      wx.showToast({
        title: '请输入手机号',
        icon: 'error',
        duration: 2000
      })
    } else if (this.data.passWord == '') {
      wx.showToast({
        title: '请输入密码',
        icon: 'error',
        duration: 2000
      })
    } else {
      loginTool.changeUser(this.data.userName, this.data.passWord, '../../pages/index/index')
    }

  },
/**
 * 切换账号
 * @param {*} e 
 */
function changeUser(mo, password, state) {
  if (password == '') {
    //微信登录
    let param = {
      appId: wx.getAccountInfoSync().miniProgram.appId,
      mo: mo
    }
    authLogin(param).then(res => {
      if (res.code == 200) {
        登录成功
      } else {
        wx.showToast({
          title: res.message,
          icon: 'error',
          duration: 2000
        })
      }
    })
  } else if (password != '') {
    //账号密码登录
    let param = {
      mo: mo,
      password: password
    }
    login(param).then(res => {
      if (res.code == 200) {
        登录成功
      } else {
        wx.showToast({
          title: res.message,
          icon: 'error',
          duration: 2000
        })
      }
    })
  }
}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42661587/article/details/122936636

智能推荐

UVa 11287 - Pseudoprime Numbers_uva11287-程序员宅基地

文章浏览阅读168次。题目判断一个数是不是为伪素数。能够通过费马测试的合数。分析数论,直接按照定义判断即可。说明学python,ヾ(◍°∇°◍)ノ゙import mathdef is_prime(x): for i in range(2, int(math.sqrt(x))+2): if x % i == 0: return False ..._uva11287

大学python实训总结-【python实训总结和体会】作文写作问答 - 归教作文网-程序员宅基地

文章浏览阅读4.6k次。对python学习的总结怎么写1.Python初步Python是一种面向对象、直译式计算机程序设计语言。公认的特点是简单、易学、免费、开源等等。个人觉得特别喜欢Python的地方是对字符串操作特别的灵活、采取缩进的方式简单明了(虽然百度百科上把这个说成是局限)、以及简单的语法。Python 和c类似,是顺序进行的,不想visual c++是事件触发不同模块进行的。操作和matlab相似,有编辑窗口..._大学生python实训总结

解决Win下使用conda activate python虚拟环境无效的问题_conda activate environment不生效-程序员宅基地

文章浏览阅读8.9k次,点赞14次,收藏9次。在有些Win系统中会出现激活用户自定义的虚拟环境无效的问题conda activate env输入上述代码,并没有进入名为env的虚拟环境中。解决方法:首先输入命令行:activate可以看到进入了(base)环境中再输入:conda activate env即能成功进入名为env的虚拟环境..._conda activate environment不生效

怎么开启windows hypervisor platform,解决hypervisor platform消失无法安装的问题-程序员宅基地

文章浏览阅读3.7w次,点赞7次,收藏24次。正常的windows功能面板我的很好,没有安装windows hypervisor platform的机会,但是没关系然后cmd 或powershll 管理员身份运行Dism /online /Get-Features可以查看到hypervisor platform是禁用状态pushd “%~dp0”dir /b %SystemRoot%\servicing\Packages*..._windows hypervisor platform

MediaPlayer(二)--MediaPlayer基本框架_mediaplayerclassfactory-程序员宅基地

文章浏览阅读596次。MediaPlayer涉及的的文件路径这里参考的是android8.1 的代码JAVA类的路径:frameworks/base/media/java/android/media/MediaPlayer.javaJNI路径:frameworks/base/media/jni/android_media_MediaPlayer.cpp编译为 libmedia_jni.sonative 层的接口frameworks/av/media/libmedia编译为 libmedia.sonative层_mediaplayerclassfactory

精选微软等公司数据结构+算法面试100题带答案(41-60)_数据结构中len=sizeof(data)/sizeof(int)-1-程序员宅基地

文章浏览阅读3.7k次。41、求固晶机的晶元查找程序。晶元盘由数目不详的大小一样的晶元组成,晶元并不一定全布满晶元盘,照相机每次这能匹配一个晶元,如匹配过,则拾取该晶元,若匹配不过,照相机则按测好的晶元间距移到下一个位置。求遍历晶元盘的算法 求思路。(不懂)42、两个非降序链表的并集,1->2->3 和 2->3->5 并为 1->2->3->5。另外只能输出结果,不能修改两个链表的数据。思路:只用输出结果,并不_数据结构中len=sizeof(data)/sizeof(int)-1

随便推点

成本中心通过利润中心来和公司代码对应_sap 成本中心关联公司-程序员宅基地

文章浏览阅读7.4k次,点赞2次,收藏2次。成本中心是无法直接和公司代码进行配对的。但是利润中心能够绑定公司代码再通过利润中心的对应公司代码可以进行成本中心对应公司代码的对应_sap 成本中心关联公司

真实职场关于Web api学习指南(免费开放)一一5.Web api服务结构解析_c# .net5 web api 原理-程序员宅基地

文章浏览阅读1.6k次。真实职场关于Web api学习指南(免费开放)一一5.Web api服务结构解析_c# .net5 web api 原理

19. 二元连续型随机变量,联合概率密度_二元联合密度函数的分布函数-程序员宅基地

文章浏览阅读4.8k次,点赞5次,收藏15次。文章目录二元连续型随机变量,联合概率密度联合概率密度函数概率密度的性质二元连续型随机变量,联合概率密度联合概率密度函数定义:对于二元随机变量 (X,Y)(X, Y)(X,Y) 的 分布函数 F(x,y)F(x, y)F(x,y),如果存在非负函数 f(x,y)f(x,y)f(x,y),使对于任意 x,yx,yx,y,有F(x,y)=∫−∞x∫−∞yf(u,v) dudvF(x,y) ..._二元联合密度函数的分布函数

【PLC毕业设计】触摸屏立体车库控制系统毕业论文_200smart做毕业设计-程序员宅基地

文章浏览阅读2.2k次,点赞2次,收藏20次。【PLC毕业设计】触摸屏立体车库控制系统毕业论文_200smart做毕业设计

检测用户输入的单词是否是回文单词。所谓回文单词,是指单词逆序与原单词相同,例如:levelpop noon等_编写一个程序来检查是否可以重新排列给定的单词字母来形成回文单词。 回文是一个-程序员宅基地

文章浏览阅读390次。检测用户输入的单词是否是回文单词。所谓回文单词,是指单词逆序与原单词相同,例如:levelpop noon等_编写一个程序来检查是否可以重新排列给定的单词字母来形成回文单词。 回文是一个

《使用Java理解程序逻辑》内部测试机试题_使用面向对象思想,编写java程序。键盘接收用户输入的5位学生(student)的姓名(name-程序员宅基地

文章浏览阅读1.5k次。《使用Java理解程序逻辑》内部测试机试题 一、语言和环境 A、实现语言 Java B、环境要求 MyEclipse 10.7 二、功能要求 本次测试卷由下面4个机试题目组成。 1.编写Java程序,实现的..._使用面向对象思想,编写java程序。键盘接收用户输入的5位学生(student)的姓名(name

推荐文章

热门文章

相关标签