> 웹 프론트엔드 > JS 튜토리얼 > 반응: LinkedIn 액세스 토큰을 단계별로

반응: LinkedIn 액세스 토큰을 단계별로

Patricia Arquette
풀어 주다: 2024-12-03 09:20:12
원래의
230명이 탐색했습니다.

최근에 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

LinkedIn 액세스 토큰을 얻는 10단계 방법

엔드포인트가 두 개죠? 하지만 모든 것이 제대로 작동하려면 최소한 10단계가 필요합니다. 시퀀스 다이어그램을 살펴보세요.

React: LinkedIn Access Token in Steps

1단계: 사용자가 승인 버튼을 클릭합니다.

React: LinkedIn Access Token in Steps

2단계: 웹 애플리케이션이 사용자를 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은 사용자에게 웹 애플리케이션 승인을 요청합니다.

5단계: LinkedIn은 사용자에게 리디렉션 URL을 보냅니다.

저의 경우 최종 리디렉션 URL은 다음과 같습니다.

https://demo.garciadiazjaime.com/linkedin-api-openid-user-info?code=AQSWHfrKRe6Zvr-fSccBQl2FfpxdkPxx6penQgLAFuNWVXviCb2qmtuCdy9czV-vZIqIczV-4UQNcKuRQk1qMgA3c13CdPpGHxdItcpqMuMmJsksxXYLOohcBF7jaAAqA6nKMq6pXsLH5-itSnyGdnWVIDc1v1ynAzckv-DCOn1gP6lkQf8aWu3CM5E79Zoh8PmHS3_eWT0LymNSM7U
로그인 후 복사
로그인 후 복사

코드 쿼리 매개변수가 어떻게 전달되는지 확인하세요. 이는 다음 단계에서 액세스 토큰을 요청할 때 사용되므로 중요합니다.

6단계: 웹 애플리케이션이 코드를 Lambda 함수에 전달합니다.

여기서 Lambda 함수를 사용하는 이유는 다음 단계에서 클라이언트 ID와 클라이언트 비밀번호를 전달해야 하는 액세스 토큰을 요청하기 때문입니다. 이러한 자격 증명은 안전하게 유지되어야 하므로 이 단계는 백엔드와 유사한 환경에서 처리되어야 합니다.

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 함수가 웹 애플리케이션에 토큰을 반환합니다.

10단계. 웹 애플리케이션이 토큰을 수신합니다.

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 웹 토큰)입니다. 디코딩하면 다음과 같은 결과가 나옵니다.

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와 상호 작용하고 클라이언트 ID 및 ClientSecret을 전달하는 역할을 담당합니다. 클라이언트 애플리케이션에 노출됩니다.

위 내용은 반응: LinkedIn 액세스 토큰을 단계별로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿