Una cuenta para tus tiendas
El SDK permite acceder a una tienda con la cuenta utilizada en la aplicación. Esta documentación describe los métodos disponibles en las tiendas compatibles.
El diálogo central permite iniciar sesión y crear una cuenta. Su interfaz está disponible en francés e inglés, aunque esta documentación se ofrece en doce idiomas.
Añadir el acceso
En una tienda compatible, window.rankappConnect ya está cargado y configurado. Utiliza tres métodos: login(), getSession() y logout(). No necesitas instalar nada más. El ejemplo completo solo añade botones y mensajes accesibles.
Llama a login() directamente desde un clic. Su promesa devuelve {status: "success", session}, {status: "cancelled"} o {status: "redirecting"}. Los errores rechazan la promesa con un código estable. En móviles o con ventanas bloqueadas se utiliza una redirección. returnTo debe permanecer en tu tienda.
const connect = window.rankappConnect;
function onSignInClick() {
return connect.login({ returnTo: '/account' });
}
function readSession() {
return connect.getSession();
}
function onSignOutClick() {
return connect.logout();
}Ver el ejemplo completo con botones y mensajes
<button type="button" id="connect-login">Entrar con RankAPP</button>
<button type="button" id="connect-logout" hidden>Cerrar sesión</button>
<p id="connect-status" role="status" aria-live="polite"></p>
<script>
const connect = window.rankappConnect;
const login = document.querySelector('#connect-login');
const logout = document.querySelector('#connect-logout');
const status = document.querySelector('#connect-status');
const copy = {
"cancelled": "Inicio de sesión cancelado. Puedes volver a intentarlo.",
"redirecting": "Redirigiendo al inicio de sesión…",
"login": "Entrar con RankAPP",
"logout": "Cerrar sesión",
"signedOut": "No has iniciado sesión.",
"signedIn": "Sesión iniciada: ",
"error": "No se puede iniciar sesión. Inténtalo de nuevo.",
"pending": "Iniciando sesión…"
};
function render(session) {
status.textContent = session.authenticated
? copy.signedIn + session.user.username : copy.signedOut;
logout.hidden = !session.authenticated;
}
function failure() {
status.textContent = copy.error;
}
function busy(value) {
login.disabled = logout.disabled = value;
}
login.addEventListener('click', async () => {
busy(true);
status.textContent = copy.pending;
let redirecting = false;
try {
const result = await connect.login({ returnTo: '/account' });
if (result.status === 'success') render(result.session);
else if (result.status === 'cancelled') status.textContent = copy.cancelled;
else {
redirecting = true;
status.textContent = copy.redirecting;
}
} catch (error) { failure(); }
finally { if (!redirecting) busy(false); }
});
logout.addEventListener('click', async () => {
busy(true);
try { render(await connect.logout()); }
catch (error) { failure(); }
finally { busy(false); }
});
busy(true);
connect.getSession().then(render).catch(failure)
.finally(() => busy(false));
</script>Mostrar la sesión
getSession() consulta el servidor: {authenticated: false} significa que no hay sesión. Una sesión autenticada incluye user (userId, username, avatarUrl, language) y, en tiendas gestionadas, orders. Consulta al cargar la página y después de una redirección; nunca deduzcas la identidad de la URL.
Los fallos del servicio siguen siendo errores: STOREFRONT_SESSION_ERROR no se convierte en una sesión cerrada. Muestra un mensaje para reintentar. login() distingue cancelación y error; logout() cierra solo la sesión de la tienda.
Identidad y cookies
El SDK exige HTTPS para todos los sitios y endpoints, también en desarrollo local. Utiliza un servidor local HTTPS con un certificado de confianza para tu navegador. HTTP nunca se acepta para la autenticación.
La contraseña se introduce en auth.rankapp.io, nunca en el sitio del comerciante. Un código de un solo uso y PKCE S256 vinculan el diálogo con la solicitud inicial. El intercambio del código y los tokens permanecen en el servidor; el mensaje de la ventana no contiene tokens.
Las cookies usan HttpOnly, Secure y SameSite=Lax y pertenecen únicamente a su propio host, sin Domain compartido. La sesión central es distinta de cada sesión de tienda. logout() cierra la sesión de esa tienda, no necesariamente la central.
El servidor de la tienda
Esta documentación cubre el SDK 1.1.0. En una tienda compatible, utiliza únicamente el cliente preconfigurado window.rankappConnect. El servidor gestiona el acceso, la sesión y el cierre de sesión; el cliente aplica el transporte firmado necesario. No necesitas configurar endpoints ni adaptadores en tu página.
Probar en vista previa
La vista previa admite cuentas reales para probar el acceso y la desconexión como cliente. El permiso para consultar un borrador privado es independiente: abrir la vista previa no inicia una sesión de comprador. Los pagos están desactivados en este entorno.
Prueba el acceso correcto, la cancelación, el cierre de la ventana, el retorno móvil y un nuevo acceso después de cerrar sesión. En producción, la tienda debe estar publicada y accesible. Autenticarse no confirma un pago.
Preparar una integración externa
Todavía no se pueden registrar integraciones para sitios externos independientes. Antes de abrir esa posibilidad se necesitan registro de clientes, validación de URL de retorno y definición de permisos.
No inventes un client_id, un endpoint de tokens ni una configuración OIDC supuestamente compatibles. El contrato actual corresponde a las tiendas compatibles y su adaptador. Mantén contraseñas y tokens fuera del JavaScript del comerciante y verifica siempre la sesión mediante el servidor.