Aller au contenu principal

Ajoutez l’authentification à votre application React

Ce guide vous montrera comment intégrer Logto dans votre application React.

astuce

Prérequis​

Installation​

Installez le SDK Logto via votre gestionnaire de paquets préféré :

npm i @logto/react

Intégration​

Initialiser le fournisseur Logto​

Importez et utilisez LogtoProvider pour fournir un contexte Logto à votre application :

App.tsx
import { LogtoProvider, LogtoConfig } from '@logto/react';

const config: LogtoConfig = {
  endpoint: '<your-logto-endpoint>', // Par exemple, http://localhost:3001
  appId: '<your-application-id>',
};

const App = () => (
  <LogtoProvider config={config}>
    <YourAppContent />
  </LogtoProvider>
);

Configurer les URIs de redirection​

Avant de plonger dans les détails, voici un aperçu rapide de l'Expérience utilisateur. Le processus de connexion peut être simplifié comme suit :

  1. Votre application lance la méthode de connexion.
  2. L'utilisateur est redirigé vers la page de connexion Logto. Pour les applications natives, le navigateur système est ouvert.
  3. L'utilisateur se connecte et est redirigé vers votre application (configurée comme l'URI de redirection).
Concernant la connexion basée sur la redirection
  1. Ce processus d'authentification (Authentication) suit le protocole OpenID Connect (OIDC), et Logto applique des mesures de sécurité strictes pour protéger la connexion utilisateur.
  2. Si vous avez plusieurs applications, vous pouvez utiliser le même fournisseur d’identité (Logto). Une fois que l'utilisateur se connecte à une application, Logto complétera automatiquement le processus de connexion lorsque l'utilisateur accède à une autre application.

Pour en savoir plus sur la logique et les avantages de la connexion basée sur la redirection, consultez Expérience de connexion Logto expliquée.

remarque

Dans les extraits de code suivants, nous supposons que votre application fonctionne sur http://localhost:3000/.

Configurer les URIs de redirection​

Passez à la page des détails de l'application de Logto Console. Ajoutez une URI de redirection http://localhost:3000/callback.

URI de redirection dans Logto Console

Tout comme pour la connexion, les utilisateurs doivent être redirigés vers Logto pour se déconnecter de la session partagée. Une fois terminé, il serait idéal de rediriger l'utilisateur vers votre site web. Par exemple, ajoutez http://localhost:3000/ comme section d'URI de redirection après déconnexion.

Ensuite, cliquez sur "Enregistrer" pour sauvegarder les modifications.

Gérer la redirection​

Étant donné que nous utilisons http://localhost:3000/callback comme URI de redirection, nous devons maintenant le gérer correctement.

Commençons par créer une page de rappel :

pages/Callback/index.tsx
import { useHandleSignInCallback } from '@logto/react';

const Callback = () => {
  const { isLoading } = useHandleSignInCallback(() => {
    // Faites quelque chose une fois terminé, par exemple rediriger vers la page d'accueil
  });

  // Lorsque c'est en cours de traitement
  if (isLoading) {
    return <div>Redirection...</div>;
  }

  return null;
};

Enfin, insérez le code ci-dessous pour créer une route /callback qui ne nécessite PAS d'authentification :

App.tsx
// En supposant react-router
<Route path="/callback" element={<Callback />} />

Implémenter la connexion et la déconnexion​

Nous fournissons deux hooks useHandleSignInCallback() et useLogto() qui peuvent vous aider à gérer facilement le flux d'authentification (Authentication).

remarque

Avant d'appeler .signIn(), assurez-vous d'avoir correctement configuré l'URI de redirection dans la console d'administration.

pages/Home/index.tsx
import { useLogto } from '@logto/react';

const Home = () => {
  const { signIn, signOut, isAuthenticated } = useLogto();

  return isAuthenticated ? (
    <button onClick={signOut}>Sign Out</button>
  ) : (
    <button onClick={() => signIn('http://localhost:3000/callback')}>Sign In</button>
  );
};

Appeler .signOut() effacera toutes les données Logto en mémoire et dans le localStorage si elles existent.

Point de contrôle : Testez votre application​

Maintenant, vous pouvez tester votre application :

  1. Exécutez votre application, vous verrez le bouton de connexion.
  2. Cliquez sur le bouton de connexion, le SDK initiera le processus de connexion et vous redirigera vers la page de connexion Logto.
  3. Après vous être connecté, vous serez redirigé vers votre application et verrez le bouton de déconnexion.
  4. Cliquez sur le bouton de déconnexion pour effacer le stockage local et vous déconnecter.

Obtenir des informations sur l'utilisateur​

Afficher les informations de l'utilisateur​

Pour afficher les informations de l'utilisateur, vous pouvez utiliser la méthode getIdTokenClaims(). Par exemple, sur votre page d'accueil :

pages/Home/index.tsx
import { useLogto, type IdTokenClaims } from '@logto/react';
import { useEffect, useState } from 'react';

const Home = () => {
  const { isAuthenticated, getIdTokenClaims } = useLogto();
  const [user, setUser] = useState<IdTokenClaims>();

  useEffect(() => {
    (async () => {
      if (isAuthenticated) {
        const claims = await getIdTokenClaims();
        setUser(claims);
      }
    })();
  }, [getIdTokenClaims, isAuthenticated]);

  return (
    // ...
    {isAuthenticated && user && (
      <table>
        <thead>
          <tr>
            <th>Nom</th>
            <th>Valeur</th>
          </tr>
        </thead>
        <tbody>
          {Object.entries(user).map(([key, value]) => (
            <tr key={key}>
              <td>{key}</td>
              <td>{typeof value === 'string' ? value : JSON.stringify(value)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    )}
  );
}

Demander des revendications supplémentaires​

Il se peut que certaines informations utilisateur soient manquantes dans l'objet retourné par getIdTokenClaims(). Cela est dû au fait que OAuth 2.0 et OpenID Connect (OIDC) sont conçus pour suivre le principe du moindre privilège (PoLP), et Logto est construit sur ces normes.

Par défaut, des revendications limitées sont retournées. Si vous avez besoin de plus d'informations, vous pouvez demander des portées supplémentaires pour accéder à plus de revendications.

info

Une "revendication" est une assertion faite à propos d'un sujet ; une "portée" est un groupe de revendications. Dans le cas actuel, une revendication est une information sur l'utilisateur.

Voici un exemple non normatif de la relation portée - revendication :

astuce

La revendication "sub" signifie "sujet", qui est l'identifiant unique de l'utilisateur (c'est-à-dire l'ID utilisateur).

Le SDK Logto demandera toujours trois portées : openid, profile et offline_access.

Pour demander des portées supplémentaires, vous pouvez configurer les configurations du fournisseur Logto :

App.tsx
import { LogtoConfig, UserScope } from '@logto/react';

const config: LogtoConfig = {
  // ...other configs
  scopes: [
    UserScope.Email,
    UserScope.Phone,
    UserScope.CustomData,
    UserScope.Identities,
    UserScope.Organizations,
  ],
};

Ensuite, vous pouvez accéder aux revendications supplémentaires dans la valeur de retour de getIdTokenClaims() :

const claims = await getIdTokenClaims();
// Maintenant, vous pouvez accéder aux revendications supplémentaires `claims.email`, `claims.phone`, etc.

Revendications nécessitant des requêtes réseau​

Pour éviter de surcharger le jeton d’identifiant (ID token), certaines revendications nécessitent des requêtes réseau pour être récupérées. Par exemple, la revendication custom_data n'est pas incluse dans l'objet utilisateur même si elle est demandée dans les portées. Pour accéder à ces revendications, vous pouvez utiliser la méthode fetchUserInfo() :

const { fetchUserInfo } = useLogto();

const userInfo = await fetchUserInfo();

// Maintenant, vous pouvez accéder à la revendication `userInfo.custom_data`
Cette méthode récupérera les informations de l'utilisateur en faisant une requête à l' point de terminaison userinfo. Pour en savoir plus sur les portées et revendications disponibles, consultez la section Portées et revendications.

Portées et revendications​

Logto utilise les conventions de portées et revendications OIDC pour définir les Portées et Revendications pour récupérer les informations utilisateur à partir du Jeton d’identifiant et du point de terminaison OIDC userinfo. Les termes "Portée" et "Revendication" proviennent des spécifications OAuth 2.0 et OpenID Connect (OIDC).

Voici la liste des Portées (Scopes) prises en charge et les Revendications (Claims) correspondantes :

openid

Nom de la revendicationTypeDescriptionBesoin d'userinfo ?
substringL'identifiant unique de l'utilisateurNon

profile

Nom de la revendicationTypeDescriptionBesoin d'userinfo ?
namestringLe nom complet de l'utilisateurNon
usernamestringLe nom d'utilisateur de l'utilisateurNon
picturestringURL de la photo de profil de l'utilisateur final. Cette URL DOIT faire référence à un fichier image (par exemple, un fichier image PNG, JPEG ou GIF), plutôt qu'à une page Web contenant une image. Notez que cette URL DOIT spécifiquement référencer une photo de profil de l'utilisateur final adaptée à l'affichage lors de la description de l'utilisateur final, plutôt qu'une photo arbitraire prise par l'utilisateur final.Non
created_atnumberHeure à laquelle l'utilisateur final a été créé. Le temps est représenté comme le nombre de millisecondes depuis l'époque Unix (1970-01-01T00:00:00Z).Non
updated_atnumberHeure à laquelle les informations de l'utilisateur final ont été mises à jour pour la dernière fois. Le temps est représenté comme le nombre de millisecondes depuis l'époque Unix (1970-01-01T00:00:00Z).Non

D'autres revendications standard incluent family_name, given_name, middle_name, nickname, preferred_username, profile, website, gender, birthdate, zoneinfo, et locale seront également incluses dans la portée profile sans avoir besoin de demander le point de terminaison userinfo. Une différence par rapport aux revendications ci-dessus est que ces revendications ne seront renvoyées que lorsque leurs valeurs ne sont pas vides, tandis que les revendications ci-dessus renverront null si les valeurs sont vides.

remarque

Contrairement aux revendications standard, les revendications created_at et updated_at utilisent des millisecondes au lieu de secondes.

email

Nom de la revendicationTypeDescriptionBesoin d'userinfo ?
emailstringL'adresse e-mail de l'utilisateurNon
email_verifiedbooleanSi l'adresse e-mail a été vérifiéeNon

phone

Nom de la revendicationTypeDescriptionBesoin d'userinfo ?
phone_numberstringLe numéro de téléphone de l'utilisateurNon
phone_number_verifiedbooleanSi le numéro de téléphone a été vérifiéNon

address

Veuillez vous référer à OpenID Connect Core 1.0 pour les détails de la revendication d'adresse.

custom_data

Nom de la revendicationTypeDescriptionBesoin d'userinfo ?
custom_dataobjectLes données personnalisées de l'utilisateurOui

identities

Nom de la revendicationTypeDescriptionBesoin d'userinfo ?
identitiesobjectLes identités liées de l'utilisateurOui
sso_identitiesarrayLes identités SSO liées de l'utilisateurOui

urn:logto:scope:organizations

Nom de la revendicationTypeDescriptionBesoin d'userinfo ?
organizationsstring[]Les identifiants d'organisation auxquels l'utilisateur appartientNon
organization_dataobject[]Les données d'organisation auxquelles l'utilisateur appartientOui

urn:logto:scope:organization_roles

Nom de la revendicationTypeDescriptionBesoin d'userinfo ?
organization_rolesstring[]Les rôles d'organisation auxquels l'utilisateur appartient avec le format <organization_id>:<role_name>Non

En considérant la performance et la taille des données, si "Besoin d'userinfo ?" est "Oui", cela signifie que la revendication n'apparaîtra pas dans le Jeton d’identifiant (ID token), mais sera renvoyée dans la réponse du point de terminaison userinfo.

Ressources API​

Nous vous recommandons de lire d'abord 🔐 Contrôle d’accès basé sur les rôles (RBAC) pour comprendre les concepts de base de Logto RBAC et comment configurer correctement les ressources API.

Configurer le client Logto​

Une fois que vous avez configuré les ressources API, vous pouvez les ajouter lors de la configuration de Logto dans votre application :

App.tsx
import { LogtoConfig } from '@logto/react';

const config: LogtoConfig = {
  // ...other configs
  resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'], // Ajouter des ressources API
};

Chaque ressource API a ses propres permissions (portées).

Par exemple, la ressource https://shopping.your-app.com/api a les permissions shopping:read et shopping:write, et la ressource https://store.your-app.com/api a les permissions store:read et store:write.

Pour demander ces permissions, vous pouvez les ajouter lors de la configuration de Logto dans votre application :

App.tsx
import { LogtoConfig } from '@logto/react';

const config: LogtoConfig = {
  // ...other configs
  scopes: ['shopping:read', 'shopping:write', 'store:read', 'store:write'],
  resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
};

Vous pouvez remarquer que les portées sont définies séparément des ressources API. Cela est dû au fait que les Indicateurs de ressource pour OAuth 2.0 spécifient que les portées finales pour la requête seront le produit cartésien de toutes les portées de tous les services cibles.

Ainsi, dans le cas ci-dessus, les portées peuvent être simplifiées à partir de la définition dans Logto, les deux ressources API peuvent avoir les portées read et write sans le préfixe. Ensuite, dans la configuration de Logto :

App.tsx
import { LogtoConfig } from '@logto/react';

const config: LogtoConfig = {
  // ...other configs
  scopes: ['read', 'write'],
  resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
};

Pour chaque ressource API, il demandera à la fois les portées read et write.

remarque

Il est acceptable de demander des portées qui ne sont pas définies dans les ressources API. Par exemple, vous pouvez demander la portée email même si les ressources API n'ont pas la portée email disponible. Les portées non disponibles seront ignorées en toute sécurité.

Après une connexion réussie, Logto émettra les portées appropriées aux ressources API en fonction des rôles de l'utilisateur.

Récupérer un jeton d’accès pour la ressource API​

Pour récupérer le jeton d’accès pour une ressource API spécifique, vous pouvez utiliser la méthode getAccessToken :

pages/Home/index.tsx
import { useLogto } from '@logto/react';

const Home = () => {
  const { isAuthenticated, getAccessToken } = useLogto();
  const [accessToken, setAccessToken] = useState('');

  useEffect(() => {
    (async () => {
      if (isAuthenticated) {
        const token = await getAccessToken('https://shopping.your-app.com/api');
        setAccessToken(token);
      }
    })();
  }, [isAuthenticated, getAccessToken]);

  return <p>{{ accessToken }}</p>;
};

Cette méthode renverra un jeton d’accès JWT qui peut être utilisé pour accéder à la ressource API lorsque l’utilisateur a les Permissions associées. Si le jeton d’accès mis en cache actuel a expiré, cette méthode essaiera automatiquement d’utiliser un jeton de rafraîchissement pour obtenir un nouveau jeton d’accès.

Récupérer des jetons d’organisation​

Si l'Organisation est nouvelle pour vous, veuillez lire 🏢 Organisations (Multi-tenancy) pour commencer.

Vous devez ajouter la portée UserScope.Organisations lors de la configuration du client Logto :

App.tsx
import { LogtoConfig, UserScope } from '@logto/react';

const config: LogtoConfig = {
  // ...other configs
  scopes: [UserScope.Organisations],
};

Une fois l'utilisateur connecté, vous pouvez récupérer le jeton d’organisation pour l'utilisateur :

pages/Organizations/index.tsx
import { useLogto } from '@logto/react';
import { useEffect, useState } from 'react';

const Organizations = () => {
  const { isAuthenticated, getOrganizationToken, getIdTokenClaims } = useLogto();
  const [organizationIds, setOrganizationIds] = useState<string[]>();

  useEffect(() => {
    (async () => {
      if (!isAuthenticated) {
        return;
      }
      const claims = await getIdTokenClaims();

      console.log('Revendications du jeton d’identifiant', claims);
      setOrganizationIds(claims?.organizations);
    })();
  }, [isAuthenticated, getIdTokenClaims]);

  return (
    <section>
      <ul>
        {organizationIds?.map((organizationId) => {
          return (
            <li key={organizationId}>
              <span>{organizationId}</span>
              <button
                type="button"
                onClick={async () => {
                  console.log('jeton brut', await getOrganizationToken(organizationId));
                }}
              >
                récupérer le jeton (voir la console)
              </button>
            </li>
          );
        })}
      </ul>
    </section>
  );
};

export default Organizations;

Attacher le jeton d’accès aux en-têtes de requête​

Placez le jeton dans le champ Authorization des en-têtes HTTP avec le format Bearer (Bearer YOUR_TOKEN), et vous êtes prêt à partir.

remarque

Le flux d'intégration du jeton Bearer peut varier en fonction du framework ou du demandeur que vous utilisez. Choisissez votre propre méthode pour appliquer l'en-tête de requête Authorization.

Lectures complémentaires​

Flux utilisateur final : flux d'authentification, flux de compte et flux d'organisation Configurer les connecteurs Protéger votre API