uniapp 如何接入抖音登陆实现移动应用授权

在uniapp中如何实现抖音登录的移动应用授权？需要哪些配置步骤？有没有具体的代码示例可以参考？

2 回复

使用uni-app接入抖音登录，需先在抖音开放平台注册应用获取AppID。然后使用uni.login方法，在provider参数中传入"toutiao"，获取授权码。最后将授权码发送到服务端换取用户信息。注意：需配置抖音SDK并审核通过。


在 UniApp 中接入抖音登录授权，需要通过 抖音开放平台 申请应用，并结合 UniApp 的插件或原生开发实现。以下是详细步骤和示例代码：

步骤概览

  1. 注册抖音开放平台应用

    • 登录 抖音开放平台，创建移动应用，获取 Client Key 和 Client Secret。
    • 配置应用签名和包名（需与 UniApp 打包时的配置一致）。

  2. UniApp 端实现授权流程

    • 使用 uni.login 或原生插件调用抖音登录 SDK。
    • 获取临时凭证 code，通过后端交换用户信息。

代码示例（需配合后端）

1. UniApp 端调用抖音登录

使用原生插件（如官方插件）或自行封装原生模块。以下是简化流程：

// 在 UniApp 页面中触发登录
async function douyinLogin() {
  // 检查抖音客户端是否安装
  if (plus.runtime.isApplicationExist({ pname: 'com.ss.android.ugc.aweme' })) {
    // 通过原生插件或 URL Scheme 唤醒抖音授权
    let authUrl = `douyin://platform/oauth?client_key=YOUR_CLIENT_KEY&scope=user_info&response_type=code&redirect_uri=YOUR_REDIRECT_URI`;
    plus.runtime.openURL(authUrl, (err) => {
      if (err) uni.showToast({ title: '唤醒抖音失败', icon: 'none' });
    });
  } else {
    uni.showToast({ title: '请安装抖音客户端', icon: 'none' });
  }
}

2. 后端交换 Access Token（示例）

UniApp 获取 code 后，需通过后端调用抖音接口换取用户信息（避免暴露 Client Secret）：

// 后端 Node.js 示例（使用 axios）
const axios = require('axios');
const clientKey = 'YOUR_CLIENT_KEY';
const clientSecret = 'YOUR_CLIENT_SECRET';

// 用 code 换取 access_token
async function getAccessToken(code) {
  const url = 'https://open.douyin.com/oauth/access_token/';
  const params = {
    client_key: clientKey,
    client_secret: clientSecret,
    code: code,
    grant_type: 'authorization_code'
  };
  
  const response = await axios.post(url, null, { params });
  return response.data.data; // 包含 access_token 和 open_id
}

// 获取用户信息
async function getUserInfo(openId, accessToken) {
  const url = 'https://open.douyin.com/api/userinfo/';
  const response = await axios.get(url, {
    params: { open_id: openId, access_token: accessToken }
  });
  return response.data;
}

注意事项

  1. 权限配置：在抖音开放平台勾选 user_info 等所需权限。
  2. 安全限制：Client Secret 必须由后端保管，不可前端暴露。
  3. 回调处理：通过 URL Scheme 或 App 钩子接收授权结果，解析 code 发送至后端。
  4. 平台差异：Android 和 iOS 需分别配置 URL Scheme 及关联域名。

替代方案

  • 使用 UniApp 官方推荐的 OAuth 登录插件 简化流程。
  • 若功能复杂，可通过原生开发（Android/iOS）封装为 UniApp 插件。

通过以上步骤，即可在 UniApp 中实现抖音登录授权。具体参数请参考抖音开放平台文档。

回到顶部