Cómo realizar la autenticación de Feishu en el front-end (H5 SDK llama a la interfaz tt)

Referencias

Autenticación de la aplicación de la página web de la plataforma de desarrollo de Feishu
Proceso de autenticación de la página web de Feishu

Descripción del problema

Feishu anida aplicaciones web. La aplicación web necesita usar la API de Feishu, pero la mayoría de los jsapi de Feishu deben autenticarse antes de poder usarse.

solución

Realice la autenticación paso a paso de acuerdo con la documentación en Feishu Developer Platform. El primer y segundo paso son el trabajo realizado por el servidor, el servidor puede escribir una interfaz y devolver el jsapi_ticket que obtuvimos.

Paso 1: Obtener access_token

Paso 2: Obtener jsapi_ticket

Paso 3: Calcular la firma

Las reglas de generación de firmas son las siguientes:

Los campos involucrados en la firma incluyen noncestr (cadena aleatoria), jsapi_ticket válido, marca de tiempo (marca de tiempo), url (la URL de la página web actual, excluyendo # y sus siguientes partes).

Después de clasificar todos los parámetros que se firmarán según el código ASCII del nombre del campo de menor a mayor (orden lexicográfico), utilice el formato de par clave-valor de URL (es decir, clave1=valor1&clave2=valor2…) para concatenar en una cadena. Cabe señalar aquí que todos los nombres de los parámetros están en minúsculas. Realice el cifrado sha1 en la cadena deletreada.

Los nombres de campo y los valores de campo se toman como valores sin formato sin escape de URL.

Ejemplo:

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

De acuerdo con el orden de jsapi_ticket, noncestr, timestamp, url, use el formato de par clave-valor de la URL (es decir, clave1=valor1&clave2=valor2...) para concatenar la cadena verificarStr:

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

Calcular firma

Después de obtener el jsapi_ticket devuelto por el backend

obtener URL

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

obtener marca de tiempo

 let timestamp = new Date().getTime()

Generar una cadena aleatoria de 16 bits

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)

firma de empalme

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

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

Realizar encriptación sha1

npm i sha1

let signature = sha1(verifyStr)

Autenticar

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))
        },
})

código completo

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))
        },
      })
}