Mit JavaScript über GitHub authentifizieren

Sie können Ihre Nutzer mit ihren GitHub-Konten bei Firebase authentifizieren, indem Sie die GitHub-Authentifizierung in Ihre App einbinden. Sie können die GitHub-Authentifizierung entweder mit dem Firebase SDK für den Anmeldevorgang oder manuell für den GitHub OAuth 2.0-Vorgang einbinden und das resultierende Zugriffstoken an Firebase übergeben.

Hinweis

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
  2. Öffnen Sie in der Firebase Console den Bereich Auth.
  3. Aktivieren Sie auf dem Tab Anmeldemethode den GitHub-Anbieter.
  4. Fügen Sie die Client-ID und das Client-Secret aus der Entwicklerkonsole des Anbieters zur Anbieterkonfiguration hinzu:
    1. Registrieren Sie Ihre App als Entwickleranwendung auf GitHub und rufen Sie die OAuth 2.0-Client-ID und das Client-Secret Ihrer App ab.
    2. Prüfen Sie, ob der OAuth-Weiterleitungs-URI von Firebase (z.B. my-app-12345.firebaseapp.com/__/auth/handler) die als Callback-URL für die Autorisierung festgelegt ist. Wählen Sie dazu in den App-Einstellungen auf Ihrem Konfiguration der GitHub-Anwendung.
  5. Klicken Sie auf Speichern.

Anmeldevorgang mit dem Firebase SDK abwickeln

Wenn Sie eine Webanwendung erstellen, ist es am einfachsten, Ihre Nutzer zu authentifizieren. mit Firebase und ihren GitHub-Konten ist die Anmeldung mit das Firebase JavaScript SDK. (Wenn Sie einen Nutzer in Node.js authentifizieren möchten oder einer anderen nicht browsergestützten Umgebung, müssen Sie den Anmeldevorgang manuell durchführen.

So verwalten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

  1. Erstellen Sie eine Instanz des GitHub-Anbieter-Objekts:
    WebWeb
    import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();
    auth_github_provider_create.js
     
    var provider = new firebase.auth.GithubAuthProvider();
    github.js
  2. Optional: Geben Sie zusätzliche OAuth 2.0-Bereiche an, die Sie Authentifizierungsanbieter beantragen möchten. Um einen Bereich hinzuzufügen, rufen Sie addScope Beispiel:
    WebWeb
    provider.addScope('repo');
    auth_github_provider_scopes.js
     
    provider.addScope('repo');
    github.js
    Weitere Informationen finden Sie in der Dokumentation des Authentifizierungsanbieters.
  3. Optional: Zusätzliche benutzerdefinierte OAuth-Anbieterparameter angeben die Sie mit der OAuth-Anfrage senden möchten. Um einen benutzerdefinierten Parameter hinzuzufügen, rufen Sie setCustomParameters beim initialisierten Anbieter mit einem Objekt, das den Schlüssel enthält OAuth-Anbieter und im entsprechenden Wert angegeben. Beispiel:
    WebWeb
    provider.setCustomParameters({
  'allow_signup': 'false'
});
    auth_github_provider_params.js
     
    provider.setCustomParameters({
  'allow_signup': 'false'
});
    github.js
    Reservierte erforderliche OAuth-Parameter sind nicht zulässig und werden ignoriert. Siehe Authentifizierungsanbieter-Referenz für weitere Informationen.
  4. Authentifizieren Sie sich mit Firebase über das GitHub-Anbieterobjekt. Sie können Nutzer auffordern, sich mit ihren GitHub-Konten anzumelden. Dazu können Sie entweder ein Pop-up-Fenster öffnen oder zur Anmeldeseite weiterleiten. Die Weiterleitungsmethode wird auf Mobilgeräten bevorzugt.
    • Rufe signInWithPopup auf, um dich über ein Pop-up-Fenster anzumelden:
      WebWeb
      import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    const credential = GithubAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
    // ...
  });
      auth_github_signin_popup.js
       
      firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    var token = credential.accessToken;

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });
      github.js
      Beachten Sie außerdem, dass Sie das OAuth-Token des GitHub-Anbieters abrufen können, mit dem mithilfe der GitHub-APIs zusätzliche Daten abgerufen werden können.

      Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes findest du in den Auth-Referenzdokumenten.

    • Rufen Sie signInWithRedirect auf, um sich anzumelden und zur Anmeldeseite weiterzuleiten: Beachten Sie die Best Practices für die Verwendung von „signInWithRedirect“.
      WebWeb
      import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js
       
      firebase.auth().signInWithRedirect(provider);
      index.js
      Anschließend können Sie auch das OAuth-Token des GitHub-Anbieters abrufen, indem Sie beim Laden der Seite getRedirectResult aufrufen:
      WebWeb
      import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    const credential = GithubAuthProvider.credentialFromResult(result);
    if (credential) {
      // This gives you a GitHub Access Token. You can use it to access the GitHub API.
      const token = credential.accessToken;
      // ...
    }

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
    // ...
  });
      auth_github_signin_redirect_result.js
       
      firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a GitHub Access Token. You can use it to access the GitHub API.
      var token = credential.accessToken;
      // ...
    }

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });
      github.js
      Hier können Sie auch Fehler erkennen und beheben. Eine Liste der Fehlercodes findest du in den Auth-Referenzdokumenten.

Wenn Sie in der Firebase Console die Einstellung Ein Konto pro E-Mail-Adresse aktiviert haben und ein Nutzer versucht, sich bei einem Anbieter (z. B. GitHub) mit einer E-Mail-Adresse anzumelden, die bereits für den Anbieter eines anderen Firebase-Nutzers (z. B. Google) vorhanden ist, wird der Fehler auth/account-exists-with-different-credential zusammen mit einem AuthCredential-Objekt (GitHub-Zugriffstoken) ausgegeben. Um die Anmeldung beim gewünschten Anbieter abzuschließen, muss sich der Nutzer zuerst beim bestehenden Anbieter (Google) anmelden und dann eine Verknüpfung zum ehemaligen AuthCredential (GitHub-Zugriffstoken) herstellen.

Wenn Sie signInWithPopup verwenden, können Sie auth/account-exists-with-different-credential-Fehler mit Code wie im folgenden Beispiel behandeln:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  GitHubAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using GitHub.
  let result = await signInWithPopup(getAuth(), new GitHubAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending GitHub credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the GitHub credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Weiterleitungsmodus

Dieser Fehler wird im Weiterleitungsmodus ähnlich behandelt, mit dem Unterschied, dass die ausstehenden Anmeldedaten müssen zwischen Seitenweiterleitungen im Cache gespeichert werden (z. B. über Sitzungsspeicher).

Anmeldevorgang manuell ausführen

Sie können sich auch mit einem GitHub-Konto bei Firebase authentifizieren. Dazu müssen Sie den Anmeldevorgang mit den GitHub OAuth 2.0-Endpunkten abwickeln:

  1. Binden Sie die GitHub-Authentifizierung in Ihre Anwendung ein. Folgen Sie dazu der Entwicklerdokumentation. Am Ende des GitHub-Anmeldevorgangs erhalten Sie ein OAuth 2.0-Zugriffstoken.
  2. Wenn du dich in einer Node.js-Anwendung anmelden möchtest, sende das OAuth-Zugriffstoken an die Node.js-Anwendung.
  3. Nachdem sich ein Nutzer erfolgreich mit GitHub angemeldet hat, tauschen Sie das OAuth 2.0-Zugriffstoken gegen Firebase-Anmeldedaten aus:
    WebWeb
    import { GithubAuthProvider } from "firebase/auth";

const credential = GithubAuthProvider.credential(token);
    auth_github_provider_credential.js
     
    var credential = firebase.auth.GithubAuthProvider.credential(token);
    github.js
  4. Authentifizieren Sie sich mit den Firebase-Anmeldedaten bei Firebase:
    WebWeb
    import { getAuth, signInWithCredential } from "firebase/auth";

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // ...
  });
    auth_signin_credential.js
     
    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });
    index.js

In einer Chrome-Erweiterung mit Firebase authentifizieren

Wenn Sie eine App für eine Chrome-Erweiterung erstellen, lesen Sie die Leitfaden zu nicht sichtbaren Dokumenten.

Bei der Projekterstellung stellt Firebase eine eindeutige Subdomain für Ihr Projekt bereit: https://my-app-12345.firebaseapp.com.

Diese wird auch als Weiterleitungsmechanismus für die OAuth-Anmeldung verwendet. Diese Domain muss für alle unterstützten OAuth-Anbieter zulässig sein. Das bedeutet jedoch, dass Nutzer Domain während der Anmeldung in GitHub, bevor Sie zur Anwendung zurückkehren: Weiter zu: https://my-app-12345.firebaseapp.com.

Wenn Sie Ihre Subdomain nicht anzeigen lassen möchten, können Sie eine benutzerdefinierte Domain mit Firebase Hosting einrichten:

  1. Führen Sie die Schritte 1 bis 3 unter Domain für Hosting einrichten aus. Nach der Bestätigung Ihrer Domaininhaberschaft erhalten, stellt Hosting ein SSL-Zertifikat für Ihre benutzerdefinierte Domain bereit.
  2. Fügen Sie Ihre benutzerdefinierte Domain der Liste der autorisierten Domains in der Firebase-Konsole: auth.custom.domain.com.
  3. Setzen Sie in der GitHub-Entwicklerkonsole oder auf der OAuth-Einrichtungsseite die URL der Weiterleitungsseite auf die weiße Liste. auf die Sie in Ihrer benutzerdefinierten Domain zugreifen können: https://auth.custom.domain.com/__/auth/handler
  4. Beim Initialisieren der JavaScript-Bibliothek geben Sie Ihre benutzerdefinierte Domain mit dem Feld authDomain: 
    var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

Nächste Schritte

Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und die mit den Anmeldedaten verknüpft sind, d. h. Nutzername und Passwort, oder Authentifizierungsanbieter-Informationen – also für den Nutzer, mit dem sich der Nutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in allen Apps in Ihrem Projekt zu identifizieren, unabhängig davon, wie er sich anmeldet.

  • Um den Authentifizierungsstatus Ihrer Nutzer in Ihren Apps zu ermitteln, gehen Sie folgendermaßen vor: einen Beobachter für das Auth-Objekt festlegen. Sie können dann die E-Mail-Adresse grundlegende Profilinformationen aus dem User-Objekt. Weitere Informationen finden Sie unter Nutzer verwalten.

  • In Firebase Realtime Database und Cloud Storage Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen auth abrufen, und steuern, auf welche Daten ein Nutzer zugreifen kann.

Sie können Nutzern erlauben, sich über mehrere Authentifizierungsanbieter in Ihrer App anzumelden, indem Sie Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.

Wenn Sie einen Nutzer abmelden möchten, rufen Sie signOut auf:

WebWeb
import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js
 
firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js