更新记录

0.0.3（2026-01-18）

• fix: 修复报错问题

0.0.2（2026-01-08）

• feat: 改用全局API

0.0.1（2025-04-01）

• init

平台兼容性

uni-app(4.65)

uni-app x(4.84)

lime-apple-button

🍎 苹果登录按钮组件，为 uni-app x 提供原生的 Sign in with Apple 按钮和完整的授权登录解决方案

🎯 功能特性

• ✅ 原生 Apple Sign In 按钮渲染
• ✅ 支持三种按钮类型：登录、继续、注册
• ✅ 支持三种按钮样式：黑色、白色、白色描边
• ✅ 完整的授权流程处理
• ✅ 支持检测现有登录状态
• ✅ 提供苹果官方要求样式的UI组件，通过点击事件调用appleLogin方法实现登录

版本要求

安装方法

1. 在uni-app插件市场中搜索并导入lime-apple-button
2. 导入后在页面引入方法：

   // #ifdef APP-IOS
   import { appleLogin, appleCheckExistingLogin, type AppleLoginOptions, type AppleCheckOptions } from '@/uni_modules/lime-apple-button'
   // #endif

3. 自定义基座：
   • 准备包含Sign in with Apple权限的证书和描述文件：
     1. 登录 Apple Developer Portal
     2. 进入 Certificates, Identifiers & Profiles
     3. 选择你的 App ID，编辑配置
     4. 勾选 Sign in with Apple 选项并保存
     5. 重新生成并下载描述文件
     6. 在 HBuilderX 中更新证书配置
   • 打开HBuilderX，点击运行 → 运行到手机或模拟器 → 制作自定义调试基座
   • 打包完成后，运行时选择自定义调试基座
   • ⚠️ 标准基座不包含苹果登录的原生模块，会导致功能不可用

🚨 重要提示

⚠️ 必须使用自定义基座运行，标准基座无法调试苹果登录功能 ⚠️ 用户信息获取说明：email 和 fullName 仅在首次授权时返回，后续登录仅返回 user、token 和 code

快速开始

基础用法

<template>
  <view>
    <!-- #ifdef APP-IOS -->
    <l-apple-button 
      style="height: 50px;"
      type="signIn"
      theme="black"
      @click="handleAppleLogin"
    ></l-apple-button>
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
// #ifdef APP-IOS
import { appleLogin, type AppleLoginOptions } from '@/uni_modules/lime-apple-button'

// 按钮点击事件
const handleAppleLogin = () => {
  appleLogin({
    success: (result) => {
      console.log('✅ 登录成功，获取到苹果用户信息', result.userInfo)

      // 模拟将苹果登录信息发送到后端验证
      uni.request({
        url: 'https://api.example.com/auth/apple/login', // 假的后端地址
        method: 'POST',
        data: {
          user: result.userInfo.user, // 苹果用户唯一标识符
          identityToken: result.userInfo.identityToken, // JWT令牌，包含用户信息
          authorizationCode: result.userInfo.authorizationCode, // 授权码，用于后端验证
          email: result.userInfo.email, // 用户邮箱（仅首次登录返回）
          fullName: result.userInfo.fullName // 用户姓名（仅首次登录返回）
        },
        header: {
          'Content-Type': 'application/json'
        },
        success: (response) => {
          // 实际应用中，这里需要根据后端返回结果进行处理
          // 例如：保存token、跳转到首页等
          console.log('✅ 后端验证结果', response.data)

          // 示例：保存苹果用户ID到本地（用于后续检查登录状态）
          uni.setStorageSync('appleUserId', result.userInfo.user)
        },
        fail: (error) => {
          // 实际应用中，这里需要处理网络请求失败的情况
          console.error('❌ 网络请求失败', error)
        }
      })
    },
    fail: (error) => {
      // 实际应用中，这里需要根据错误码处理不同的失败情况
      console.error('❌ 苹果登录失败', error)
    }
  } as AppleLoginOptions)
}
// #endif
</script>

API 使用说明

重要提示：根据苹果官方要求，必须使用符合其样式规范的 UI 组件进行登录操作。您可以选择使用本插件提供的原生 UI 组件，也可以自行实现符合要求的 UI 组件。无论哪种方式，appleLogin 方法都应在 UI 组件的点击事件中调用。

// #ifdef APP-IOS
import { appleLogin, appleCheckExistingLogin, type AppleCheckOptions } from '@/uni_modules/lime-apple-button'

// 检查登录状态（可直接调用）
const checkLoginStatus = () => {
  const userId = uni.getStorageSync('appleUserId')
  if (userId != null || userId != '') {
    appleCheckExistingLogin({
      userId: userId,
      success: (result) => {
        console.log('登录状态检查结果', result.state)
      }
    } as AppleCheckOptions)
  }
}
// #endif

组件使用

属性说明

事件说明

组件示例

<!-- 基础登录按钮（默认：type="signIn"，theme="black"） -->
<l-apple-button style="height: 50px;"></l-apple-button>

<!-- 继续按钮（黑色样式） -->
<l-apple-button style="height: 50px;" type="continue"></l-apple-button>

<!-- 注册按钮（黑色样式） -->
<l-apple-button style="height: 50px;" type="signUp"></l-apple-button>

<!-- 登录按钮（白色样式） -->
<l-apple-button style="height: 50px;" theme="white"></l-apple-button>

<!-- 登录按钮（白色描边样式） -->
<l-apple-button style="height: 50px;" theme="whiteOutline"></l-apple-button>

<!-- 自定义类型和样式组合 -->
<l-apple-button style="height: 50px;" type="continue" theme="whiteOutline"></l-apple-button>

<!-- 带点击事件的按钮 -->
<l-apple-button 
  style="height: 50px;"
  type="signIn"
  theme="black"
  @click="handleAppleLogin"
></l-apple-button>

提示：点击事件中需手动调用 appleLogin 方法实现登录功能，具体用法参考快速开始部分

API 参考

appleLogin

发起苹果登录授权请求

重要提示：根据苹果官方要求，此方法应在符合其样式规范的 UI 组件点击事件中调用。您可以使用本插件提供的 l-apple-button 组件，也可以自行实现符合要求的 UI 组件。

appleCheckExistingLogin

验证用户授权是否仍然有效

数据结构

AppleFullName

用户姓名信息

export type AppleFullName = {
  namePrefix?: string; // 名字前缀，头衔、敬称
  givenName?: string; // 名字
  middleName?: string; // 中间名
  familyName?: string; // 姓
  nameSuffix?: string; // 名字后缀，学位、荣誉
  nickName?: string; // 昵称
};

AppleUserInfo

用户信息

export type AppleUserInfo = {
  user: string; // 苹果用户唯一标识符
  email?: string; // 用户共享的可选电子邮件（仅首次授权返回）
  fullName?: AppleFullName; // 用户共享的可选全名（仅首次授权返回）
  authorizationCode?: string; // 验证数据
  identityToken?: string; // Web令牌(JWT)
  realUserStatus?: number; // 真实用户状态：0-不支持，1-无法确认，2-真实性很高
};

错误码说明