微信登录过程、openId、token详解(代码实现)

 更新时间:2024年08月15日 10:41:03   作者:youhebuke225  
这篇文章主要介绍了微信登录过程、openId、token详解,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

1 登录

当我们登录的时候需要用到一个微信的APIwx.login 详情点击

调用这个接口可以获取临时登录凭证code通过code我们可以得到户的唯一标识openid及本次登录的会话密钥session_key

2 微信登录过程

图示

关于微信登录过程,官网上面也有一个图示 详情点击,过程解释如下

  • 通过wx.login获取code
  • code发送给我们自己的服务器
  • 我们自己的服务器需要将appid+appsecret+code,三者结合到一起发送给微信服务器(appsecret的获取后面会说)
  • 当微信服务器拿到appid+appsecret+code,会返回给我们的服务器一些信息包括session_keyopenid
  • 项目服务器将session_keyopenid保存下来生成token并返回给客户端
  • 客户端调把token保存下来,以后每一次发送请求必须携带token

3 AppID和appsecret获取

首先注册 详情点击,如果有账号了选择登陆登陆之后,点击开发

3. 然后点击开发设置

4. 点击生成

5. 扫码进行身份的确认

6. 复制appSecret,保存好

4 代码实现

4.1 获取code

因为以后的每一次发送请求我们都需要携带token,所以code越早获取越好,我们可以选择加载App或者首页数据的时候进行获取code

  // 登录
  wx.login({
    success: res => {
      // 发送 res.code 到后台换取 openId, sessionKey, unionId
      // 1. 拿到code
      console.log('code'+ res.code)
      const code = res.code
      // 2. 将code发送给服务器,这里就需要我们的接口了
    }
  })

4.2 服务器端接口

项目服务器端需要整合appid+appsecret+code三个信息,去微信服务器端换取session_keyopenid,所以说我们需要一个微信服务区的接口

详情点击

接口

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

Koa2写服务器端接口

router.get('/getopenid',async (ctx,next)=>{
  // 得到前台出来的code
  const code = ctx.query.code
  //整合三者
  const appId = '	wx43cf35f51c3f8fe9'
  const appSecret = 'a9001166ca156245dbbbd3709a062a64'
  const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=$[code]&grant_type=authorization_code`
  let result = await fly.get(url)
  const userinfo = result.data
  // 生成token(自定义登录状态),返回给前端
  const token = jwt.sign({user},'hahahae')
  ctx.body = token
})
  • 这里用到一个flyio的库
  • 用到了jsonwebtoken的库

前端请求

wx.login({
  success: res => {
    // 发送 res.code 到后台换取 openId, sessionKey, unionId
    // 1. 拿到code
    console.log('code'+ res.code)
    const code = res.code
    // 2. 将code发送给服务器,这里就需要我们的接口了
    const token = wx.request({
      url: '/getopenid',
      data:code
    })
    // 3. 将token存入storge
    wx.setStorageSync('token', token);
  }
})

4.3 token的携带

一般现在的token携带有三种方式

  • cookie中(不推荐)
  • 作为参数放在url中
  • 放在请求头中(推荐)

发送请求的方式

wx.request({
      url: config.host + url,
      data,
      method,
      header: {
        authorization: token
      },
      success: (res) => {
        resolve(res.data)
      },
      fail: (error) => {
        reject(error)
      }
    })

后端验证token

// 测试验证身份token的接口
router.get('/test', (ctx, next) => {
  // 获取token的值
  let token = ctx.request.header.authorization;
  let result;
  try{
    result = jwt.verify(token, 'atguigu')
    console.log('验证结果', result);
    ctx.body = '验证成功'
  }catch (e) {
    ctx.body = '验证失败'
  }
});

result的数据形式为

  { session_key: 'bvVTSxZf3pzi5yKpCwQSxA==',
   openid: 'olnQ_5croJ_Qty51qrKTC9-wZJyY',
    iat: 1571228656 } 
  • iat: 加密时的时间
  • 返回的token也是又三部分组成,有.隔开

到此这篇关于微信登录过程、openId、token详解(代码实现)的文章就介绍到这了,更多相关微信登录 openId、token内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ES6/JavaScript使用技巧分享

    ES6/JavaScript使用技巧分享

    本篇文章主要给大家讲解了ES6/JavaScript使用技巧,需要的朋友参考一下吧。
    2017-12-12
  • js Clip的奇思妙想之文字拼接效果

    js Clip的奇思妙想之文字拼接效果

    CSS的确是很强大,很奇妙。很多爱好者时常可以用CSS做出一些让人意想不到的效果,比如用CSS做的灯笼、用CSS画的房子!然而这些东西酷归酷,说到底还只是一些不实用的东西。过滤之,过滤之……
    2008-11-11
  • js获取ajax返回值代码

    js获取ajax返回值代码

    这篇文章主要介绍了js如何获取ajax的返回值,需要的朋友可以参考下
    2014-04-04
  • es6中Promise 对象基本功能与用法实例分析

    es6中Promise 对象基本功能与用法实例分析

    这篇文章主要介绍了es6中Promise 对象基本功能与用法,结合实例形式分析了es6中Promise对象的基本功能、用法及操作注意事项,需要的朋友可以参考下
    2020-02-02
  • JS中关于事件处理函数名后面是否带括号的问题

    JS中关于事件处理函数名后面是否带括号的问题

    JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动。有两种常见的形式,分别是DOM Level 0 和DOM Level 2。今天总结一个关于事件处理程序的小细节。感兴趣的朋友一起学习吧
    2016-11-11
  • JS逆向之浏览器补环境图文详解

    JS逆向之浏览器补环境图文详解

    平时JavaScript逆向需要补环境或者补一些函数,下面这篇文章主要给大家介绍了关于JS逆向之浏览器补环境的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • JS实现获取剪贴板内容的方法

    JS实现获取剪贴板内容的方法

    这篇文章主要介绍了JS实现获取剪贴板内容的方法,涉及javascript基于clipboardData操作剪贴板的相关技巧,需要的朋友可以参考下
    2016-06-06
  • JS获取地址栏参数的几种方法小结

    JS获取地址栏参数的几种方法小结

    本篇文章主要是对JS获取地址栏参数的几种方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JavaScript输出斐波那契数列的实现方法

    JavaScript输出斐波那契数列的实现方法

    斐波那契数列来源于兔子繁殖问题,所以也叫兔子序列,下面这篇文章主要给大家介绍了关于JavaScript输出斐波那契数列的实现方法,需要的朋友可以参考下
    2021-06-06
  • js实现类似于add(1)(2)(3)调用方式的方法

    js实现类似于add(1)(2)(3)调用方式的方法

    这篇文章主要介绍了js实现类似于add(1)(2)(3)调用方式的方法,需要的朋友可以参考下
    2015-03-03

最新评论