企业微信应用开发（JS-SDK网页式开发）第二集：JS-SDK鉴权

我叫小魏子。

已于 2022-03-07 10:32:51 修改

阅读量5.1k

点赞数 7

分类专栏：企业微信文章标签：微信 javascript 前端

于 2022-02-23 16:58:55 首次发布

本文链接：https://blog.csdn.net/weixin_41618917/article/details/123092334

版权

企业微信专栏收录该内容

3 篇文章

订阅专栏

企业微信的api方法，需要先鉴权成功才能使用；
只需要在首页鉴权一次就可以，其余页面都可以直接使用api方法；

企业微信JS-SDK：是企业微信面向网页开发者提供的基于企业微信内的网页开发工具包。o((⊙﹏⊙))o

通过使用企业微信JS-SDK，网页开发者可借助企业微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用企业微信分享、扫一扫等企业微信特有的能力，为企业微信用户提供更优质的网页体验。

准备工作：获取corpid，corpsecret

corpid: 企业ID：获取方法☛ 查看第一集
corpsecret: 数据安全的钥匙：获取方法☛ 查看第一集

第一步：引入js文件

https://developer.work.weixin.qq.com/document/path/90514
在需要调用JS接口的页面引入如下JS文件，（支持https）

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

第二步：获取登录凭证 access_token

获取access_token是调用企业微信API接口的第一步，相当于创建了一个登录凭证，其它的业务API接口，都需要依赖于access_token来鉴权调用者身份。
因此开发者，在使用业务接口前，要明确access_token的颁发来源，使用正确的access_token。

let obj = {
        ticket : '',
        access_token: '', // 登录凭证
		code: '', // 随机code
		userId: '' // 用户唯一标识
    }


import axios from 'axios'
// 获取ticket 
export async function getToken(corpid, corpsecret) {
    await axios.get('https://qyapi.weixin.qq.com/cgi-bin/gettoken', {
        params: {
            corpid, // 应用id
            corpsecret, // 应用秘钥
        }
    })
    .then(async(res) => {
        obj.access_token= res.data.access_token
        console.log('登录凭证', res.data.access_token)
    })
    .catch(function (err) {
        console.log(err)
    })
}

第三步：获取企业的jsapi_ticket

export async function getTicket( obj ) {
		await axios.get('https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket',
            {
                params: {
                    access_token: obj.access_token,
                }
            }
        )
        .then((res) => {
            obj.ticket  = res.data.ticket
        })
        .catch((err) => {
            console.log(err)
        })
   }

第四步：开始config鉴权

鉴权方式：使用说明
签名的规则算法： JS-SDK使用权限签名算法
测试生成的签名是否正确： 签名校验工具

/**
	    将上边几步获取到的参数传进来！！！
**/
let sha1 = require('js-sha1')
export async function wxAuthentication ( obj ) {
	const ticket = obj.ticket  // 很重要！！！！
	let nonceStr = 'Y7a8KkqX041bsSwT' // 随机字符串
	let timeStamp = new Date().getTime() // 时间戳
	let newTimeStamp = String(timeStamp).substr(0,10) // 10位数的时间戳
	// 当前网页的 URL（可以为本地局域网网址），不包含 # 及其后面部分
	let url = String(location.href.split('#')[0])
	let verifyStr = `jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${newTimeStamp}&url=${url}`
	let signature = sha1(verifyStr)
	console.log('签名1', signature)
	wx.config({
	    beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
	    // 上线的时候记得将 debug 关掉哦！！！！！
	    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	    appId: 'xxxxxxxxxxxxxxxxxx', // 必填，企业微信的corpID
	    timestamp: newTimeStamp, // 必填，生成签名的时间戳
	    nonceStr: nonceStr, // 必填，生成签名的随机串
	    signature: signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
	    jsApiList: ['checkJsApi', 'chooseImage', 'openEnterpriseChat', 'previewFile'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
	});
	wx.error(function(res){
		console.log('config信息验证失败会执行error函数', res)
	    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
	});
}