Проблема redirect_uri в LinkedIn Login с использованием React

Я пытаюсь добавить аутентификацию LinkedIn с React, следуя этой ссылке https://github.com/orionsoft/react-linkedin-login. В учебнике не упоминается redirect_uri из-за которого я оставил его пустым. Но когда я пытаюсь войти в систему с помощью своего приложения-приложения, возникает ошибка. Какая правильная redirect_uri используется в приложении-ответе. Ошибка LinkedIn выглядит так: " redirect_uri не соответствует зарегистрированному значению".

Мой URL-адрес веб-сайта: http://localhost: 3000

Пожалуйста, просмотрите скриншоты для настроек Консоли разработчика LinkedIn enter image description here

Я добавляю код в реакцию

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;

Ответ 1

Увидев URL-адрес перенаправления на скриншоте, его можно расшифровать следующим образом: redirect_uri = http%3A%2F%2Flocalhost%3A3000%2F который переводится на http://localhost:3000/.

Вам не хватает / в конце. Ваши добавленные URL теперь не нужны.

Ответ 2

Вам нужно добавить " http://localhost: 3000/ " в разделе Авторизованный URI. Запрос, отправленный в Linkedin с завершающим косой чертой в конце в качестве параметра для redirect_uri.

Я добавил скриншоты ниже enter image description here

enter image description here

Ответ 3

Возможной проблемой может быть тот факт, что исходный URL-адрес (URL-адрес, вызывающий API-вызов) и URL-адрес перенаправления (URL-адрес, который должен открыть ответ от ссылки), вероятно, имеют разные домены.

Вы можете использовать такой инструмент, как filder, для захвата вызова API для API-интерфейса linkedIn и проверки того, что было URL-адресом в HTTP-запросе. Вам нужно поместить URL-адрес с тем же доменом в RedirectURL.

Ответ 4

Убедитесь, что вы передаете одно и то же значение clientId, как и в консоли разработчика, одновременно просматривая обе привязки, которые вы предоставили clientId, не соответствует.

https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id= 81jbduxh1ev9tj & redirect_uri = http% 3A% 2F% 2Flocalhost% 3A3000% 2F & state = 987654321 & scope = r_basicprofile

Ответ 5

Многие API не доверяют localhost. Я бы предложил попробовать некоторые инструменты, такие как https://ngrok.com, который туннелирует ваш трафик http/https и дает вам уникальный URL-адрес.