Блог

Главная - Вопросы по программированию - Как реализовать поток кода аутентификации с помощью Okta

Как реализовать поток кода аутентификации с помощью Okta

#javascript #reactjs #oauth-2.0 #oauth #okta

Вопрос:

У нас есть приложение react, в котором мы пытаемся реализовать поток кода аутентификации с помощью социальных логинов с помощью Facebook. После аутентификации мы будем отправлять запросы на наш сервер, который будет проверять токен доступа JWT при каждом вызове.

При попытке войти в систему с помощью Facebook мы успешно перенаправляемся обратно на наш redirect_uri с помощью кода аутентификации, но прежде чем мы сможем обменять код аутентификации на токен доступа, мы получим следующую ошибку:

AuthSdkError: Unable to retrieve OAuth redirect params from storage

У нас есть простой компонент, который обрабатывает URI обратного вызова и конфигурацию Okta следующим образом:

 const oktaAuth = new OktaAuth({
  clientId: CLIENT_ID,
  issuer: ISSUER,
  redirectUri: REDIRECT_URI,
  scopes: ['openid', 'profile', 'email'],
  pkce: true,
  disableHttpsCheck: OKTA_TESTING_DISABLEHTTPSCHECK,
});

function App() {

  const history = useHistory();

  const restoreOriginalUri = async (_oktaAuth: any, originalUri: any) => {
    history.replace(toRelativeUrl(originalUri || '/', window.location.origin));
  };

  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
      <UserDataProvider>
        <Switch>
          <Route path="/" exact component={isAuthenticated ? Home : Login} />

          <SecureRoute path="/protected" exact component={Home} />
          <Route path="/login/callback" component={LoginCallback} /> // LoginCallback from the Okta SDK (@okta/okta-react)

          <Redirect to="/" />
        </Switch>
      </UserDataProvider>
    </Security>
  );
}

Похоже, ошибка исходит от LoginCallback компонента в SDK Okta.

У нас есть такой URL-адрес, который обрабатывает наш логин и должен перенаправлять нас в наше приложение: https://${ourOktaDomain}/oauth2/v1/authorize?idp=${idp}amp;client_id=${clientId}amp;response_type=codeamp;response_mode=queryamp;scope=openid emailamp;redirect_uri=http://localhost:3000/login/callbackamp;state=${randomString}amp;code_challenge=${anotherRandomString}amp;code_challenge_method=S256

  • Почему мы получаем эту ошибку?
  • Что Okta пытается извлечь из хранилища и о каком хранилище идет речь (локальном / сеансовом и т. Д.).
  • Должны ли мы устанавливать какое-то значение в хранилище перед перенаправлением на вышеупомянутый URL-адрес входа в систему Okta?
  • Является ли наш объект конфигурации OktaAuth правильным? Правильно ли использовать PKCE?

Комментарии:

1. откуда берется эта idp ценность?

2. Это значение нашего поставщика удостоверений личности, которое мы получаем от Okta, когда мы создаем поставщика удостоверений личности в Okta в разделе безопасность -> Поставщик удостоверений личности

3. code_challenge это не случайная строка, я видел ваш последующий вопрос…

Ответ №1:

Оказывается, мне следовало использовать SDK Okta для создания строки аутентификации, а не создавать ее самостоятельно. SDK обрабатывает закулисные действия, особенно для PKCE, для которого требуется, чтобы преобразователь кода хранился в локальном хранилище, а затем извлекался, когда пользователь перенаправляется в приложение после успешного входа.

Вот как я справился с этим с помощью SDK:

 const onSocialLogin = () => {
  oktaAuth.signInWithRedirect({ 
    originalUri: '/welcome',
    clientId: CLIENT_ID,
    redirectUri: encodeURI(REDIRECT_URI),
    responseType: 'code',
    responseMode: 'query',
    state,
    nonce,
    codeChallenge,
    codeChallengeMethod: 'S256',
    scopes: ['openid', 'email'],
    idp: FACEBOOK_APP_ID
  });
};
Метки: