So integrieren Sie die GitHub-Anmeldung: Eine Anleitung in vier Schritten

Problem

Erinnern Sie sich an die Tage, als Benutzer für jede App eindeutige Benutzernamen und Passwörter benötigten? Es ist Zeit, weiterzumachen.

Lassen Sie uns die Anmeldung bei Ihrer App einfacher machen, indem wir GitHub Sign-In integrieren, eine großartige Wahl für Entwickler und technisch versierte Benutzer.

Lösung

GitHub OAuth ermöglicht Ihnen die nahtlose Authentifizierung von Benutzern und den Zugriff auf deren öffentliches Profil oder zusätzliche Daten über die GitHub-API.

Lassen Sie uns dies in überschaubare Schritte für Ihr Frontend und Backend aufteilen.

---

Schritt 1: Registrieren Sie Ihre App auf GitHub

1. Gehen Sie zu den GitHub-Einstellungen: Navigieren Sie zu den GitHub-Entwicklereinstellungen.

2. OAuth-Apps: Klicken Sie in der Seitenleiste auf OAuth-Apps.

1. Registrieren Sie eine neue OAuth-App:
   • Homepage-URL: Verwenden Sie http://localhost:3000 (oder die lokale URL Ihrer App).
   • Autorisierungs-Rückruf-URL: Verwenden Sie http://localhost:3000 (oder die Bereitstellungs-URL, in die Sie GitHub Sign-In integrieren möchten). Sie können diese später aktualisieren.

1. Kopieren Sie die Client-ID: Nach der Erstellung stellt GitHub eine Client-ID bereit.

2. Erstellen Sie ein Client-Geheimnis: Generieren Sie ein Client-Geheimnis, das für Back-End-Vorgänge wie den Austausch von Tokens gegen Benutzerdaten erforderlich ist.

---

Schritt 2: Frontend-Implementierung

Fügen Sie eine GitHub-Anmeldeschaltfläche hinzu

Verwenden Sie den folgenden HTML- und CSS-Code, um eine GitHub-Anmeldeschaltfläche anzuzeigen:

<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;
}

Behandeln Sie den Klick auf die Anmeldeschaltfläche

Verwenden Sie JavaScript, um den Benutzer zur Autorisierungsseite von GitHub umzuleiten:

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;
};

Ersetzen Sie GITHUB_CLIENT_ID und REDIRECT_URI durch Ihre Werte.

---

Schritt 3: Umgang mit GitHubs Redirect

GitHub leitet mit einem ?code= zurück zu Ihrer App weiter. in der URL. Verwenden Sie diesen Code, um ihn gegen ein Zugriffstoken einzutauschen.

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);
}, []);

Dadurch wird der Code an Ihr Backend gesendet, um ihn sicher gegen ein Zugriffstoken einzutauschen.

---

Schritt 4: Backend-Implementierung

Tauschen Sie den Autorisierungscode für das Zugriffstoken aus

Verwenden Sie den OAuth-Token-Endpunkt von 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;

Ersetzen Sie GITHUB_CLIENT_ID und GITHUB_SECRET_ID durch die Werte aus Schritt 1.

Benutzerdaten abrufen

Rufen Sie mit dem Zugriffstoken die Benutzer-API von GitHub auf, um Benutzerinformationen abzurufen:

<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;
}

Verwenden Sie diese Daten, um einen Benutzer in Ihrer Datenbank zu erstellen oder zu aktualisieren.

---

TL;DR

1. Registrieren Sie Ihre App auf GitHub, um eine Client-ID und ein Client-Geheimnis zu erhalten.
2. Fügen Sie Ihrem Frontend eine GitHub-Anmeldeschaltfläche hinzu.
3. Leiten Sie Benutzer zur Anmeldung auf die OAuth-Seite von GitHub weiter.
4. Behandeln Sie die Weiterleitung mit einem Autorisierungscode.
5. Tauschen Sie den Code gegen ein Zugriffstoken in Ihrem Backend.
6. Verwenden Sie das Token, um Benutzerdaten von der GitHub-API abzurufen.

---

Bonus: LiveAPI macht Ihr Leben einfacher

Ich arbeite an einem Tool namens LiveAPI, das eine sichere, schöne API-Dokumentation direkt aus Ihrer Codebasis generiert. Bonus: Sie können damit APIs ausführen und Anforderungsausschnitte in jeder Sprache generieren!

Probieren Sie es aus und sparen Sie Zeit bei der Dokumentation, während Sie sich auf Ihre App konzentrieren können. Viel Spaß beim Codieren!