微信登錄過(guò)程、openId、token詳解(代碼實(shí)現(xiàn))

更新時(shí)間：2024年08月15日 10:41:03 作者：youhebuke225

這篇文章主要介紹了微信登錄過(guò)程、openId、token詳解,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

1 登錄

當(dāng)我們登錄的時(shí)候需要用到一個(gè)微信的APIwx.login 詳情點(diǎn)擊

調(diào)用這個(gè)接口可以獲取臨時(shí)登錄憑證code通過(guò)code我們可以得到戶的唯一標(biāo)識(shí)openid及本次登錄的會(huì)話密鑰session_key

2 微信登錄過(guò)程

圖示

關(guān)于微信登錄過(guò)程，官網(wǎng)上面也有一個(gè)圖示詳情點(diǎn)擊，過(guò)程解釋如下

通過(guò)wx.login獲取code
將code發(fā)送給我們自己的服務(wù)器
我們自己的服務(wù)器需要將appid+appsecret+code,三者結(jié)合到一起發(fā)送給微信服務(wù)器（appsecret的獲取后面會(huì)說(shuō)）
當(dāng)微信服務(wù)器拿到appid+appsecret+code，會(huì)返回給我們的服務(wù)器一些信息包括session_key和openid
項(xiàng)目服務(wù)器將session_key和openid保存下來(lái)生成token并返回給客戶端
客戶端調(diào)把token保存下來(lái),以后每一次發(fā)送請(qǐng)求必須攜帶token

3 AppID和appsecret獲取

首先注冊(cè) 詳情點(diǎn)擊，如果有賬號(hào)了選擇登陸登陸之后，點(diǎn)擊開(kāi)發(fā)

3. 然后點(diǎn)擊開(kāi)發(fā)設(shè)置

4. 點(diǎn)擊生成

5. 掃碼進(jìn)行身份的確認(rèn)

6. 復(fù)制appSecret，保存好

4 代碼實(shí)現(xiàn)

4.1 獲取code

因?yàn)橐院蟮拿恳淮伟l(fā)送請(qǐng)求我們都需要攜帶token,所以code越早獲取越好，我們可以選擇加載App或者首頁(yè)數(shù)據(jù)的時(shí)候進(jìn)行獲取code

  // 登錄
  wx.login({
    success: res => {
      // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
      // 1. 拿到code
      console.log('code'+ res.code)
      const code = res.code
      // 2. 將code發(fā)送給服務(wù)器，這里就需要我們的接口了
    }
  })

4.2 服務(wù)器端接口

項(xiàng)目服務(wù)器端需要整合appid+appsecret+code三個(gè)信息，去微信服務(wù)器端換取session_key和openid，所以說(shuō)我們需要一個(gè)微信服務(wù)區(qū)的接口

詳情點(diǎn)擊

接口

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

Koa2寫服務(wù)器端接口

router.get('/getopenid',async (ctx,next)=>{
  // 得到前臺(tái)出來(lái)的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（自定義登錄狀態(tài)），返回給前端
  const token = jwt.sign({user},'hahahae')
  ctx.body = token
})

這里用到一個(gè)flyio的庫(kù)
用到了jsonwebtoken的庫(kù)

前端請(qǐng)求

wx.login({
  success: res => {
    // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
    // 1. 拿到code
    console.log('code'+ res.code)
    const code = res.code
    // 2. 將code發(fā)送給服務(wù)器，這里就需要我們的接口了
    const token = wx.request({
      url: '/getopenid',
      data:code
    })
    // 3. 將token存入storge
    wx.setStorageSync('token', token);
  }
})

4.3 token的攜帶

一般現(xiàn)在的token攜帶有三種方式

cookie中（不推薦）
作為參數(shù)放在url中
放在請(qǐng)求頭中（推薦）

發(fā)送請(qǐng)求的方式

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

后端驗(yàn)證token

// 測(cè)試驗(yàn)證身份token的接口
router.get('/test', (ctx, next) => {
  // 獲取token的值
  let token = ctx.request.header.authorization;
  let result;
  try{
    result = jwt.verify(token, 'atguigu')
    console.log('驗(yàn)證結(jié)果', result);
    ctx.body = '驗(yàn)證成功'
  }catch (e) {
    ctx.body = '驗(yàn)證失敗'
  }
});

result的數(shù)據(jù)形式為

  { session_key: 'bvVTSxZf3pzi5yKpCwQSxA==',
   openid: 'olnQ_5croJ_Qty51qrKTC9-wZJyY',
    iat: 1571228656 }

iat: 加密時(shí)的時(shí)間
返回的token也是又三部分組成，有.隔開(kāi)

到此這篇關(guān)于微信登錄過(guò)程、openId、token詳解(代碼實(shí)現(xiàn))的文章就介紹到這了,更多相關(guān)微信登錄 openId、token內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: