koa2实现微信授权登录


oauth2.0协议工作原理

在这里插入图片描述
token有两种,access和refresh ,token的有效期很短,如果想将有效期变长,可以请求一个地址去刷新token

授权登录准备和思路
准备工作
  • 正式环境:申请微信公众号和备案域名
  • 开发环境:准备花生壳/ngrok/natapp ( 访问内网环境的服务 )

测试账号配置: 微信网页授权
1·、登录公众号—>开发者工具—>公众号平台测试账号
在这里插入图片描述
在这里插入图片描述
appID和appsecret要放到node中使用
2、加入自己的微信号
在这里插入图片描述

3、输入域名
在这里插入图片描述
在这里插入图片描述

微信登录的两种方式:
两种账号体系方式
  • 自己系统没有账号体系,直接用微信账号作为自己的系统账号
  • 用微信账号授权,然后绑定自己系统账号

注意:
snsapi_userinfo 只有第一次访问才会弹出授权页面,已经授权后就不再需要了

koa2实现微信公众号登录
// 安装koa-generator
npm install koa-generator -g
  
// 创建一个名为server的项目
koa2  server  

cd  server  &&  npm  install

// 安装node自动重启工具
npm install -g nodemon

// 启动
nodemon bin/www

// index.js
const router = require('koa-router')()
const superagent = require('superagent') // 一个node环境http(s)请求中间件
const { query } = require('../db/db')
const APPID = 'wx524c7234498cfc11'
const appsecret = 'b845362de2514656ce5893a0f9f617ff'
const REDIRECT_URI = 'http://cff.natapp1.cc/wxcallback'

router.get('/', async (ctx, next) => {
  await ctx.render('index', {
    title: 'Hello Koa 2! sss'
  })
})

// 1、用户同意授权,获取code
router.get('/goLogin', async (ctx, next) => {
  let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID +
    '&redirect_uri=' + REDIRECT_URI +
    '&response_type=code' +
    '&scope=snsapi_userinfo' +
    '&state=STATE#wechat_redirect'
  ctx.response.redirect(url) // 重定向到这个地址
})

// 2、通过code换取网页授权access_token
router.get('/wxcallback', async (ctx, next) => { /// wxcallback?code=011k2BDK1gY6T30Cl7DK1kaxDK1k2BD8&state=STATE
  let code = ctx.query.code
  let access_token = ''
  let openid = ''
  await superagent.get('https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + APPID +
    '&secret=' + appsecret +
    '&code=' + code +
    '&grant_type=authorization_code')
    .then(res => {
      // 此处本来应该用res.body获取返回的json数据,但总是获取不到,只能用text代替
      let result = JSON.parse(res.text)
      access_token = result.access_token
      openid = result.openid
    })
    .catch(res => {
      console.log(res)
    })

  // 3、刷新access_token(如果需要)
  // 4、拉去用户信息
  let res = await superagent.get(
    'https://api.weixin.qq.com/sns/userinfo?access_token=' + access_token +
      '&openid=' + openid +
      '&lang=zh_CN')
  let info = JSON.parse(res.text)
  /*
     // 1种情况,是基于微信授权的账号作为本系统的账号体系来使用
     // 数据库查询语句
     let sqlStr = 'INSERT INTO tt_user (`nickname`) VALUES("' + info.nickname + '")'
     // 执行语句
     query(sqlStr, [], (error, results, fields) => {
       if (error) {
         console.log('INSERT ERROR - ', error.message)
         return
       }
       console.log('INSERT SUCCESS')
     })
     */

  // 2种情况,有账号体系,微信账号作为一个关联,来关联我们的账号体系
  // 2.1数据库查询语句
  // 根据openid查询是否有数据
  let sqlStr = 'SELECT * FROM tt_user where openid = "' + info.openid + '" '
  let result = await query(sqlStr)
  let sqlStr2
  if (result[0].openid == null) { // 数据库是否存在openid
    // 不存在openid,把信息插入表里
    sqlStr2 = 'INSERT INTO tt_user (`openid`,`sex`,`country`,`headimgurl`) VALUES("' + info.openid + '","' + info.sex + '","' + info.country + '","' + info.headimgurl + '")'
  } else {  // 存在openid
    // 存在就更新  nickname = "' + result.nickname + '" ,
    sqlStr2 = 'UPDATE tt_user SET headimgurl = "' + info.headimgurl + '" WHERE openid = "' + info.openid + '"'
  }
  query(sqlStr2, [], (error, results, fields) => {
    if (error) {
      console.log('INSERT ERROR - ', error.message)
      return
    }
    console.log('INSERT SUCCESS')
  })
  ctx.response.redirect('/home?openid=' + result[0].openid) // 重定向到这个地址
})

router.get('/home', async (ctx, next) => {
  // 根据openid查询数据库是否有手机号,没有就跳到注册页进行关联
  let openid = ctx.query.openid
  let sqlStr = "SELECT * from tt_user where openid = '" + openid + "'"
  let result = await query(sqlStr)
  let sqlStr2
  if (result[0].phone == null) {  // 不存在手机号
    ctx.response.redirect('/registe?openid=' + openid)
  } else { // 存在手机号   更新 微信名字、头像
    sqlStr2 = 'UPDATE tt_user SET nickname = "' + result[0].nickname + '" , headimgurl = "' + result[0].headimgurl + '" WHERE openid = "' + result[0].openid + '"'
    await ctx.render('home', {
      title: '欢迎登录'
    })
  }
  query(sqlStr2, [], (error, results, fields) => {
    if (error) {
      console.log('INSERT ERROR - ', error.message)
      return
    }
    console.log('INSERT SUCCESS')
  })
})

router.get('/registe', async (ctx, next) => {
  let openid = ctx.query.openid
  // 把openid、头像带过来
  await ctx.render('registe', {
    title: 'Hello Koa 2! sss',
    openid: openid,
    img: 'https://ucenter.51cto.com/images/noavatar_middle.gif'
  })
})

router.get('/regsave', async (ctx, next) => {
  let openid = ctx.query.openid
  let phone = ctx.query.phone
  let email = ctx.query.email

  // 根据openid把手机号、邮箱号更新到数据库
  let sqlStr = 'UPDATE tt_user  SET phone = "' + phone + '" , email = "' + email + '" WHERE openid = "' + openid + '"'
  query(sqlStr, [], (error, results, fields) => {
    if (error) {
      console.log('INSERT ERROR - ', error.message)
      return
    }
    console.log('INSERT SUCCESS')
  })

  await ctx.render('home', {
    title: '欢迎登录'
  })
})

module.exports = router

在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现最简单的注册登录功能,可以借助Vue和Koa2进行开发。 首先,在Vue中创建两个页面组件,一个是注册页面,一个是登录页面。注册页面通过表单收集用户的注册信息,包括用户名和密码,并发送POST请求给后端。登录页面同理,收集用户的登录信息,并发送POST请求给后端。 在Koa2中,需要使用koa-router中间件来处理路由,监听前端发送的注册和登录请求。对于注册请求,需要将用户提供的用户名和密码存储到数据库中。对于登录请求,需要从数据库中查询用户提供的用户名和密码是否匹配。 数据库可以选择使用MySQL、MongoDB等,具体可以根据实际需求选择。在Koa2中可以使用相应的数据库连接库进行连接和操作。 在注册和登录过程中,需要对用户的密码进行加密存储,可以使用bcyrpt等密码加密库进行加密。 另外,为了实现用户登录状态的保持,可以使用session或者token进行用户身份验证。当用户注册或登录成功后,将相应的用户信息存储到session或者token中。在后续用户的请求中,通过校验session或者token来验证用户的身份和权限。 当用户注册或登录成功后,可以在前端页面进行相应的提示或跳转,同时可以通过路由守卫等方式限制未登录用户的访问权限。 总的来说,Vue和Koa2可以很好地配合实现最简单的注册登录功能。具体实现过程可以根据项目需求和技术栈的选择进行调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值