微信小程序登录流程,双登录,手机号登录和账户密码登录

news/2024/7/20 2:44:52 标签: 微信小程序, 小程序, 服务器

一、第一步:

在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
        })
      }
    })
  }
}


http://www.niftyadmin.cn/n/825333.html

相关文章

linux vim python ide 配置

sudo apt-get install vim 使用vim进行python开发 2009-11-28 14:33:331 Pydiction-----vim的python自动完成插件下载&#xff1a;http://vim.sourceforge.net/scripts/script.php?script_id850&#xff0c;把python_pydiction.vim复制到 ~/.vim/after/ftplugin/ 下面把comple…

element-plus输入框显示图标

先安装icon # NPM $ npm install element-plus/icons-vue # Yarn $ yarn add element-plus/icons-vue # pnpm $ pnpm install element-plus/icons-vue <template><div class"page"><!--标题--><lstitle title"基础设置" enTitle&qu…

codeforces 132C Logo Turtle--- dp dfs

题目在这里&#xff1a;点击打开链接 题意&#xff1a; F表示前进一步&#xff0c;T表示变成反方向 给一串FT字符&#xff0c;和一个n&#xff0c;表示可以改变多少次&#xff0c;求可以走到的离原点最远的距离 改变就是F变成T、T变成F 关键&#xff1a; dfs(int d,int pos,int…

promise解决异步请求

funA(obj){A.then(res>{retrun new promise((resolve, reject)>{console.info(AAA,res)resolve(obj.result(res))})}) }funB(){funA({result>{B.then(res>{console.info(result,res)})}}) }

Cocoa touch(三):UIResponder

UIResponder是程序中可响应类的基类&#xff0c;主要提供了与用户交互的一些事件和属性等。firstResponder表示当前与用户交互的控件&#xff0c;常用的方法resignFirstResponder使用控件失去响应。 interface UIResponder : NSObject {private }- (UIResponder*)nextResponder…

mouted无法初始化style样式问题

场景&#xff1a; 明明有写style样式&#xff0c;检查中也有样式存在&#xff0c;但是实际效果却没有使用到该样式。很有可能就是mouted这个函树导致的&#xff0c;因为他先加载和渲染dom节点再加载样式效果&#xff0c;可能要显示的那部分数据的渲染刚好卡在了加载样式之前。…

SharePoint 2013的100个新功能之内容管理(三)

一&#xff1a;视频中的人 作为视频内容类型的一部分&#xff0c;一个新的栏“视频中的人”被加入到其中&#xff0c;可以指定视频中的人&#xff0c;作为视频的元数据。当你编辑视频属性时可以查看到该栏。更多信息 二&#xff1a;重建索引 一个新的选项&#xff0c;重新创建列…

因为v-if导致ref失效设置this.$nextTick()也无效。

<template v-if"tabsValue 3"><refund-records:row"row"ref"refundChild"/></template> 在组件外设置v-if&#xff0c;怎么写ref都是undefined。使用了this.$nextTick()也无效果。 写法一、 <refund-records:row"…