Cómo crear un código PKCE y un verificador para el flujo de código de autorizació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>
);
};
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:
Aquí tienes un ejemplo de cómo generar el code_verifier en JavaScript:
Luego, puedes utilizar los valores code_challenge y code_verifier generados en la URL de autenticación de la siguiente manera:
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: