React Native实现Apple Login时Token提取及邮箱获取问题求助

一、提取Apple登录的Identity Token #

在React Native 0.71.2中实现Apple登录，通常借助react-native-apple-authentication库，登录成功后可直接从返回的凭证中获取待解析的JWT Token：

1. 安装依赖（未安装时执行）：

npm install react-native-apple-authentication
# 或
yarn add react-native-apple-authentication

2. 登录流程中获取Token：

import * as AppleAuthentication from 'react-native-apple-authentication';

const handleAppleLogin = async () => {
  try {
    const credential = await AppleAuthentication.signInAsync({
      requestedScopes: [AppleAuthentication.AppleAuthenticationScope.EMAIL],
    });

    // identityToken即为需要解析的JWT
    const { identityToken } = credential;
    if (identityToken) {
      decodeAppleToken(identityToken);
    }
  } catch (e) {
    console.error('Apple登录失败:', e);
  }
};

二、解决jwt-decode 4.0.0的解析错误 #

报错InvalidTokenError: Invalid token specified: invalid base64 for part #2 (Property 'atob' doesn't exist)，原因是React Native环境没有浏览器的atob API，而jwt-decode 4.x默认依赖该API。可通过以下两种方式解决：

方法1：使用base64-js自定义解码器 #

1. 安装依赖：

npm install base64-js
# 或
yarn add base64-js

2. 自定义解码逻辑并传入jwt-decode：

import jwtDecode from 'jwt-decode';
import { toByteArray } from 'base64-js';

const customBase64Decode = (input) => {
  // 转换JWT的base64url格式为标准base64
  input = input.replace(/-/g, '+').replace(/_/g, '/');
  // 补全base64所需的填充位
  const padding = input.length % 4;
  if (padding) input += '='.repeat(4 - padding);
  // 解码为字符串
  return new TextDecoder().decode(toByteArray(input));
};

const decodeAppleToken = (token) => {
  try {
    const decoded = jwtDecode(token, { decoder: customBase64Decode });
    // 提取邮箱
    const userEmail = decoded.email;
    console.log('用户邮箱:', userEmail);
  } catch (e) {
    console.error('Token解析失败:', e);
  }
};

方法2：利用React Native自带的Buffer #

如果你的RN版本（0.71.2已支持）包含Buffer，可直接用其替代：

import jwtDecode from 'jwt-decode';

const customBase64Decode = (input) => {
  input = input.replace(/-/g, '+').replace(/_/g, '/');
  return Buffer.from(input, 'base64').toString('utf8');
};

const decodeAppleToken = (token) => {
  try {
    const decoded = jwtDecode(token, { decoder: customBase64Decode });
    const userEmail = decoded.email;
    console.log('用户邮箱:', userEmail);
  } catch (e) {
    console.error('Token解析失败:', e);
  }
};

注意事项 #

• 必须在Apple登录时请求EMAIL scope，否则Token中不会包含邮箱字段
• 解析前务必校验identityToken不为空，避免空值引发报错

内容的提问来源于stack exchange，提问作者DONGNYEONG