欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2024年08月15日 10:41:03   作者:youhebuke225  
這篇文章主要介紹了微信登錄過程、openId、token詳解,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

1 登錄

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

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

2 微信登錄過程

圖示

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

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

3 AppID和appsecret獲取

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

3. 然后點(diǎn)擊開發(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或者首頁數(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_keyopenid,所以說我們需要一個(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)出來的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的庫
  • 用到了jsonwebtoken的庫

前端請(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也是又三部分組成,有.隔開

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

相關(guān)文章

  • JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能

    JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能

    這篇文章主要介紹了JS實(shí)現(xiàn)中英文混合文字溢出友好截取功能,通常會(huì)用到j(luò)s的 substr 或者 substring方法, 以及 字符串的length屬性。需要的朋友可以參考下
    2018-08-08
  • js保存當(dāng)前路徑(cookies記錄)

    js保存當(dāng)前路徑(cookies記錄)

    曾經(jīng)做了一個(gè)取消訂單的功能。這個(gè)功能在個(gè)人中心里面有,在訂單的詳細(xì)頁面也有。按照正常的思路,這兩塊都可以提交到相同的action去處理,但是返回的頁面是不一樣的,都是返回到當(dāng)前頁面就可以了。
    2010-12-12
  • JavaScript forEach()遍歷函數(shù)使用及介紹

    JavaScript forEach()遍歷函數(shù)使用及介紹

    這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個(gè)方法技巧,需要的朋友可以參考下
    2015-07-07
  • Electron啟動(dòng)出現(xiàn)白屏問題的解決方案

    Electron啟動(dòng)出現(xiàn)白屏問題的解決方案

    對(duì)于 Web 開發(fā)者使用 Electron 構(gòu)建桌面應(yīng)用程序時(shí),經(jīng)常會(huì)遇到如上圖所示的一個(gè)問題,在應(yīng)用窗口創(chuàng)建完成到頁面加載出來的這段時(shí)間里,出現(xiàn)了長時(shí)間的白屏,本文就來探索基于 Electron 場景下啟動(dòng)白屏的解決方案,需要的朋友可以參考下
    2024-05-05
  • JavaScript實(shí)現(xiàn)打地鼠游戲

    JavaScript實(shí)現(xiàn)打地鼠游戲

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)打地鼠游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • JS實(shí)現(xiàn)圖片切換效果

    JS實(shí)現(xiàn)圖片切換效果

    這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)圖片切換效果 ,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • JavaScript股票的動(dòng)態(tài)買賣規(guī)劃實(shí)例分析下篇

    JavaScript股票的動(dòng)態(tài)買賣規(guī)劃實(shí)例分析下篇

    這篇文章主要介紹了JavaScript對(duì)于動(dòng)態(tài)規(guī)劃解決股票問題的真題例舉講解。文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • uniapp基礎(chǔ)篇之上傳圖片的實(shí)戰(zhàn)步驟

    uniapp基礎(chǔ)篇之上傳圖片的實(shí)戰(zhàn)步驟

    應(yīng)用uni-app開發(fā)跨平臺(tái)App項(xiàng)目時(shí),上傳圖片、文檔等資源功能需求十分常見,下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)篇之上傳圖片的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • JS中split()用法(將字符串按指定符號(hào)分割成數(shù)組)

    JS中split()用法(將字符串按指定符號(hào)分割成數(shù)組)

    這篇文章主要介紹了JS中split()用法(將字符串按指定符號(hào)分割成數(shù)組)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-10-10
  • angular-tree-component的使用詳解

    angular-tree-component的使用詳解

    這篇文章主要介紹了angular-tree-component的使用詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07

最新評(píng)論