企业微信应用开发(JS-SDK网页式开发)第二集:JS-SDK鉴权

企业微信的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可以在这里更新签名。
	});
}

问题来了::::怎么看自己有没有成功呢?
一:项目进入时,出现下边的提示
在这里插入图片描述
二:打开控制台,以对象的形式打印
在这里插入图片描述

在这里插入图片描述
如果你有了上边的提示那说明你已经鉴权成功了哦,可以开始调用api喽!!
哦 吼 ~ ~ ~ ~ ~ ~
在这里插入图片描述

欢迎收看下一集:使用JS-SDK进行预览附件、获取用户信息

  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
企业微信H5 JS-SDK是一个用于开发企业微信H5应用的SDK工具,可以实现企业微信的认证、JSAPI调用等功能。下面是企业微信H5 JS-SDK的调试方法: 1. 在企业微信开发者后台创建应用,并获取到应用的CorpID和Secret。 2. 在需要调试的H5页面中引入企业微信H5 JS-SDKSDK文件,例如: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 3. 在页面的JS代码中,初始化企业微信H5 JS-SDK,并配置需要使用的接口,例如: ```javascript wx.config({ beta: true, debug: true, appId: 'CorpID', timestamp: '', nonceStr: '', signature: '', jsApiList: ['checkJsApi', 'chooseImage', 'previewImage'] }); ``` 需要将上述代码中的CorpID替换为自己应用的CorpID,timestamp、nonceStr和signature需要根据后端生成的签名参数进行获取。 4. 配置完成后,可以通过调用企业微信H5 JS-SDK提供的接口进行调试。例如,调用企业微信H5 JS-SDK中的chooseImage接口选择图片: ```javascript wx.chooseImage({ count: 1, success: function (res) { var localIds = res.localIds; alert(localIds); // 显示选择的图片的本地ID列表 } }); ``` 5. 在手机上打开需要调试的H5页面,使用企业微信扫描二维码或直接打开链接,即可进行调试。 通过上述步骤,就可以进行企业微信H5 JS-SDK的调试,通过调试可以验证SDK的功能是否正常,同时可以根据实际需求进行业务逻辑的开发和调试。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值