Maison interface Web js tutoriel Comment intégrer la connexion GitHub : un guide en quatre étapes

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

Jan 03, 2025 pm 04:40 PM

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.

How To Integrate GitHub Sign-In: A Four Step Guide

  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.

How To Integrate GitHub Sign-In: A Four Step Guide

  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.

How To Integrate GitHub Sign-In: A Four Step Guide


É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;
}
Copier après la connexion

Gérez le clic sur le bouton de connexion

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

const handleGithubLogin = () =&gt; {
  const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&amp;redirect_uri=${REDIRECT_URI}&amp;scope=read:user`;
  window.location.href = githubAuthUrl;
};
Copier après la connexion

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(() =&gt; {
  const params = new URLSearchParams(window.location.search);
  const code = params.get("code");

  if (!code) return;

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

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}&amp;client_secret=${GITHUB_SECRET_ID}&amp;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;
Copier après la connexion

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 :

&lt;div&gt;





<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;
}
Copier après la connexion

How To Integrate GitHub Sign-In: A Four Step Guide

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 !

How To Integrate GitHub Sign-In: A Four Step Guide

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Musée à deux points: toutes les expositions et où les trouver
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

jQuery Vérifiez si la date est valide jQuery Vérifiez si la date est valide Mar 01, 2025 am 08:51 AM

jQuery Vérifiez si la date est valide

jQuery obtient un rembourrage / marge d'élément jQuery obtient un rembourrage / marge d'élément Mar 01, 2025 am 08:53 AM

jQuery obtient un rembourrage / marge d'élément

10 onglets jQuery Accordion 10 onglets jQuery Accordion Mar 01, 2025 am 01:34 AM

10 onglets jQuery Accordion

10 vaut la peine de vérifier les plugins jQuery 10 vaut la peine de vérifier les plugins jQuery Mar 01, 2025 am 01:29 AM

10 vaut la peine de vérifier les plugins jQuery

Http débogage avec le nœud et le http-console Http débogage avec le nœud et le http-console Mar 01, 2025 am 01:37 AM

Http débogage avec le nœud et le http-console

jQuery Ajouter une barre de défilement à div jQuery Ajouter une barre de défilement à div Mar 01, 2025 am 01:30 AM

jQuery Ajouter une barre de défilement à div

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

See all articles