如何在React Native/Expo及Expo Dev Client中集成LinkedIn登录？

一、Expo 托管工作流（无原生模块依赖） #

纯Expo托管环境无法直接使用第三方原生LinkedIn登录包，推荐用expo-auth-session实现OAuth2授权流程：

1. 前置配置 #

• 在LinkedIn开发者后台，添加匹配的重定向URI：开发阶段用exp://<你的设备IP>:19000，生产环境可自定义scheme（比如yourapp://linkedin/callback）
• 在项目app.json中配置scheme：

  {
    "expo": {
      "scheme": "yourapp",
      // 其他项目配置...
    }
  }
  

2. 安装依赖 #

npx expo install expo-auth-session expo-crypto

3. 代码实现 #

import { useAuthRequest } from 'expo-auth-session';
import * as WebBrowser from 'expo-web-browser';
import React from 'react';

WebBrowser.maybeCompleteAuthSession();

const LinkedInAuth = () => {
  const discovery = {
    authorizationEndpoint: 'https://www.linkedin.com/oauth/v2/authorization',
    tokenEndpoint: 'https://www.linkedin.com/oauth/v2/accessToken',
  };

  const [request, response, promptAsync] = useAuthRequest(
    {
      clientId: '<你的LinkedIn应用Client ID>',
      scopes: ['r_liteprofile', 'r_emailaddress'],
      redirectUri: 'yourapp://linkedin/callback', // 需与后台配置完全一致
    },
    discovery
  );

  React.useEffect(() => {
    if (response?.type === 'success') {
      const { code } = response.params;
      // 用授权码换取access token
      fetch('https://www.linkedin.com/oauth/v2/accessToken', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `grant_type=authorization_code&code=${code}&redirect_uri=yourapp://linkedin/callback&client_id=<你的Client ID>&client_secret=<你的Client Secret>`,
      })
      .then(res => res.json())
      .then(data => {
        // 调用API获取用户基础信息
        fetch('https://api.linkedin.com/v2/me', {
          headers: { Authorization: `Bearer ${data.access_token}` },
        })
        .then(res => res.json())
        .then(user => console.log('用户信息:', user));
      });
    }
  }, [response]);

  return (
    <button onPress={() => promptAsync()} disabled={!request}>
      LinkedIn 登录
    </button>
  );
};

export default LinkedInAuth;

二、Expo Dev Client/裸React Native项目 #

这类项目支持原生模块，推荐使用@smuxx/react-native-linkedin（维护较活跃）：

1. 安装包 #

npm install @smuxx/react-native-linkedin
# iOS 需额外执行pod安装
npx pod-install ios

2. 原生配置 #

• iOS：在Info.plist中添加URL scheme：

  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>linkedinauth<你的Client ID></string>
      </array>
    </dict>
  </array>
  

• Android：在AndroidManifest.xml中添加intent-filter：

  <activity
    android:name="com.reactnativelinkedin.RNLinkedInLoginActivity"
    android:exported="true">
    <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="linkedinauth<你的Client ID>"
        android:host="oauth" />
    </intent-filter>
  </activity>
  

3. 代码实现 #

import LinkedInLogin from '@smuxx/react-native-linkedin';

const LinkedInLoginComponent = () => {
  const handleLogin = async () => {
    try {
      const result = await LinkedInLogin.login({
        clientID: '<你的Client ID>',
        clientSecret: '<你的Client Secret>',
        redirectUri: 'linkedinauth<你的Client ID>://oauth',
        scopes: ['r_liteprofile', 'r_emailaddress'],
      });
      console.log('登录结果:', result);
      // 获取用户信息
      const userRes = await fetch('https://api.linkedin.com/v2/me', {
        headers: { Authorization: `Bearer ${result.accessToken}` },
      });
      const user = await userRes.json();
      console.log('用户信息:', user);
    } catch (error) {
      console.error('登录失败:', error);
    }
  };

  return (
    <button onPress={handleLogin}>
      LinkedIn 登录
    </button>
  );
};

export default LinkedInLoginComponent;

三、常见问题排查 #

• 重定向URI不匹配：确保LinkedIn开发者后台的重定向URI和项目配置完全一致，包括scheme、路径
• 权限被拒：在LinkedIn后台申请r_liteprofile、r_emailaddress等必要权限，等待审核通过
• Expo托管下原生包报错：纯Expo托管不支持原生模块，需切换到Expo Dev Client或使用expo-auth-session方案
• Android登录后无回调：检查AndroidManifest.xml中的intent-filter配置，确保scheme和host与redirectUri匹配

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