React Native能否使用discord.js？Discord登录实现问题咨询

你遇到的问题核心在于 discord.js根本不是为React Native这类客户端环境设计的 —— 它是专门给Node.js环境开发Discord机器人用的库，依赖了Node.js的核心模块（比如你报错里的os），而React Native的JavaScript运行时并没有这些Node专属模块，所以打包时会找不到依赖，直接失败。

简单说：不是所有JavaScript库都能在React Native里用，只有适配了React Native或纯前端无Node依赖的库才行。

Discord登录本质是OAuth2授权流程，我们需要用客户端OAuth2的方式来实现，下面给你两种靠谱的方案：

方案一：用react-native-app-auth快速实现（推荐） #

这个库封装了原生的OAuth2认证流程，比自己写WebView更稳定，支持Android和iOS的深度跳转。

步骤1：准备Discord开发者配置 #

1. 去Discord开发者平台创建/打开你的应用，进入「OAuth2 → General」页面：
   • 记录下Client ID和Client Secret
   • 添加一个重定向URI，比如myapp://discord-auth（这个URI要和后续代码里的一致）
2. 切换到「OAuth2 → URL Generator」，选择需要的权限scope，比如identify（获取用户基本信息）、email（获取邮箱），然后复制生成的授权URL备用。

步骤2：安装并配置库 #

npm install react-native-app-auth
# 或者用yarn
yarn add react-native-app-auth

• iOS配置：在Info.plist里添加URL Scheme，对应你设置的重定向URI的协议部分（比如myapp）：

  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>myapp</string>
      </array>
    </dict>
  </array>
  

• Android配置：在AndroidManifest.xml的<activity>标签里添加intent-filter：

  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" android:host="discord-auth" />
  </intent-filter>
  

步骤3：编写登录代码 #

import { authorize } from 'react-native-app-auth';

const discordAuthConfig = {
  clientId: '你的Discord Client ID',
  clientSecret: '你的Discord Client Secret',
  redirectUrl: 'myapp://discord-auth',
  scopes: ['identify', 'email'],
  serviceConfiguration: {
    authorizationEndpoint: 'https://discord.com/api/oauth2/authorize',
    tokenEndpoint: 'https://discord.com/api/oauth2/token',
    revocationEndpoint: 'https://discord.com/api/oauth2/token/revoke',
  },
};

// 触发登录
const handleDiscordLogin = async () => {
  try {
    const result = await authorize(discordAuthConfig);
    // 拿到accessToken后，调用Discord API获取用户信息
    const userResponse = await fetch('https://discord.com/api/users/@me', {
      headers: {
        Authorization: `Bearer ${result.accessToken}`,
      },
    });
    const userData = await userResponse.json();
    console.log('登录成功，用户信息：', userData);
    // 这里可以把用户信息存在本地或者提交到你的后端
  } catch (error) {
    console.error('登录失败：', error);
  }
};

方案二：手动用WebView实现 #

如果不想用第三方库，可以用React Native的WebView组件加载Discord的授权页面，然后处理跳转回调：

步骤1：同样先准备Discord开发者配置（和方案一一样） #

步骤2：编写WebView登录代码 #

import React, { useState } from 'react';
import { WebView } from 'react-native-webview';

const DiscordLoginScreen = () => {
  const [isLoading, setIsLoading] = useState(true);
  const clientId = '你的Discord Client ID';
  const redirectUri = 'myapp://discord-auth';
  const scope = 'identify email';
  const authUrl = `https://discord.com/api/oauth2/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${scope}`;

  // 监听URL变化，处理回调
  const handleNavigationStateChange = (navState) => {
    const { url } = navState;
    if (url.startsWith(redirectUri)) {
      // 从URL里提取授权码code
      const code = new URL(url).searchParams.get('code');
      if (code) {
        // 用code去换accessToken
        exchangeCodeForToken(code);
        // 这里可以关闭WebView或者导航到其他页面
      }
    }
  };

  const exchangeCodeForToken = async (code) => {
    try {
      const response = await fetch('https://discord.com/api/oauth2/token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
          client_id: clientId,
          client_secret: '你的Discord Client Secret',
          grant_type: 'authorization_code',
          code: code,
          redirect_uri: redirectUri,
          scope: scope,
        }),
      });
      const tokenData = await response.json();
      // 拿到accessToken后获取用户信息，和方案一一样
      const userResponse = await fetch('https://discord.com/api/users/@me', {
        headers: {
          Authorization: `Bearer ${tokenData.access_token}`,
        },
      });
      const userData = await userResponse.json();
      console.log('用户信息：', userData);
    } catch (error) {
      console.error('获取token失败：', error);
    }
  };

  return (
    <WebView
      source={{ uri: authUrl }}
      onNavigationStateChange={handleNavigationStateChange}
      onLoadStart={() => setIsLoading(true)}
      onLoadEnd={() => setIsLoading(false)}
    />
  );
};

export default DiscordLoginScreen;

注意：这种方法需要处理WebView的各种边缘情况（比如用户取消登录、网络错误等），不如方案一省心。

• 不要把Client Secret暴露在前端代码里！如果你的应用有后端服务，建议把换token的步骤放到后端做，前端只负责获取授权码，然后传给后端去换token，这样更安全。
• 测试时确保重定向URI和Discord开发者平台里设置的完全一致，包括大小写和协议。

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