es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo crear un código PKCE y un verificador para el flujo de código de autorización.

15 Jul, 2023 Programación

Siguiendo el flujo de código de autenticación de Okta, dicen que necesito crear un código PKCE que contiene un verificador y un desafío de código.

No está claro cómo crear los valores como en su ejemplo:

{
"code_verifier":"M25iVXpKU3puUjFaYWg3T1NDTDQtcW1ROUY5YXlwalNoc0hhakxifmZHag",
"code_challenge":"qjrzSW9gMiUgpUvqgEPE4_-8swvyCtfOVvg55o5S_es"
}

Sé que puedo enviar el desafío de código en la URL de autenticación de la siguiente manera:

https://${ourOktaDomain}/oauth2/v1/authorize?idp=${idp}&client_id=${clientId}&response_type=code&response_mode=query&scope=openid%20email&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Flogin%2Fcallback&state=${randomString}&code_challenge=${codeChallenge}&code_challenge_method=S256

Pero no está claro qué hacer con el verificador. Dice:

Tu aplicación guarda el code_verifier para más tarde

¿Dónde guardo el verificador y cómo creo estos valores?

EDICIÓN: Mostrando el código donde configuro el code_verifier en el almacenamiento local

const Login = () => {

const codeVerifier = useMemo(async () => {
    const s256 = await sha256(codeChallenge)
    const verifier = btoa(s256);

window.localStorage.setItem(state, verifier);

return verifier;

}, [])

if (!codeVerifier) {
    return <div>Loading...</div>;
  }

const queryParams = encode({
    client<em>id: CLIENT</em>ID,
    redirect<em>uri: encodeURI(REDIRECT</em>URI),
    response<em>type: 'code',
    response</em>mode: 'query',
    state,
    nonce,
    code<em>challenge: codeChallenge,
    code</em>challenge<em>method: 'S256',
    scope: 'openid email',
    idp: OKTA</em>IDP
  });

const socialLoginURI = <code>${OKTA_AUTH_URI}?${queryParams}</code>;

return (
    <button component="a" href="{socialLoginURI}" aria-label="Login Button">
      Facebook Login
    </button>
  );
};
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para crear los valores code_verifier y code_challenge para el flujo de código de autenticación de Okta, puedes seguir estos pasos:

    1. Genera una cadena aleatoria con una longitud mínima de 43 y una longitud máxima de 128 (esto es el code_challenge).
    2. Calcula el hash SHA-256 del code_challenge.
    3. Codifica el valor del hash en formato base64url (esto es el code_verifier).
    4. Guarda el valor del code_verifier en el almacenamiento local o en un almacén de secretos seguro (como se recomienda en la documentación de Okta).

    Aquí tienes un ejemplo de cómo generar el code_verifier en JavaScript:

    const generateCodeVerifier = () => {
  const randomBytes = new Uint8Array(64);
  window.crypto.getRandomValues(randomBytes);
  const codeChallenge = base64urlencode(randomBytes);
  return codeChallenge;
};

const generateCodeChallenge = (codeVerifier) => {
  const hashedVerifier = sha256(codeVerifier);
  const codeChallenge = base64urlencode(hashedVerifier);
  return codeChallenge;
};

const base64urlencode = (buffer) => {
  const base64 = btoa(String.fromCharCode.apply(null, buffer));
  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
};

const sha256 = async (plain) => {
  const encoder = new TextEncoder();
  const data = encoder.encode(plain);
  const hash = await window.crypto.subtle.digest('SHA-256', data);
  return hash;
};

    Luego, puedes utilizar los valores code_challenge y code_verifier generados en la URL de autenticación de la siguiente manera:

    const codeVerifier = generateCodeVerifier();
const codeChallenge = generateCodeChallenge(codeVerifier);

const queryParams = encode({
  client_id: CLIENT_ID,
  redirect_uri: encodeURI(REDIRECT_URI),
  response_type: 'code',
  response_mode: 'query',
  state,
  nonce,
  code_challenge: codeChallenge,
  code_challenge_method: 'S256',
  scope: 'openid email',
  idp: OKTA_IDP
});

const socialLoginURI = `${OKTA_AUTH_URI}?${queryParams}`;

    Finalmente, puedes guardar el valor del code_verifier en el almacenamiento local o en un almacén de secretos seguro, y recuperarlo más tarde en la función de manejo de devolución de llamada al intercambiar el código de autenticación por tokens de acceso y actualización:

    const codeVerifier = window.localStorage.getItem(state);
// intercambiar el código de autenticación por tokens con code_verifier
// eliminar code_verifier del almacenamiento local

Comments are closed.