使用React的redirect_uri登录中的LinkedIn问题

Question

我试图在这个链接LinkedIn之后添加https://github.com/orionsoft/react-linkedin-login身份验证。本教程没有提到redirect_uri，因为我将其保留为空白。但是，当我尝试使用自己的react应用程序登录时，会出现一个错误，即在react应用程序中正确使用的redirect_uri是什么。这个LinkedIn错误类似于这个“不匹配已注册值”。

我的网站网址是http://localhost:3000

请参考LinkedIn开发人员控制台设置的屏幕截图

​

我在react中添加代码

​

import React, { Component } from 'react';
import LinkedIn from 'react-linkedin-login'

class SocialLogin extends Component {
  constructor(props)
  {
    super(props);
  }
  
  callbackLinkedIn ({code, redirectUri}) {
    console.log(code+"linked in code")
  }

  
  render() {
    return (
      <div className="login-box">
        <div className="social-login">
             <LinkedIn
              clientId='***********'
              callback={this.callbackLinkedIn.bind(this)}
              text='LinkedIn' /> 
        </div>
      </div>
    );
  }
}

export default SocialLogin;

​

我得到这个问题“”redirect_uri不匹配注册值“”.please引用最后一个图像

​

我给出了4个重定向URL，如：

1. http://localhost:3000
2. http://localhost:3000/callback
3. http://localhost:3000/signin-linkedin
4. http://localhost:3000/auth/linkedin/callback

但我也遇到了同样的问题。请帮我解决这个问题。

Answer 1

在截图中看到您的重定向URL，可以将其解码为：redirect_uri = http%3A%2F%2Flocalhost%3A3000%2F，它转换为http://localhost:3000/。

最后你错过了一个/。您当前添加的URL都是不必要的。

Answer 2

您需要在授权URI部分中添加"http://localhost:3000/"。发送给Linkedin的请求在末尾带有尾斜杠，作为redirect_uri的参数。

我已经附上了下面的截图

​

​

​

Answer 3

可能的问题可能是初始URL (发出API调用的URL )和重定向URL(应该从linkedin打开post响应的URL)可能有不同的域。

您可以使用像filder这样的工具来捕获对linkedIn登录API的API调用，并检查HTTP中的url。您需要在RedirectURL中放置一个具有相同域的url。