React使用react-linkedin-login-oauth2获取领英用户资料问题

在React应用中集成领英OAuth登录时，通过npm i react-linkedin-login-oauth2安装依赖后，按照官方示例编写代码仅能获取到临时授权码，无法直接拿到用户的名字、姓氏、头像信息。
初始参考代码存在两个小问题：未正确导入useLinkedIn钩子、未配置拉取用户资料所需的权限scope，原代码如下：

import React, { useState } from 'react';
import linkedin from 'react-linkedin-login-oauth2';

function LinkedInPage() {
  const { linkedInLogin } = useLinkedIn({
    clientId: '86vhj2q7ukf83q',
    redirectUri: `${window.location.origin}/linkedin`,
    onSuccess: (code) => {
      console.log(code); 
    },
    onError: (error) => {
      console.log(error);
    },
  });

  return (
    <img
      onClick={linkedInLogin}
      src={linkedin}
      alt="Sign in with Linked In"
      style={{ maxWidth: '180px', cursor: 'pointer' }}
    />
  );
} 

领英OAuth2.0采用标准的授权码模式，前端拿到的授权码不能直接换取用户信息，必须通过后端中转完成后续流程，避免泄露应用密钥，具体步骤如下：

• 前置配置：登录领英开发者平台，进入对应应用的配置页，开通r_liteprofile接口权限，该权限用于获取用户公开的基础资料（姓名、头像），同时确认配置的重定向地址和前端代码里的redirectUri完全一致。
• 流程说明：
  1. 前端调起领英授权，用户同意授权后，前端拿到一次性的授权码
  2. 前端将授权码发送到自有服务端接口
  3. 服务端携带授权码、应用Client ID、Client Secret向领英授权接口请求换取Access Token
  4. 服务端携带Access Token向领英用户资料接口请求用户信息，解析出姓名、头像后返回给前端

前端代码修正 #

需要补全导入、添加权限scope，拿到授权码后转发给自有后端，修正后代码如下：

import React from 'react';
// 正确导入useLinkedIn钩子和登录按钮图标
import { useLinkedIn } from 'react-linkedin-login-oauth2';
import linkedinIcon from 'react-linkedin-login-oauth2/lib/linkedin.png';

function LinkedInPage() {
  const { linkedInLogin } = useLinkedIn({
    clientId: '替换为你自己的领英应用Client ID',
    redirectUri: `${window.location.origin}/linkedin`,
    scope: 'r_liteprofile', // 必须添加该权限scope，否则无法获取用户资料
    onSuccess: async (code) => {
      // 将授权码发给自有后端
      const resp = await fetch('/api/linkedin/auth', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ code })
      });
      const userInfo = await resp.json();
      // userInfo 内包含 firstName、lastName、avatar 字段
      console.log('登录用户信息：', userInfo);
    },
    onError: (error) => {
      console.error('领英登录失败：', error);
    },
  });

  return (
    <img
      onClick={linkedInLogin}
      src={linkedinIcon}
      alt="Sign in with Linked In"
      style={{ maxWidth: '180px', cursor: 'pointer' }}
    />
  );
}

export default LinkedInPage;

后端逻辑说明 #

后端收到前端传的授权码后，分两步完成请求：

1. 换取Access Token
   向领英授权接口发POST请求，携带以下参数：

   • grant_type: 固定值authorization_code
   • code: 前端上传的授权码
   • redirect_uri: 和前端配置的重定向地址完全一致
   • client_id: 领英应用Client ID
   • client_secret: 领英应用Client Secret，该参数仅能存储在服务端，绝对不能暴露到前端代码中
     请求成功后即可拿到有效Access Token。

2. 拉取用户信息
   携带拿到的Access Token，向领英用户资料接口发GET请求，请求时指定需要返回的字段：id,localizedFirstName,localizedLastName,profilePicture(displayImage~:playableStreams)
   返回结果解析规则：

   • localizedFirstName: 对应用户的名字（profileName）
   • localizedLastName: 对应用户的姓氏（Surname）
   • profilePicture.displayImage~.elements是按分辨率排序的头像资源数组，取对应尺寸下identifiers[0].identifier字段即可拿到头像直链地址（profilePicture）

注意事项 #

• 禁止在前端直接请求领英的换Token接口，一方面会触发浏览器跨域限制，另一方面会泄露Client Secret，导致应用被恶意调用
• 授权码为一次性凭证，有效期极短，拿到后需要立刻发送到后端换Token
• 如果应用需要申请其他用户权限，需要在scope字段里追加对应权限值，同时在领英开发者后台完成权限审核

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