React: LinkedIn アクセストークンの手順-jsチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-12-03 09:20:12

オリジナル

230 人が閲覧しました

最近 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 サイトの他の関連記事を参照してください。