Aller au contenu principal

Se connecter à un service OAuth

Certains services, comme Google, GitHub ou Spotify, ne partagent les données d’une personne qu’une fois qu’elle s’est connectée et a donné son accord. Une intégration gère cette connexion, avec OAuth 2.0. La personne qui ajoute votre widget connecte son compte une seule fois, et votre widget obtient un jeton d’accès pour appeler le service en son nom.

1. Enregistrer votre widget auprès du service​

Dans les paramètres développeur du service, créez une application OAuth. Lorsque le service vous demande une URI de redirection, parfois appelée URL de rappel, saisissez exactement :

https://console.blotch.app/oauth/callback

Le service vous fournit alors un ID client et un secret client, et sa documentation indique son point de terminaison d’autorisation, son point de terminaison de jeton et ses portées.

2. Ajouter l’intégration​

  1. Dans le Studio de widgets, choisissez Fichier > Entrées, puis l’onglet Intégrations.

  2. Sous Nouvelle intégration, remplissez :

    ChampCe qu’il faut saisir
    Nom de l’intégrationUn nom pour l’intégration, par exemple github. Vous l’utilisez dans votre code.
    ID clientFourni par le service.
    Secret clientFourni par le service. Il est stocké de façon sécurisée et n’est plus jamais affiché.
    Point de terminaison d’autorisationL’adresse de connexion du service, qui se termine souvent par /authorize.
    Point de terminaison de jetonL’adresse qui délivre les jetons, qui se termine souvent par /token.
    PortéesLes autorisations dont votre widget a besoin, séparées comme le service l’attend : par des espaces, des virgules ou des +.

  3. Choisissez Créer une intégration.

L’onglet Intégrations de la boîte de dialogue Entrées, avec le formulaire d’une nouvelle intégration : son nom, l’ID et le secret client, les points de terminaison et les portéesL’onglet Intégrations de la boîte de dialogue Entrées, avec le formulaire d’une nouvelle intégration : son nom, l’ID et le secret client, les points de terminaison et les portées

Le formulaire affiche aussi l’URI de redirection à enregistrer, avec un bouton pour la copier. Si le service donne des noms inhabituels à ses paramètres OAuth, modifiez-les sous Avancé.

Pour essayer l’intégration vous-même, choisissez Connecter, puis connectez-vous. Son état passe à Connecté.

3. L’utiliser dans votre code​

Placez dans RequireIntegration la partie de votre widget qui a besoin du compte. À l’intérieur, useIntegration vous donne le jeton d’accès :

import { RequireIntegration, useIntegration } from "~lib/integrations";
import { Paragraph } from "~lib/typography";
import { useFetch } from "~lib/use-fetch";

type GitHubUser = {
  readonly login: string;
};

const Profile = () => {
  const { accessToken } = useIntegration();

  const { data } = useFetch<GitHubUser>("https://api.github.com/user", {
    headers: { Authorization: `Bearer ${accessToken}` },
  });

  return <Paragraph>Signed in as {data.login}</Paragraph>;
};

export const Widget = () => (
  <RequireIntegration name="github">
    <Profile />
  </RequireIntegration>
);

Tant que la personne n’a pas connecté son compte, RequireIntegration affiche une invitation à le connecter à la place de son contenu. Blotch renouvelle les jetons quand ils expirent.

Consultez Intégrations dans la référence pour connaître tout ce que renvoie useIntegration.

Ajouter une intégration plus tard​

Chacun est invité à connecter une nouvelle intégration au moment de la mise à niveau : en ajouter une à un widget déjà publié fait donc de la version suivante une version majeure. Consultez Numéros de version.

Les modifications des paramètres d’une intégration existante s’appliquent tout de suite, sans publier.