更新记录

1.0（2026-03-31）

初始化项目.

平台兼容性

淘宝授权登录插件

一款基于 UniApp UTS 开发的淘宝授权登录插件，支持唤起淘宝App进行OAuth授权，支持 Android 和 iOS 双平台。

功能特性

  • ✅ 唤起淘宝登录页面（支持淘宝App和H5两种方式）
  • ✅ 自动检测淘宝安装状态
  • ✅ 支持自动登录
  • ✅ 支持切换账号
  • ✅ 支持 Android 和 iOS 双平台
  • ✅ 提供 Vue3 组件，开箱即用
  • ✅ TypeScript 类型支持

平台支持

平台 支持情况
App-Android ✅
App-iOS ✅
Web ❌
微信小程序 ❌
支付宝小程序 ❌
其他小程序 ❌

使用前准备

1. 注册淘宝开放平台账号

  1. 访问 淘宝开放平台
  2. 使用淘宝账号登录
  3. 完成开发者实名认证

2. 创建应用

  1. 进入控制台，选择「应用管理」->「创建应用」
  2. 选择「自用型应用」（开发测试推荐）
  3. 填写应用信息，获取 App Key 和 App Secret

3. 配置授权回调地址

在应用设置中配置授权回调地址，如：yourapp://auth/callback

4. 申请API权限

申请「用户授权」相关权限，如 taobao.user.buyer.get

安装

方式一：通过插件市场（推荐）

  1. 打开 DCloud 插件市场
  2. 搜索「淘宝授权登录」
  3. 点击「使用 HBuilderX 导入插件」
  4. 选择项目，点击「导入」

方式二：手动导入

  1. 下载插件压缩包
  2. 解压到项目的 uni_modules 目录下
  3. 目录结构：uni_modules/taobao-auth/

配置

1. 配置 manifest.json

在 manifest.json 中添加 URL Scheme 配置：

{
  "app-plus": {
    "distribute": {
      "android": {
        "schemes": ["yourapp"]
      },
      "ios": {
        "urltypes": [
          {
            "urlidentifier": "com.yourcompany.yourapp",
            "urlschemes": ["yourapp"]
          }
        ],
        "urlschemewhitelist": ["taobao", "tmall"]
      }
    }
  }
}

2. 配置回调处理（重要）

由于淘宝授权需要通过 URL Scheme 回调，需要在原生层处理回调。

Android 配置

在 App.uvue 中处理：

<script lang="uts">
export default {
  onLaunch() {
    console.log('App Launch')
  },
  onShow() {
    // 检查是否有回调数据
  }
}
</script>

详细配置请参考：Android 配置文档

iOS 配置

在 App.uvue 中处理回调：

<script lang="uts">
export default {
  onLaunch() {
    console.log('App Launch')
  },

  onHandleOpenURL(url: string) {
    console.log('收到回调:', url)
    if (url.startsWith('yourapp://')) {
      // 处理淘宝授权回调
      const platform = uni.getSystemInfoSync().platform
      if (platform === 'ios') {
        const taobaoAuth = uni.requireUTSPlugin('taobao-auth', 'app-ios')
        // 处理回调
      }
    }
    return true
  }
}
</script>

使用

方式一：使用组件（推荐）

<template>
  <view>
    <taobao-auth-button
      app-key="YOUR_APP_KEY"
      redirect-uri="yourapp://auth/callback"
      scope="user_info"
      @success="onAuthSuccess"
      @fail="onAuthFail"
      @cancel="onAuthCancel"
    />
  </view>
</template>

<script setup>
const onAuthSuccess = (result) => {
  console.log('授权成功:', result)
  // result.authCode 是授权码，需要传给服务端换取 access_token
  exchangeToken(result.authCode)
}

const onAuthFail = (error) => {
  console.error('授权失败:', error)
}

const onAuthCancel = () => {
  console.log('用户取消授权')
}

// 调用服务端接口换取 token
const exchangeToken = async (authCode) => {
  const res = await uni.request({
    url: 'https://your-server.com/api/taobao/token',
    method: 'POST',
    data: { 
      code: authCode,
      redirectUri: 'yourapp://auth/callback'
    }
  })

  if (res.data.success) {
    // 保存 token
    uni.setStorageSync('taobao_token', res.data.data)
    uni.showToast({ title: '登录成功', icon: 'success' })
  }
}
</script>

方式二：使用 API

<script setup>
import { ref, onMounted } from 'vue'

const taobaoAuth = ref(null)
const isTaobaoInstalled = ref(false)

onMounted(() => {
  // 根据平台加载插件
  const platform = uni.getSystemInfoSync().platform
  if (platform === 'android') {
    taobaoAuth.value = uni.requireUTSPlugin('taobao-auth', 'app-android')
  } else if (platform === 'ios') {
    taobaoAuth.value = uni.requireUTSPlugin('taobao-auth', 'app-ios')
  }

  // 初始化
  const initResult = taobaoAuth.value.init({
    appKey: 'YOUR_APP_KEY',
    redirectUri: 'yourapp://auth/callback',
    scope: 'user_info',
    isAutoLogin: true
  })

  console.log('初始化结果:', initResult)

  // 检查淘宝安装状态
  isTaobaoInstalled.value = taobaoAuth.value.isTaobaoInstalled()
})

// 登录
const handleLogin = () => {
  if (!taobaoAuth.value) {
    uni.showToast({ title: '插件未初始化', icon: 'none' })
    return
  }

  taobaoAuth.value.login((result) => {
    switch (result.code) {
      case 0:
        console.log('授权成功:', result.authCode)
        // 处理授权成功
        break
      case 1:
        console.log('用户取消')
        break
      case 2:
        console.error('授权失败:', result.message)
        uni.showToast({ title: result.message, icon: 'none' })
        break
    }
  })
}

// 切换账号
const handleSwitch = () => {
  taobaoAuth.value.switchAccount((result) => {
    if (result.code === 0) {
      console.log('切换成功:', result.authCode)
    }
  })
}
</script>

API 文档

方法列表

方法 说明 参数 返回值
init(options) 初始化插件 TaobaoAuthOptions boolean
isTaobaoInstalled() 检查淘宝是否安装 - boolean
login(callback) 唤起登录 AuthCallback -
switchAccount(callback) 切换账号 AuthCallback -
getVersion() 获取版本 - string

配置选项 (TaobaoAuthOptions)

属性 类型 必填 说明
appKey string 是 淘宝开放平台 AppKey
redirectUri string 是 授权回调地址
scope string 否 授权范围，默认 "user_info"
state string 否 防CSRF状态码，自动生成
isAutoLogin boolean 否 是否自动登录，默认 true
showSwitchAccount boolean 否 是否显示切换账号，默认 true

授权结果 (AuthResult)

属性 类型 说明
code number 0:成功 1:取消 2:失败
message string 结果描述
authCode string 授权码（成功时返回）
errorCode string 错误码（失败时返回）
errorMsg string 错误信息（失败时返回）

服务端接入

出于安全考虑，AppKey 和 AppSecret 不应在客户端使用，需要通过服务端换取 AccessToken。

授权流程

┌─────────┐     唤起授权      ┌──────────┐
│   App   │ ───────────────> │  淘宝App │
│ (客户端) │                  │          │
└─────────┘                  └────┬─────┘
                                  │
                                  │ 授权完成
                                  ▼
                            ┌─────────────┐
                            │ 回调到 App   │
                            │ yourapp://  │
                            └──────┬──────┘
                                   │
              1. 发送 authCode     │
┌─────────┐ <──────────────────────┘
│  服务端  │
│         │ 2. 换取 access_token
│         │ ───────────────────────> 淘宝服务器
└─────────┘

Node.js 服务端示例

const axios = require('axios')
const crypto = require('crypto')

// 淘宝 API 配置
const CONFIG = {
  appKey: 'YOUR_APP_KEY',
  appSecret: 'YOUR_APP_SECRET',
  gateway: 'https://gw.api.taobao.com/router/rest'
}

// 生成签名
function generateSign(params) {
  const sortedKeys = Object.keys(params).sort()
  let signStr = CONFIG.appSecret
  for (const key of sortedKeys) {
    signStr += key + params[key]
  }
  signStr += CONFIG.appSecret
  return crypto.createHash('md5').update(signStr).digest('hex').toUpperCase()
}

// 换取 Token
async function exchangeToken(authCode) {
  const params = {
    app_key: CONFIG.appKey,
    method: 'taobao.top.auth.token.create',
    format: 'json',
    v: '2.0',
    sign_method: 'md5',
    timestamp: new Date().toISOString().replace(/\.\d{3}Z$/, 'Z'),
    code: authCode
  }

  params.sign = generateSign(params)

  const response = await axios.post(CONFIG.gateway, null, { params })
  return response.data
}

// Express 路由
app.post('/api/taobao/token', async (req, res) => {
  try {
    const { code } = req.body
    const result = await exchangeToken(code)

    if (result.error_response) {
      return res.json({
        success: false,
        message: result.error_response.sub_msg
      })
    }

    const tokenData = JSON.parse(result.top_auth_token_create_response.token_result)

    res.json({
      success: true,
      data: {
        accessToken: tokenData.access_token,
        refreshToken: tokenData.refresh_token,
        expiresIn: tokenData.expires_in,
        openUid: tokenData.open_uid
      }
    })
  } catch (error) {
    res.json({ success: false, message: error.message })
  }
})

完整的服务端示例代码请参考：服务端示例

常见问题

Q: 唤起淘宝失败？

A: 请检查：

  1. 是否正确配置了 URL Scheme
  2. 是否安装了淘宝App（未安装会使用H5授权）
  3. manifest.json 中是否声明了相关权限

Q: 授权后无法回调到App？

A: 请检查：

  1. 回调地址是否与配置的 URL Scheme 匹配
  2. 原生代码中是否正确处理了回调（参考配置章节）
  3. iOS 是否在 Info.plist 中注册了 URL Types

Q: 换取 Token 失败？

A: 请检查：

  1. 服务端配置的 AppKey 和 AppSecret 是否正确
  2. 授权码是否在有效期内（5分钟）
  3. 回调地址是否与创建应用时填写的一致

Q: iOS 为什么检测不到淘宝？

A: iOS 9+ 需要在 Info.plist 中声明 LSApplicationQueriesSchemes：

{
  "app-plus": {
    "distribute": {
      "ios": {
        "plistdata": "<key>LSApplicationQueriesSchemes</key><array><string>taobao</string></array>"
      }
    }
  }
}

注意事项

  1. AppSecret 安全：AppSecret 必须在服务端保管，不要硬编码在客户端代码中
  2. 回调地址：授权回调地址必须在淘宝开放平台配置，且与客户端传入的一致
  3. 授权码有效期：授权码有效期为 5 分钟，需及时换取 Token
  4. Token 有效期：AccessToken 有效期根据申请的权限不同而不同，注意及时刷新

更新日志

v1.0.0 (2026-03-31)

  • 初始版本发布
  • 支持 Android 和 iOS 双平台
  • 支持唤起淘宝App和H5授权
  • 提供 Vue3 组件

开源协议

MIT

贡献

欢迎提交 Issue 和 Pull Request。

联系我们

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉

暂无用户评论。