ホームページ ウェブフロントエンド jsチュートリアル React: LinkedIn アクセス トークンの手順

React: LinkedIn アクセス トークンの手順

Dec 03, 2024 am 09:20 AM

最近 LinkedIn API と統合しましたが、非常に簡単であることがわかりました。タスクは、LinkedIn からユーザーの電子メール アドレスを取得することでした。これを達成するために、私は主に 2 つのエンドポイントを使用しました:

  • 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 アクセス トークンを取得する方法

エンドポイントは 2 つですよね?ただし、すべてを機能させるには、少なくとも 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 関数を使用する理由は、次のステップでアクセス トークンをリクエストする必要があり、これにはクライアント 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 関数が 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 Token) です。デコードすると次のようなものが得られます:

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 との統合は非常に簡単でした。留意すべき点の 1 つは、プロセスがクライアントとサーバーに分割されていることです。クライアントは、認証と承認のためにユーザーを LinkedIn にリダイレクトする処理を行いますが、サーバーは LinkedIn の API と対話し、ClientId と ClientSecret を渡す必要がありますが、これらを渡す必要はありません。クライアント アプリケーションで公開されます。

以上がReact: LinkedIn アクセス トークンの手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

See all articles