Eseguire l'autenticazione utilizzando GitHub con JavaScript

Puoi consentire agli utenti di autenticarsi con Firebase utilizzando i loro account GitHub integrando l'autenticazione GitHub nella tua app. Puoi integrare l'autenticazione GitHub utilizzando l'SDK Firebase per eseguire il flusso di accesso oppure eseguendo manualmente il flusso OAuth 2.0 di GitHub e passando il token di accesso risultante a Firebase.

Prima di iniziare

  1. Aggiungi Firebase al tuo progetto JavaScript.
  2. Nella console Firebase, apri la sezione Auth.
  3. Nella scheda Metodo di accesso, attiva il provider GitHub.
  4. Aggiungi l'ID cliente e il client secret della console per sviluppatori del provider alla configurazione del provider:
    1. Registra la tua app come applicazione per sviluppatori su GitHub e ottieni l'ID client e il client secret OAuth 2.0 della tua app.
    2. Assicurati che l'URI di reindirizzamento OAuth di Firebase (ad es. my-app-12345.firebaseapp.com/__/auth/handler) sia impostato come URL di callback dell'autorizzazione nella pagina delle impostazioni dell'app nella configurazione dell'app GitHub.
  5. Fai clic su Salva.

Gestire il flusso di accesso con l'SDK Firebase

Se stai creando un'app web, il modo più semplice per autenticare gli utenti con Firebase utilizzando i loro account GitHub è gestire il flusso di accesso con l'SDK JavaScript di Firebase. Se vuoi autenticare un utente in Node.js o in un altro ambiente non browser, devi gestire manualmente il flusso di accesso.

Per gestire il flusso di accesso con l'SDK Firebase JavaScript, segui questi passaggi:

  1. Crea un'istanza dell'oggetto provider GitHub:

    Web

    import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();
    auth_github_provider_create.js

    Web

    var provider = new firebase.auth.GithubAuthProvider();
    github.js
  2. Facoltativo: specifica gli ambiti OAuth 2.0 aggiuntivi che vuoi richiedere al provider di autenticazione. Per aggiungere un ambito, chiama addScope. Ad esempio:

    Web

    provider.addScope('repo');
    auth_github_provider_scopes.js

    Web

    provider.addScope('repo');
    github.js
    Consulta la documentazione del fornitore di servizi di autenticazione.
  3. Facoltativo: specifica ulteriori parametri personalizzati del provider OAuth che vuoi inviare con la richiesta OAuth. Per aggiungere un parametro personalizzato, chiama setCustomParameters sul provider inizializzato con un oggetto contenente la chiave come specificato dalla documentazione del provider OAuth e il valore corrispondente. Ad esempio:

    Web

    provider.setCustomParameters({
  'allow_signup': 'false'
});
    auth_github_provider_params.js

    Web

    provider.setCustomParameters({
  'allow_signup': 'false'
});
    github.js
    I parametri OAuth obbligatori riservati non sono consentiti e verranno ignorati. Per ulteriori dettagli, consulta le informazioni di riferimento sul fornitore di servizi di autenticazione.
  4. Esegui l'autenticazione con Firebase utilizzando l'oggetto del provider GitHub. Puoi invitare gli utenti ad accedere con i propri account GitHub aprendo una finestra popup o reindirizzandoli alla pagina di accesso. Il metodo di reindirizzamento è preferito sui dispositivi mobili.
    • Per accedere con una finestra popup, chiama signInWithPopup:

      Web

      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

      Web

      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
      Tieni inoltre presente che puoi recuperare il token OAuth del provider GitHub, che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API GitHub.

      Qui puoi anche rilevare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento per l'autenticazione.

    • Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect: Segui le best practice quando utilizzi "signInWithRedirect".

      Web

      import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Web

      firebase.auth().signInWithRedirect(provider);
      index.js
      Puoi anche recuperare il token OAuth del provider GitHub chiamando getRedirectResult al caricamento della pagina:

      Web

      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

      Web

      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
      Qui puoi anche rilevare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento per l'autenticazione.

Gestire manualmente il flusso di accesso

Puoi anche autenticarti con Firebase utilizzando un account GitHub gestendo il flusso di accesso chiamando gli endpoint OAuth 2.0 di GitHub:

  1. Integra l'autenticazione GitHub nella tua app seguendo la documentazione per gli sviluppatori. Al termine del flusso di accesso a GitHub, riceverai un token di accesso OAuth 2.0.
  2. Se devi accedere a un'applicazione Node.js, invia il token di accesso OAuth all'applicazione Node.js.
  3. Dopo che un utente ha eseguito l'accesso con GitHub, scambia il token di accesso OAuth 2.0 per una credenziale Firebase:

    Web

    import { GithubAuthProvider } from "firebase/auth";

const credential = GithubAuthProvider.credential(token);
    auth_github_provider_credential.js

    Web

    var credential = firebase.auth.GithubAuthProvider.credential(token);
    github.js
  4. Esegui l'autenticazione con Firebase utilizzando la credenziale Firebase:

    Web

    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

    Web

    // 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

Eseguire l'autenticazione con Firebase in un'estensione di Chrome

Se stai creando un'app di estensione di Chrome, consulta la guida Documenti fuori schermo.

Passaggi successivi

Dopo che un utente ha eseguito l'accesso per la prima volta, viene creato un nuovo account utente e collegato alle credenziali, ovvero nome utente e password, numero di telefono o informazioni del fornitore di autenticazione, con cui l'utente ha eseguito l'accesso. Questo nuovo account viene archiviato nel tuo progetto Firebase e può essere utilizzato per identificare un utente in tutte le app del progetto, indipendentemente da come accede.

  • Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è impostare un osservatore sull'oggetto Auth. Puoi quindi recuperare le informazioni di base del profilo dell'utente dall'oggetto User. Vedi Gestire gli utenti.

  • Nelle Regole di sicurezza Firebase Realtime Database e Cloud Storage, puoi recuperare l'ID utente univoco dell'utente che ha eseguito l'accesso dalla variabile auth e utilizzarlo per controllare a quali dati può accedere un utente.

Puoi consentire agli utenti di accedere alla tua app utilizzando più provider di autenticazione collegando le credenziali del provider di autenticazione a un account utente esistente.

Per scollegare un utente, chiama signOut:

Web

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

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

Web

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