Comment intégrer la connexion GitHub : un guide en quatre étapes

Problème

Vous vous souvenez de l'époque où les utilisateurs avaient besoin de noms d'utilisateur et de mots de passe uniques pour chaque application ? Il est temps de passer à autre chose.

Simplifions la connexion à votre application en intégrant GitHub Sign-In, un excellent choix pour les développeurs et les utilisateurs férus de technologie.

Solution

GitHub OAuth vous permet d'authentifier les utilisateurs de manière transparente et d'accéder à leur profil public ou à des données supplémentaires via l'API de GitHub.

Décomposons cela en étapes gérables pour votre frontend et votre backend.

---

Étape 1 : enregistrement de votre application sur GitHub

1. Accédez aux paramètres GitHub : accédez aux paramètres du développeur GitHub.

2. Applications OAuth : cliquez sur Applications OAuth dans la barre latérale.

1. Enregistrez une nouvelle application OAuth :
   • URL de la page d'accueil : utilisez http://localhost:3000 (ou l'URL locale de votre application).
   • URL de rappel d'autorisation : utilisez http://localhost:3000 (ou l'URL de déploiement où vous prévoyez d'intégrer la connexion GitHub). Vous pourrez les mettre à jour plus tard.

1. Copiez l'ID client : Une fois créé, GitHub fournira un ID client.

2. Créer un secret client : générez un Secret client qui sera requis pour les opérations backend, telles que l'échange de jetons contre des données utilisateur.

---

Étape 2 : implémentation frontale

Ajouter un bouton de connexion GitHub

Utilisez le HTML et le CSS suivants pour afficher un bouton de connexion GitHub :

<div>





<pre class="brush:php;toolbar:false">.github-signin-container {
  background-color: #000;
  transition: background-color 0.3s ease;
  border-radius: 6px;
  border: none;
}

.github-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 100%;
}

.github-signin-btn:hover {
  background-color: #333;
}

.github-signin-btn .github-icon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.github-signin-btn span {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

Gérez le clic sur le bouton de connexion

Utilisez JavaScript pour rediriger l'utilisateur vers la page d'autorisation de GitHub :

const handleGithubLogin = () => {
  const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=read:user`;
  window.location.href = githubAuthUrl;
};

Remplacez GITHUB_CLIENT_ID et REDIRECT_URI par vos valeurs.

---

Étape 3 : Gérer la redirection de GitHub

GitHub sera redirigé vers votre application avec un ?code=<AUTH_CODE> dans l'URL. Utilisez ce code pour échanger un jeton d'accès.

useEffect(() => {
  const params = new URLSearchParams(window.location.search);
  const code = params.get("code");

  if (!code) return;

  const target = `https://backend.com/external-signup?app=${appName}&accessToken=${code}&provider=github`;
  callBackendAPI("GET", target);
}, []);

Cela envoie le code à votre backend pour l'échanger en toute sécurité contre un jeton d'accès.

---

Étape 4 : implémentation back-end

Code d'autorisation d'échange pour le jeton d'accès

Utilisez le point de terminaison du jeton OAuth de GitHub :

const GITHUB_ACCESS_TOKEN_URL = 'https://github.com/login/oauth/access_token';

const url = `${GITHUB_ACCESS_TOKEN_URL}?client_id=${GITHUB_CLIENT_ID}&client_secret=${GITHUB_SECRET_ID}&code=${request.body.code}`;

const response = await fetch(url, {
  method: "GET",
  headers: {
    Accept: "application/json",
    "Accept-Encoding": "application/json",
  },
});

const githubUserData = await response.json();
const accessToken = githubUserData.access_token;

Remplacez GITHUB_CLIENT_ID et GITHUB_SECRET_ID par les valeurs de l'étape 1.

Récupérer les données utilisateur

Avec le jeton d'accès, appelez l'API utilisateur de GitHub pour récupérer les informations utilisateur :

<div>





<pre class="brush:php;toolbar:false">.github-signin-container {
  background-color: #000;
  transition: background-color 0.3s ease;
  border-radius: 6px;
  border: none;
}

.github-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 100%;
}

.github-signin-btn:hover {
  background-color: #333;
}

.github-signin-btn .github-icon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.github-signin-btn span {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

Utilisez ces données pour créer ou mettre à jour un utilisateur dans votre base de données.

---

TL;DR

1. Enregistrez votre application sur GitHub pour obtenir un ID client et un Secret client.
2. Ajoutez un bouton de connexion GitHub à votre interface.
3. Redirigez les utilisateurs vers la page OAuth de GitHub pour se connecter.
4. Gérez la redirection avec un code d'autorisation.
5. Échangez le code contre un jeton d'accès sur votre backend.
6. Utilisez le jeton pour récupérer les données utilisateur de l'API de GitHub.

---

Bonus : LiveAPI vous facilite la vie

Je travaille sur un outil appelé LiveAPI qui génère une belle et sécurisée documentation API directement à partir de votre base de code. Bonus : il vous permet d'exécuter des API et de générer des extraits de requête dans n'importe quelle langue !

Essayez-le et gagnez du temps sur la documentation tout en vous concentrant sur votre application. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!