Documentation Connect

Un compte, vos boutiques

Le SDK permet aux clients de se connecter à une boutique avec le compte utilisé dans l’application. Cette documentation décrit les méthodes disponibles pour les boutiques compatibles.

La fenêtre centrale propose la connexion et la création de compte. Son interface est actuellement disponible en français et en anglais, même si cette documentation existe dans douze langues.

Ajouter la connexion

Sur une boutique compatible, le client window.rankappConnect est déjà chargé et configuré. Trois méthodes suffisent : login(), getSession() et logout(). Aucune installation supplémentaire n’est nécessaire. L’exemple complet ci-dessous ajoute simplement les boutons et leurs messages accessibles.

Appelez login() directement depuis un clic. Sa promesse renvoie {status: "success", session}, {status: "cancelled"} ou {status: "redirecting"}. Une erreur rejette la promesse avec un code stable. Sur mobile ou si la popup est bloquée, la navigation continue par redirection. returnTo doit rester sur votre boutique.

const connect = window.rankappConnect;

function onSignInClick() {
  return connect.login({ returnTo: '/account' });
}

function readSession() {
  return connect.getSession();
}

function onSignOutClick() {
  return connect.logout();
}

<button type="button" id="connect-login">Se connecter avec RankAPP</button>
<button type="button" id="connect-logout" hidden>Se déconnecter</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": "Connexion annulée. Vous pouvez réessayer.",
  "redirecting": "Redirection vers la connexion…",
  "login": "Se connecter avec RankAPP",
  "logout": "Se déconnecter",
  "signedOut": "Vous êtes déconnecté.",
  "signedIn": "Connecté : ",
  "error": "Connexion indisponible. Réessayez.",
  "pending": "Connexion en cours…"
};
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>

Afficher la session

getSession() relit le serveur : {authenticated: false} signifie que le client est déconnecté. Une session authentifiée expose user (userId, username, avatarUrl, language) et, sur les boutiques gérées, orders. Appelez cette méthode au chargement et après un retour par redirection ; ne déduisez jamais l’identité des paramètres de l’URL.

Les erreurs de service restent des erreurs : STOREFRONT_SESSION_ERROR ne devient pas une session déconnectée. Affichez un message permettant de réessayer. login() distingue l’annulation d’une erreur ; logout() ferme uniquement la session de la boutique.

Identité et cookies

Le SDK exige HTTPS pour tous les sites et leurs endpoints, y compris en développement local. Utilisez un serveur local HTTPS avec un certificat approuvé par votre navigateur. HTTP n’est jamais accepté pour l’authentification.

Le mot de passe est saisi sur auth.rankapp.io. Le site marchand ne le recueille pas. Un code à usage unique et PKCE S256 relient le dialogue à la demande initiale ; l’échange et les jetons restent côté serveur. Le message de retour de la popup ne transporte aucun jeton.

Les cookies de session sont HttpOnly, Secure et SameSite=Lax. Ils sont limités à leur hôte, sans attribut Domain partagé. La session centrale et celle de chaque boutique sont distinctes : logout() déconnecte la boutique, pas automatiquement le compte central.

Le rôle du serveur boutique

Cette documentation couvre le SDK 1.1.0. Sur une boutique compatible, utilisez uniquement le client préconfiguré window.rankappConnect. Le serveur gère la connexion, la session et la déconnexion ; le client fourni applique le transport signé nécessaire. Aucun endpoint ni adaptateur n’est à configurer dans votre page.

Tester en aperçu

L’aperçu permet de se connecter avec de vrais comptes et de tester la déconnexion comme un client. Son accès privé au brouillon utilise une autorisation séparée : ouvrir l’aperçu ne connecte pas automatiquement un acheteur. Les paiements y sont désactivés.

Vérifiez la connexion, l’annulation, la fermeture de la popup, le retour mobile et la reconnexion après déconnexion. En production, la boutique doit être publiée et accessible. Une connexion réussie ne constitue pas une confirmation de paiement.

Préparer une intégration externe

L’intégration depuis des sites externes indépendants n’est pas encore ouverte. Elle nécessite l’enregistrement des clients, la validation des URL de retour et la définition des droits accordés avant toute mise à disposition publique.

Ne créez pas aujourd’hui un client_id, un endpoint de jetons ou une configuration OIDC supposés compatibles. Le contrat disponible est celui des boutiques compatibles et de leur adaptateur. Conservez vos mots de passe et jetons hors du JavaScript marchand et vérifiez toujours la session côté serveur.