Comment intégrer RayorConnect

RayorConnect permet à vos utilisateurs de se connecter simplement, sans mot de passe.

1. Ajouter le bouton RayorConnect

Code JavaScript à copier :

<script>
const clientId = 'votresite.com';
const redirectUri = encodeURIComponent('https://votresite.com/callback');
const scope = encodeURIComponent('openid email profile');

function createRayorConnectButton() {
  const container = document.getElementById('btn-container');
  const btn = document.createElement('button');
  btn.id = 'rayorconnect-btn';

  btn.innerHTML = `
    <img src="https://connect.rayor.fr/logo.svg" alt="RayorConnect Logo" />
    Connecter avec RayorConnect
  `;

  btn.onclick = () => {
    const url = \`https://connect.rayor.fr/?client_id=\${clientId}&redirect_uri=\${redirectUri}&scope=\${scope}\`;
    window.location.href = url;
  };

  container.appendChild(btn);
}

window.onload = createRayorConnectButton;
</script>

2. Expliquer la redirection (callback)

Après connexion, RayorConnect redirige vers votre URL redirect_uri avec un paramètre token. Vous devez envoyer ce token à RayorConnect pour récupérer les informations utilisateur.

Exemple simple de callback en JavaScript :

<script>
async function getUserInfo(token) {
  const response = await fetch('https://connect.rayor.fr/index.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: 'token=' + encodeURIComponent(token)
  });

  if (!response.ok) {
    alert('Erreur lors de la récupération des infos utilisateur');
    return;
  }

  const data = await response.json();
  console.log('Utilisateur connecté :', data);

  document.getElementById('user-info').textContent =
    `Connecté : ${data.email} (RayorID : ${data.rayor_id})`;
}

window.onload = () => {
  const params = new URLSearchParams(window.location.search);
  const token = params.get('token');
  if (token) {
    getUserInfo(token);
  }
};
</script>

<div id="user-info">Utilisateur non connecté</div>

3. Notes importantes