Comment intégrer la connexion GitHub : un guide en quatre étapes
Jan 03, 2025 pm 04:40 PMProblè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
Accédez aux paramètres GitHub : accédez aux paramètres du développeur GitHub.
Applications OAuth : cliquez sur Applications OAuth dans la barre latérale.
-
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.
Copiez l'ID client : Une fois créé, GitHub fournira un ID client.
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
- Enregistrez votre application sur GitHub pour obtenir un ID client et un Secret client.
- Ajoutez un bouton de connexion GitHub à votre interface.
- Redirigez les utilisateurs vers la page OAuth de GitHub pour se connecter.
- Gérez la redirection avec un code d'autorisation.
- Échangez le code contre un jeton d'accès sur votre backend.
- 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

Remplacer les caractères de chaîne en javascript

jQuery Vérifiez si la date est valide

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

10 vaut la peine de vérifier les plugins jQuery

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

jQuery Ajouter une barre de défilement à div

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