フロントエンドでFeishu認証を実行する方法（H5 SDKはttインターフェースを呼び出します）

参考文献

Feishu Developer Platform Web ページのアプリケーション認証
Feishu Web ページの認証プロセス

問題の説明

Feishu は Web アプリケーションをネストします。Web アプリケーションは Feishu の API を使用する必要がありますが、Feishu の jsapi のほとんどは使用する前に認証する必要があります。

解決

Feishu Developer Platform のドキュメントに従って、段階的に認証を実行します。最初と 2 番目のステップはサーバーによって行われる作業で、サーバーはインターフェイスを作成し、取得した jsapi_ticket を返すことができます。

ステップ 1: access_token を取得する

ステップ 2: jsapi_ticket を取得する

ステップ 3: 署名を計算する

署名の生成ルールは次のとおりです。

署名に含まれるフィールドには、noncestr (ランダムな文字列)、有効な jsapi_ticket、timestamp (タイムスタンプ)、url (# とそれに続く部分を除く、現在の Web ページの URL) が含まれます。

署名されるすべてのパラメータをフィールド名の ASCII コードに従って小さいものから大きいもの (辞書順) に並べ替えた後、URL キーと値のペア形式 (つまり、key1=value1&key2=value2…) を使用して文字列に連結します。ここで、パラメータ名はすべて小文字であることに注意してください。スペル文字列に対して sha1 暗号化を実行します。

フィールド名とフィールド値は、URL エスケープなしの生の値として取得されます。

例：

noncestr=Y7a8KkqX041bsSwTjsapi_ticket=617bf955832a4d4d80d9d8d85917a427timestamp=1510045655000url=https://m.haiwainet.cn/ttc/3541093/2018/0509/content_31312407_1。 html

jsapi_ticket、noncestr、timestamp、url の順序に従って、URL キーと値のペア形式 (つまり、key1=value1&key2=value2...) を使用して文字列 verifyStr を連結します。

jsapi_ticket=617bf955832a4d4d80d9d8d85917a427&noncestr=Y7a8KkqX041bsSwT×tamp=1510045655000&url=https://m.haiwainet.cn/ttc/3541093/2018/0509/conte

署名の計算

バックエンドから返された jsapi_ticket を取得した後

URLを取得する

  let url = window.location.href.split('#')[0]

タイムスタンプを取得する

 let timestamp = new Date().getTime()

16ビットのランダムな文字列を生成する

const randomString = (e) => {
    
    
      e = e || 32
      let t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678',
        a = t.length,
        n = ''
      for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a))
      return n
}

let nonceStr = randomString(16)

スプライス署名

//jsapi_ticket 是第一二步服务端拿到的jsapi_ticket

const verifyStr = `jsapi_ticket=${
      
      jsapi_ticket}&noncestr=${
      
      nonceStr}&timestamp=${
      
      timestamp}&url=${
      
      url}`

sha1暗号化を実行する

npm i sha1

let signature = sha1(verifyStr)

認証する

window.h5sdk.config({
    
    
        timestamp: timestamp,
        nonceStr: nonceStr,
        signature: signature,
        appId: Enums.APPID,//这里是自创应用的appid
        jsApiList: ['biz.navigation.close', 'biz.util.share'],
        onSuccess: () => {
    
    },
        onFail: (res) => {
    
    
          alert(JSON.stringify(res))
        },
})

完全なコード

import sha1 from 'sha1'


const randomString = (e) => {
    
    
      e = e || 32
      let t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678',
        a = t.length,
        n = ''
      for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a))
      return n
}

let url = window.location.href.split('#')[0]
let timestamp = new Date().getTime()
// 生成16位随机字符串
let nonceStr = randomString(16)
const verifyStr = `jsapi_ticket=${
      
      jsapi_ticket}&noncestr=${
      
      nonceStr}&timestamp=${
      
      timestamp}&url=${
      
      url}`

window.h5sdk.config({
    
    
        timestamp: timestamp,
        nonceStr: nonceStr,
        signature: sha1(verifyStr),
        appId: Enums.APPID,//自建网页应用的appId
        jsApiList: ['biz.navigation.close', 'biz.util.share'],
        onSuccess: () => {
    
    },
        onFail: (res) => {
    
    
          alert(JSON.stringify(res))
        },
      })
}