Reagieren: LinkedIn-Zugriffstoken in Schritten

Ich habe kürzlich die LinkedIn-API integriert und es stellte sich heraus, dass es ziemlich einfach war. Die Aufgabe bestand darin, die E-Mail-Adresse des Benutzers von LinkedIn abzurufen. Um dies zu erreichen, habe ich hauptsächlich zwei Endpunkte verwendet:

• https://api.linkedin.com/oauth/v2/authorization

• https://www.linkedin.com/oauth/v2/accessToken

Links

• Demo

• Codebasis

Voraussetzung

Damit dies funktioniert, benötigen Sie eine LinkedIn-App, die einfach über das LinkedIn Developer Portal eingerichtet werden kann. Nach der Erstellung bietet Ihre App Folgendes:

• Client-ID: Eine eindeutige Kennung für Ihre App.
• Client-Geheimnis: Wird für die sichere Kommunikation zwischen Ihrer App und LinkedIn verwendet.

Zusätzlich müssen Sie eine Umleitungs-URL einrichten. Hier sendet LinkedIn den Autorisierungscode, nachdem der Benutzer Ihre App genehmigt hat

So erhalten Sie in 10 Schritten ein LinkedIn-Zugriffstoken

Zwei Endpunkte, oder? Damit alles funktioniert, sind jedoch mindestens 10 Schritte erforderlich. Schauen Sie sich das Sequenzdiagramm an:

Schritt 1: Der Benutzer klickt auf die Schaltfläche „Autorisieren“.

Schritt 2: Die Webanwendung leitet den Benutzer zu LinkedIn weiter.

Sie müssen den Benutzer umleiten zu:

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

Ersetzen Sie CLIENT_ID und REDIRECT_URI durch Ihre im Entwicklerportal definierten Werte.

Schritt 3: LinkedIn fordert den Benutzer auf, sich anzumelden

Schritt 4: LinkedIn fordert den Benutzer auf, die Webanwendung zu autorisieren

Schritt 5: LinkedIn leitet den Benutzer zur Weiterleitungs-URL weiter.

In meinem Fall sieht die endgültige Weiterleitungs-URL so aus:

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

Beachten Sie, wie der Code-Abfrageparameter übergeben wird. Dies ist wichtig, da es im nächsten Schritt bei der Anforderung des Zugriffstokens verwendet wird.

Schritt 6: Die Webanwendung übergibt den Code an eine Lambda-Funktion

Der Grund für die Verwendung einer Lambda-Funktion besteht darin, dass der nächste Schritt die Anforderung eines Zugriffstokens umfasst, was die Übergabe der Client-ID und des Client-Geheimnisses erfordert. Da diese Anmeldeinformationen sicher bleiben sollen, muss dieser Schritt in einer Backend-ähnlichen Umgebung durchgeführt werden.

Schritt 7: Lambda-Funktion fordert ein Zugriffstoken von LinkedIn an

Sehen Sie sich den Code an:

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

Schritt 8. LinkedIn gibt das Token an die Lambda-Funktion zurück

Schritt 9: Die Lambda-Funktion gibt das Token an die Webanwendung zurück

Schritt 10: Die Webanwendung empfängt das Token

Die LinkedIn-Antwort für den Endpunkt oauth/v2/accessToken sieht normalerweise so aus:

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

Beachten Sie, dass id_token in der Antwort enthalten ist und es sich dabei um ein JWT (JSON Web Token) handelt. Wenn Sie es entschlüsseln, erhalten Sie etwa Folgendes:

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),
});

was unter anderem ausgegeben wird:

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

Für meinen Anwendungsfall ist das E-Mail-Feld genau das, was ich brauchte. Da Sie nun über das Zugriffstoken verfügen, können Sie es auch verwenden, um Anfragen an die LinkedIn REST API zu stellen, etwa so:

import { jwtDecode } from "jwt-decode";

jwtDecode(jwt);

Sie erhalten im Grunde die gleichen Informationen wie im JWT-Token, aber da Sie nun über das Zugriffstoken verfügen, können Sie damit auf alle anderen Endpunkte von LinkedIn zugreifen.

Abschluss

Insgesamt war die Integration mit der RESTful-API von LinkedIn ziemlich unkompliziert. Beachten Sie, dass der Prozess zwischen Client und Server aufgeteilt ist: Der Client kümmert sich um die Weiterleitung des Benutzers zu LinkedIn zur Authentifizierung und Autorisierung, während der Server für die Interaktion mit der LinkedIn-API und die Weitergabe von ClientId und ClientSecret verantwortlich ist, was nicht der Fall sein sollte in Ihrer Client-Anwendung verfügbar gemacht werden.

Das obige ist der detaillierte Inhalt vonReagieren: LinkedIn-Zugriffstoken in Schritten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!