React：LinkedIn 访问令牌的步骤-js教程-PHP中文网

我最近集成了 LinkedIn API，事实证明它非常简单。任务是从 LinkedIn 检索用户的电子邮件地址。为了实现这一目标，我主要使用了两个端点：

https://api.linkedin.com/oauth/v2/authorization
https://www.linkedin.com/oauth/v2/accessToken

链接

演示
代码库

先决条件

要实现此功能，您需要一个 LinkedIn 应用程序，该应用程序可以通过 LinkedIn 开发人员门户轻松设置。创建后，您的应用程序将提供：

客户端 ID：您的应用程序的唯一标识符。
客户端密钥：用于您的应用与 LinkedIn 之间的安全通信。

此外，您还需要设置重定向 URL。这是 LinkedIn 在用户批准您的应用后发送授权代码的位置

React: LinkedIn Access Token in Steps

如何通过 10 步获取 LinkedIn 访问令牌

两个端点，对吗？但要使这一切顺利进行，至少需要 10 个步骤。看一下时序图：

React: LinkedIn Access Token in Steps

步骤1：用户点击授权按钮。

React: LinkedIn Access Token in Steps

步骤 2：Web 应用程序将用户重定向到 LinkedIn。

您需要将用户重定向到：

https://api.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=profile%20email%20openid

登录后复制

将 CLIENT_ID 和 REDIRECT_URI 替换为您在开发者门户中定义的值。

第 3 步：LinkedIn 要求用户登录

React: LinkedIn Access Token in Steps

第 4 步：LinkedIn 要求用户授权 Web 应用程序

第 5 步：LinkedIn 将用户发送至重定向 URL。

就我而言，最终的重定向 URL 如下所示：

https://demo.garciadiazjaime.com/linkedin-api-openid-user-info?code=AQSWHfrKRe6Zvr-fSccBQl2FfpxdkPxx6penQgLAFuNWVXviCb2qmtuCdy9czV-vZIqIczV-4UQNcKuRQk1qMgA3c13CdPpGHxdItcpqMuMmJsksxXYLOohcBF7jaAAqA6nKMq6pXsLH5-itSnyGdnWVIDc1v1ynAzckv-DCOn1gP6lkQf8aWu3CM5E79Zoh8PmHS3_eWT0LymNSM7U

登录后复制

注意代码查询参数是如何传递的。这很重要，因为它将在下一步请求访问令牌时使用。

步骤 6：Web 应用程序将代码传递给 Lambda 函数

此处使用 Lambda 函数的原因是下一步涉及请求访问令牌，这需要传递 Client ID 和 Client Secret。由于这些凭据应保持安全，因此此步骤需要在类似后端的环境中处理。

第 7 步：Lambda 函数向 LinkedIn 请求访问令牌

看一下代码：

https://api.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=profile%20email%20openid

登录后复制

步骤 8.LinkedIn 将令牌返回给 Lambda 函数

步骤 9. Lambda 函数将令牌返回到 Web 应用程序

步骤 10. Web 应用程序接收令牌

oauth/v2/accessToken 端点的 LinkedIn 响应通常如下所示：

https://demo.garciadiazjaime.com/linkedin-api-openid-user-info?code=AQSWHfrKRe6Zvr-fSccBQl2FfpxdkPxx6penQgLAFuNWVXviCb2qmtuCdy9czV-vZIqIczV-4UQNcKuRQk1qMgA3c13CdPpGHxdItcpqMuMmJsksxXYLOohcBF7jaAAqA6nKMq6pXsLH5-itSnyGdnWVIDc1v1ynAzckv-DCOn1gP6lkQf8aWu3CM5E79Zoh8PmHS3_eWT0LymNSM7U

登录后复制

注意 id_token 如何包含在响应中，这是一个 JWT（JSON Web 令牌）。如果你解码它，你会得到类似这样的东西：

const { code } = JSON.parse(event.body);

const config = {
  grant_type: "authorization_code",
  code,
  client_id: LINKEDIN_CLIENT_ID,
  client_secret: LINKEDIN_CLIENT_SECRET,
  redirect_uri: LINKEDIN_REDIRECT,
};

const response = await fetch(`https://www.linkedin.com/oauth/v2/accessToken`, {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  body: new URLSearchParams(config),
});

登录后复制

它输出的内容包括：

{
  access_token:"...access_token...",
  expires_in: 5183999,
  scope: "email,openid,profile",
  token_type: "Bearer",
  id_token:
    "eyJ6aXAiOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImQ5Mjk2NjhhLWJhYjEtNGM2OS05NTk4LTQzNzMxNDk3MjNmZiIsImFsZyI6IlJTMjU2In0.eyJpc3MiOiJodHRwczovL3d3dy5saW5rZWRpbi5jb20vb2F1dGgiLCJhdWQiOiI4NmNtemNrN2k2dG5tOCIsImlhdCI6MTczMTg4MDM1MCwiZXhwIjoxNzMxODgzOTUwLCJzdWIiOiJlbTVqVXhDcEh4IiwibmFtZSI6IkphaW1lIEdhcmNpYSBEaWF6IiwiZ2l2ZW5fbmFtZSI6IkphaW1lIiwiZmFtaWx5X25hbWUiOiJHYXJjaWEgRGlheiIsInBpY3R1cmUiOiJodHRwczovL21lZGlhLmxpY2RuLmNvbS9kbXMvaW1hZ2UvdjIvQzU2MDNBUUhnYWc5TVNUUDNGQS9wcm9maWxlLWRpc3BsYXlwaG90by1zaHJpbmtfMTAwXzEwMC9wcm9maWxlLWRpc3BsYXlwaG90by1zaHJpbmtfMTAwXzEwMC8wLzE2NjA5MzcwNTQ2MTg_ZT0yMTQ3NDgzNjQ3JnY9YmV0YSZ0PXpuRWFMUS1vSVRYVl9LT3B5aFZGcDRfUHVLd0JabGx5VGRjNTc3ZDBoWXciLCJlbWFpbCI6ImdhcmNpYWRpYXpqYWltZUBnbWFpbC5jb20iLCJlbWFpbF92ZXJpZmllZCI6InRydWUiLCJsb2NhbGUiOiJlbl9VUyJ9...",
};

登录后复制

对于我的用例，电子邮件字段正是我所需要的。现在您已拥有访问令牌，您还可以使用它向 LinkedIn REST API 发出请求，如下所示：

import { jwtDecode } from "jwt-decode";

jwtDecode(jwt);

登录后复制

它将为您提供与 JWT 令牌中基本相同的信息，但现在您拥有访问令牌，您可以使用它来访问 LinkedIn 的任何其他端点。

结论

总体而言，与 LinkedIn 的 RESTful API 集成非常简单。需要记住的一件事是，该过程在客户端和服务器之间分开：客户端负责将用户重定向到 LinkedIn 进行身份验证和授权，而服务器负责与 LinkedIn 的 API 交互并传递 ClientId 和 ClientSecret，而服务器不应该这样做在您的客户端应用程序中公开。

以上是React：LinkedIn 访问令牌的步骤的详细内容。更多信息请关注PHP中文网其他相关文章！