微信小程序注册与登录
登录
常规的登录流程时只存在客户端与开发者服务器两个端,而微信登录则具有微信接口服务介入;
如上图所示关于微信登录流程:
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
·)来校验登录凭证,此处的appid
,secretid
就是自己的小程序appid
,sercetId
,code
也就是前端传递的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="请输入昵称" />
微信小程序注册与登录相关推荐
- 微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替 完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面 主页面login.js代码 // pages/login/logi ...
- 万能门店小程序_超市门店微信小程序注册流程
现在超市门店商家利用小程序卖货已经非常普遍,小程序可以便捷地连接线上线下通道,让商家不再局限于门店周围的流量,能够从微信获取更多客户,从而提升销量和店铺知名度.超市要想有自己的线上电商小程序,就得先注 ...
- 微信小程序学习笔记02:微信小程序注册
文章目录 零.学习目标 一.小程序注册方法 1.注册 2.登录 二.小程序开发工具 1.下载开发工具 2.安装开发工具 3.启动开发工具 三.创建第一个小程序 1.启动开发者工具 2.新建项目 3.模 ...
- 仅需三步完成微信小程序注册
因为自己做些项目,所以边做边整理一些笔记,方便随时查阅及后期内容补充. 微信小程序注册步骤分为三步: 1,帐号信息 2,邮箱激活 3,信息登记 1,帐号信息-进入微信公众平台官方网址,填写账号信息,注 ...
- 微信小程序注册/登陆,若依后台获取token
微信小程序注册/登陆,若依后台获取token 后端接口: @ApiOperation(value = "小程序登入", httpMethod = "POST") ...
- 微信小程序注册入口及流程(完整版教程)
微信小程序注册是免费的,在腾讯云微信公众平台即可注册,无论是个人.企业都可以免费注册微信小程序,先输入邮箱注册激活,然后填写主体类型对应的证件信息,最后管理员身份验证使用维信扫一扫即可,小程序5来详细 ...
- 微信小程序-注册成为小程序开发者
微信小程序-注册成为小程序开发者 #登录微信公众平台 htttps://mp.weixin.qq.com 注册账号 选择小程序 填写账户信息 这里需要注意:每个邮箱只能申请一个小程序,且该邮箱将作为登 ...
- 微信小程序如何进行登录授权和获取用户信息
微信小程序如何进行登录授权和获取用户信息
- 微信小程token_微信小程序开发之登录换取token
本文将带你了解微信小程序开发之登录换取token,希望本文对大家学微信有所帮助 前言:这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说 ...
最新文章
- Linux中的数据流重定向
- 【收藏】批量导出docker镜像
- c#与mysql数据库连接以及.net framework版本修改问题
- 解决Mac nginx问题 [emerg] 54933#0: bind() to 0.0.0.0:80 failed (13: Permission denied)
- 关于低代码自定义表单的思路和想法
- 了解一些常用的牛逼编译器(不限制编程语言, 不限制平台)
- js判断对象是否为空或对象的属性是否为空
- 算法:回溯十六 Add and Search Word添加并查找单词
- 概率论与计算机的关系小论文,概率论与数理统计论文
- tomcate免安装版内存设置
- 在Centos7上安装Docker
- android 打开qq临时会话,Electron 中打开 QQ 临时会话
- 三月模拟题——炉石传说
- 前端背景图放置_web前端入门到实战:css 中的背景图片小技巧和存在的坑
- 互联网:常见运营术语,PV、UV、GMV、CVR等
- 火车头采集器基本用法
- BUUCTF:zip
- 淘宝/天猫API:item_search_neighbors-邻家好货
- NFT 的洗盘交易,真的赚钱吗?
- 将ubuntu 14.04 LTS设置成北京时间