时间戳

首页 > 解决方案 > Angular 11 从 LinkedIn 未知错误获取 /v2/me

angular - Angular 11 从 LinkedIn 未知错误获取 /v2/me

问题描述

我尝试使用 Oauth2 3-legged flow 从 LinkedIn 获取 r_liteprofile。它在 Postman 中完美运行，但由于某种原因，它在 Angular 11 中不断返回“未知错误”：

代码片段：

params = new HttpParams()
.set('client_id', authTokenReq.clientId)
.set('redirect_uri', authTokenReq.redirectUri)
.set('client_secret', authTokenReq.clientSecret)
.set('code', authTokenReq.code)
.set('grant_type', authTokenReq.grantType);
headers = new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'});
this.http.post<AccessToken>(authTokenReq.authUrl, params, {headers}).subscribe(incData => {
  this.accessToken = incData;
  console.log('incData', incData);
  console.log('access_token', this.accessToken.access_token);
  headers = new HttpHeaders();
  headers = headers.set('Authorization', 'Bearer'+' '+this.accessToken.access_token);
  console.log('headers', headers.getAll('Authorization'));
  this.http.get<LinkedInClient>('https://api.linkedin.com/v2/me?projection=(id)', { headers: new HttpHeaders({'Authorization': 'Bearer ' + this.accessToken.access_token})}).subscribe(client => {
  console.log('client', client['id']);

从 Chrome 中查看控制台调试，似乎标头设置正确：

Request URL: https://api.linkedin.com/v2/me?projection=(id)
Referrer Policy: strict-origin-when-cross-origin
Provisional headers are shown
Accept: application/json, text/plain, */*
Authorization: Bearer AQWzG74CqibM05G1XiJn26y1DyPA-imcbbGB7kwFXqMUWi4t0v33d_nddqpNky4hkuUAt0rja00srjb1QIU1MzOgBtHDsci-jPS-UElbhStNcBzfFLt0FdiuydfDlIbqhrmdF8QQXFlN_2QbNpKUBGHKtDxfp-BDandIB6fCi1Uq9r8VKxUedJ1Ok--u1Lbr6rTcbXMjb0ntupidTOu9xyW9Pb5qzwOwTsj29xl9P4ymAsApq69ehAMiocRXwRhilPOLW7H2YvEbu4PElZMfw7aE3ria2Iq8CK5eRBqpKD9Sjx1ne6o23XfSfptZ6_OBFUSCATED
DNT: 1
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36
projection: (id)

但是飞行前失败并出现 401：

Request URL: https://api.linkedin.com/v2/me?projection=(id)
Request Method: OPTIONS
Status Code: 401 
Remote Address: 185.63.144.4:443
Referrer Policy: strict-origin-when-cross-origin
:authority: api.linkedin.com
:method: OPTIONS
:path: /v2/me?projection=(id)
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en,da;q=0.9,en-GB;q=0.8
access-control-request-headers: authorization
access-control-request-method: GET
cache-control: no-cache
origin: http://localhost:4200
pragma: no-cache
referer: http://localhost:4200/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36
projection: (id)

预检的回应：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: authorization
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: http://localhost:4200
content-length: 77
content-type: application/json
date: Wed, 27 Jan 2021 12:39:11 GMT
set-cookie: lidc="b=VB80:s=V:r=V:g=2759:u=1:i=1611751151:t=1611837551:v=1:sig=AQFhRnWHUE1TRiOaiG6PCqG6oXnXjSYF"; Expires=Thu, 28 Jan 2021 12:39:11 GMT; domain=.linkedin.com; Path=/; SameSite=None; Secure
x-li-fabric: prod-lva1
x-li-pop: prod-efr5
x-li-proto: http/2
x-li-responseorigin: RGW
x-li-uuid: DZn48iEXXhYAduwb5yoAAA==
x-restli-gateway-error: true

在调试控制台中：

core.js:5967 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://api.linkedin.com/v2/me?projection=(id)", ok: false, …}

如果在禁用网络安全的情况下运行完全相同的代码，例如：

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

它就像一个魅力！- LinkedIn 对 CORS 有问题吗？/ 铬呢？

有任何想法吗...？

标签： angularoauthlinkedin

解决方案

经过更多的挖掘，我想这个问题的简单答案是，您需要在服务器端获取访问令牌和用户凭据，而不是从客户端获取。我发现 Twitter 和 Twitch-TV 等其他一些流量也有相同的“限制”

我已经使用 Angular 11 和 Spring boot 启动并运行了流程，如果需要，我很乐意分享

推荐阅读