登录


常规的登录流程时只存在客户端与开发者服务器两个端,而微信登录则具有微信接口服务介入;
如上图所示关于微信登录流程:
1、通过wx.getUserProfile获取用户数据;
2、点击授权按钮调用wx.login获取用户的code,这里的code临时的code
3、从客户端发送请求到开发者服务器,传递userInfo与code,此处使用的是nodejs搭建的服务
4、在开放者服务器需要去调用微信接口(·https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${secretid}&js_code=${code}&grant_type=authorization_code·)来校验登录凭证,此处的appidsecretid就是自己的小程序appidsercetIdcode也就是前端传递的code;
5、如果登录凭证校验成功后会返回session_key及用户的openid,此处的openid是微信用户的唯一性id;
6、这里就可以查询数据库是否存在openid这条数据,如果不存在则将userinfo与openid存储到数据库中,如果存在则更新数据即可
7、我们将返回的openid加密后放在token中返回给前端;
8、前端就可以将这个token存储起来,在需要token进行登录验证的接口携带token,来进行token验证。

 login: async (req, res) => {const { code } = req.query;const { userInfo } = req.body;const appid = "xxxxx";const secretid = "xxxxxx";const { data } = await axios.get(`https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${secretid}&js_code=${code}&grant_type=authorization_code`);const token = jwt.sign(data, jwtSecretKey);if (data) {const selectSql = `select * from user where openId = ?`;db.dbConnect(selectSql, data.openid, (err, result) => {if (err) res.send(err);if (result.length === 0) {const insertSql = `insert into user set ?`;db.dbConnect(insertSql,{openId: data.openid,nickName: userInfo.nickName,avatarUrl: userInfo.avatarUrl,},(err, data) => {if (err) res.send(err);if (data.affectedRows !== 1) return res.send("授权失败,请重试");res.send({token: "Bearer " + token,status: 200,message: "授权成功",});});} else {const sql = `update user set ? where openId = ?`;db.dbConnect(sql,[{openId: data.openid,nickName: userInfo.nickName,avatarUrl: userInfo.avatarUrl,},data.openid,],(err, result) => {if (err) return res.cc(err);res.send({token: "Bearer " + token,status: 200,messages: "授权成功123123",});});}});}},

注册

注册实际上是登录时将用户数据存储在数据库的一个操作。

获取用户数据wx.getUserProfile

调用方式: 页面产生点击事件才可以调用。

 wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写success: (res) => {console.log(res)}})

当基础库小于等于2.27.0版本时获取用户信息会让用户进行允许操作,并且能获取到用户头像及微信名。


当基础库大于2.27.0版本时,不会弹出允许弹窗,但是返回的用户数据中头像为微信默认灰色头像,nickName返回为微信用户。

头像昵称填写功能

微信推荐单独开一个页面让用户能设置头像及昵称,提供的两个button会默认返回微信头像和微信昵称;
使用方法如下:
1、设置头像
open-type=“chooseAvatar”

    <buttonclass="avatar-wrapper"open-type="chooseAvatar"bind:chooseavatar="onChooseAvatar"><image class="avatar" src="{{ avatarUrl }}"></image></button>

2、设置昵称
type为nickname

<input type="nickname" class="weui-input" value="nickName" onchange="setNickName" placeholder="请输入昵称" />

微信小程序注册与登录相关推荐

  1. 微信小程序-注册登录功能-本地数据保存-页面数据交替

    Title:微信小程序-注册登录功能-本地数据保存-页面数据交替 完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面 主页面login.js代码 // pages/login/logi ...

  2. 万能门店小程序_超市门店微信小程序注册流程

    现在超市门店商家利用小程序卖货已经非常普遍,小程序可以便捷地连接线上线下通道,让商家不再局限于门店周围的流量,能够从微信获取更多客户,从而提升销量和店铺知名度.超市要想有自己的线上电商小程序,就得先注 ...

  3. 微信小程序学习笔记02:微信小程序注册

    文章目录 零.学习目标 一.小程序注册方法 1.注册 2.登录 二.小程序开发工具 1.下载开发工具 2.安装开发工具 3.启动开发工具 三.创建第一个小程序 1.启动开发者工具 2.新建项目 3.模 ...

  4. 仅需三步完成微信小程序注册

    因为自己做些项目,所以边做边整理一些笔记,方便随时查阅及后期内容补充. 微信小程序注册步骤分为三步: 1,帐号信息 2,邮箱激活 3,信息登记 1,帐号信息-进入微信公众平台官方网址,填写账号信息,注 ...

  5. 微信小程序注册/登陆,若依后台获取token

    微信小程序注册/登陆,若依后台获取token 后端接口: @ApiOperation(value = "小程序登入", httpMethod = "POST") ...

  6. 微信小程序注册入口及流程(完整版教程)

    微信小程序注册是免费的,在腾讯云微信公众平台即可注册,无论是个人.企业都可以免费注册微信小程序,先输入邮箱注册激活,然后填写主体类型对应的证件信息,最后管理员身份验证使用维信扫一扫即可,小程序5来详细 ...

  7. 微信小程序-注册成为小程序开发者

    微信小程序-注册成为小程序开发者 #登录微信公众平台 htttps://mp.weixin.qq.com 注册账号 选择小程序 填写账户信息 这里需要注意:每个邮箱只能申请一个小程序,且该邮箱将作为登 ...

  8. 微信小程序如何进行登录授权和获取用户信息

    微信小程序如何进行登录授权和获取用户信息

  9. 微信小程token_微信小程序开发之登录换取token

    本文将带你了解微信小程序开发之登录换取token,希望本文对大家学微信有所帮助 前言:这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说 ...

最新文章

  1. Linux中的数据流重定向
  2. 【收藏】批量导出docker镜像
  3. c#与mysql数据库连接以及.net framework版本修改问题
  4. 解决Mac nginx问题 [emerg] 54933#0: bind() to 0.0.0.0:80 failed (13: Permission denied)
  5. 关于低代码自定义表单的思路和想法
  6. 了解一些常用的牛逼编译器(不限制编程语言, 不限制平台)
  7. js判断对象是否为空或对象的属性是否为空
  8. 算法:回溯十六 Add and Search Word添加并查找单词
  9. 概率论与计算机的关系小论文,概率论与数理统计论文
  10. tomcate免安装版内存设置
  11. 在Centos7上安装Docker
  12. android 打开qq临时会话,Electron 中打开 QQ 临时会话
  13. 三月模拟题——炉石传说
  14. 前端背景图放置_web前端入门到实战:css 中的背景图片小技巧和存在的坑
  15. 互联网:常见运营术语,PV、UV、GMV、CVR等
  16. 火车头采集器基本用法
  17. BUUCTF:zip
  18. 淘宝/天猫API:item_search_neighbors-邻家好货
  19. NFT 的洗盘交易,真的赚钱吗?
  20. 将ubuntu 14.04 LTS设置成北京时间

热门文章

  1. matlab norm函数使用_matlab中norm函数的用法
  2. FreeSwitch配置
  3. pyqt4之QMessageBox用法
  4. jQuery中的Ajax (六个Ajax的操作方法) 细解!!!
  5. Java软件开发实习生面试题总结
  6. war包放入tomcat中无法自动解压
  7. 大数据治理解决方案PPT
  8. freeswitch被国外ip扫描,iptables解决办法
  9. 超详细超简单的搭建三台虚拟机集群
  10. 市场暴跌“祸害”DeFi,市场完善之后将更具抵抗力 | 分析