微信小程序实现登陆功能

先上张图：

如果到这就完了，此时的你心里是不是：

这张图是从微信开发文档上抄来的，接下来我们结合案例一步一步实现微信授权登陆的功能。

第一步：调用wx.login获取code

代码：

  // 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdconsole.log(res)}})

第二步：后台通过code获取openid、sessionKey、unionId，这里我们用node搭建一个简易后台

1、openId: 用户在当前小程序的唯一标识

2、sessionKey：具体啥作用我也不明白，先不管

3、unionId：用户在所有小程序、公众号、APP的唯一标识

代码：

const express = require('express')
const bodyParser = require('body-parser')
const jwt = require('jsonwebtoken')
const axios = require('axios')
// 创建服务
const app = express()// 创建路由
const router = express.Router()// 登录
router.post('/api/login', (request, reponse) => {let wxCode = request.body.wxCode// 向微信服务器请求获取openidaxios.request({url: 'https://api.weixin.qq.com/sns/jscode2session',method: 'get',params: {appid: '换成你的',    //小程序 appIdsecret: '换成你的',   //小程序 appSecretjs_code: wxCode,      //登录时获取的 codegrant_type: 'authorization_code'    //授权类型，此处只需填写 authorization_code}}).then(res => {// result就是我们拿到的session_key、openid、unionidlet result = res.data.datareponse.send(result)})
})app.use(bodyParser.json())
app.use(router)app.listen(3000, (err) => {if(err) {console.log(err)}console.log('服务启动在3000端口')
})

通过上一步我们已经拿到openid、session_key，我们可以使用一些加密工具按照自己的规则来生成token返给前端，这里我们使用jsonwebtoken；

1、’secret‘：加密规则

2、expiresIn: token有效期

代码：

// result就是我们拿到的session_key、openid、unionidlet result = res.data.data// 生成tokenlet token = jwt.sign({ openid: result.openid, session_key: result.session_key}, 'secret', { expiresIn: 3600 * 24 * 7 })reponse.send({token})

第三步：前端请求接口获取token

代码：

// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdwx.request({url: 'http://localhost:3000/api/login',method: 'POST',data: {wxCode: res.code},success: result => {console.log(result)}})}})

拿到token后可以放在本地缓存，在随后的业务逻辑中携带token传给后台，后台来校验token的有效性和时效性；

这里提一下。我们常见的业务场景是打开一个小程序，进行相关操作提示微信授权，其实它这里的一个微信授权登陆是用来获取用户信息的，并不是登陆用的，这个也根据业务场景来决定。

详细地址：https://huolihua.cn/#/article-detail/44l5uadw3vu00000

微信小程序实现登陆功能相关推荐

python玩微信小程序游戏_使用python实现微信小程序自动签到功能
功能描述目标完成多账号微信小程序每天自动签到输出签到成功则向微信群发送签到成功的信息否则提示用户签到失败,需手动签到包管理 requests itchat time threading 程序 ...
app error login.php,GitHub - jmluang/weappLogin-for-laravel: 封装了微信小程序的登陆逻辑，包含了数据库操作...
laravel-weapp A weapp login logic Laravel warpper 本仓库从 wafer2开发套件中提取并封装了微信小程序的登陆逻辑并转移到Laravel中,不仅降低 ...
微信小程序：常用功能5——在线客服功能的实现
微信小程序:常用功能5--在线客服功能的实现微信小程序的客服功能比较纯熟,非常简单易用,只要在公众平台小程序账号中设置好相关客服人员,基本用户就能实现与客服人员的实时对话. 首先登陆微信公众平台小程 ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序语音识别java_微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序拼团功能页面展示
微信小程序拼团功能页面展示一.拼团功能拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...

微信小程序实现登陆功能

微信小程序实现登陆功能相关推荐

最新文章

热门文章