抖音js sdk demo代码启动教程

avatar
前端

JS 代码示例下载

代码示例地址:developer.open-douyin.com/docs/resour…

使用说明

demo 的运行原理请查看 JS 接入指南

1. 在 demo 目录下运行 npm install ,下载资源包。

在中国,由于 npm 官方源在国外,下载速度可能较慢。为了提高下载速度,可以将 npm 的源切换到淘宝镜像。以下是设置 npm 淘宝镜像的步骤:

通过命令行设置:

  1. 打开终端(命令行窗口)。

  2. 输入以下命令,将 npm 镜像设置为淘宝镜像:

    bash复制代码
    npm config set registry https://registry.npm.taobao.org
    

    这会将 npm 的注册表设置为淘宝镜像。

  3. (可选)你可以通过以下命令验证是否成功设置:

    bash复制代码
    npm config get registry
    

    如果输出为 https://registry.npm.taobao.org/,则表示设置成功。

通过 npm 命令设置(不需要全局权限):

  1. 打开终端(命令行窗口)。

  2. 在需要使用淘宝镜像的项目目录下,执行以下命令:

    bash复制代码
    npm install --registry=https://registry.npm.taobao.org
    

    这会在当前项目中使用淘宝镜像进行包的安装。

请注意,将 npm 镜像设置为淘宝镜像后,npm 命令将会从淘宝的 npm 镜像服务器下载依赖包,从而提高下载速度。在一些特殊情况下,可能需要切换回官方源,可以使用以下命令:

bash复制代码
npm config set registry https://registry.npmjs.org

这将把 npm 镜像切换回官方源。根据具体需求进行设置和切换。

2. 修改 demo 示例代码中的 clientKey 和 clientSecret 为你的应用对应的 key 和 secret

修改该文件夹下的clientKey和clientSecret的值

image.png

3. 在与你的网站应用“授权回调域”相同的测试域名下部署示例代码。

需要在网站应用里面申请jsb安全域名,该域名下还需要有实质性的内容,不然审核不通过

image.png

4. 通过 config 方法验证签名时,需注意请求参数中的 URL,应为应用申请的 JSB 安全域名。

获取签名时,需要先获取getClientToken,拿到ClientToken去换取签名,注意接口需要服务端去请求,前端不能直接调用open.douyin.com/oauth/clien…open.douyin.com//js/gettick…

5. 使用二维码生成工具,将你测试页面的 URL 生成一个二维码。

可以使用草料二维码生成器,cli.im/url

6. 打开抖音应用,扫描生成的二维码。

注意:

  • 为了你的应用安全,以上示例不可以直接发布使用。
  • 请妥善保管clientSecret,并按示例和文档说明,正确部署服务端和前端代码。