Accesso degli utenti con GitHub

Questo documento illustra come utilizzare Identity Platform per eseguire l'accesso degli utenti con GitHub.

Prima di iniziare

Questo tutorial presuppone che tu abbia già attivato Identity Platform e che tu abbia un'app web di base scritta utilizzando HTML e JavaScript. Per scoprire come, consulta la guida rapida.

Configurare GitHub come provider

Per configurare GitHub come provider di identità:

  1. Vai alla pagina Provider di identità nella console Google Cloud.

    Vai alla pagina Provider di identità

  2. Fai clic su Aggiungi un provider.

  3. Seleziona GitHub dall'elenco.

  4. Inserisci l'ID cliente e il client secret di GitHub. Se non hai ancora un ID e un segreto, puoi ottenerne uno dalla pagina Applicazioni GitHub.

  5. Configura l'URI elencato in Configura GitHub come URI di reindirizzamento OAuth valido per la tua app GitHub. Se hai configurato un dominio personalizzato in Identity Platform, aggiornate l'URI di reindirizzamento nella configurazione dell'app GitHub in modo da utilizzare il dominio personalizzato anziché il dominio predefinito. Ad esempio, cambia https://myproject.firebaseapp.com/__/auth/handler in https://auth.myownpersonaldomain.com/__/auth/handler.

  6. Registra i domini della tua app facendo clic su Aggiungi dominio in Domini autorizzati. Per scopi di sviluppo, localhost è già attivato per impostazione predefinita.

  7. In Configura l'applicazione, fai clic su Dettagli di configurazione. Copia lo snippet nel codice dell'app per inizializzare l'SDK client di Identity Platform.

  8. Fai clic su Salva.

Accesso degli utenti con l'SDK client

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

    Versione web 9

    import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();
    auth_github_provider_create.js

    Versione web 8

    var provider = new firebase.auth.GithubAuthProvider();
    github.js

  1. (Facoltativo) Aggiungi gli ambiti OAuth. Gli ambiti specificano i dati che stai richiedendo a GitHub. I dati più sensibili potrebbero richiedere scopi specifici. Consulta la documentazione del fornitore per determinare gli ambiti di cui ha bisogno la tua app.

    Versione web 9

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

    Versione web 8

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

  1. Facoltativo:localizza il flusso di autenticazione. Puoi specificare una lingua o utilizzare la lingua predefinita del dispositivo:

    Versione web 9

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    Versione web 8

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js

  2. (Facoltativo) Specifica altri parametri OAuth personalizzati. Sono specifiche di GitHub e in genere vengono utilizzate per personalizzare l'esperienza di autenticazione. Non puoi passare parametri riservati da OAuth o Identity Platform.

Versione web 9

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

Versione web 8

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

  1. Utilizza l'oggetto del provider GitHub per far accedere l'utente. Puoi aprire una finestra popup o reindirizzare la pagina corrente. Il reindirizzamento è più semplice per gli utenti che utilizzano dispositivi mobili.

    Per visualizzare un popup, chiama signInWithPopup():

    Versione web 9

    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

    Versione web 8

    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

    Per reindirizzare la pagina, chiama prima signInWithRedirect().

    Segui le best practice quando utilizzi signInWithRedirect, linkWithRedirect o reauthenticateWithRedirect.

    Versione web 9

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

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

    Versione web 8

    firebase.auth().signInWithRedirect(provider);
    index.js

    Quindi, recupera il token GitHub chiamando getRedirectResult() al caricamento della pagina:

    Versione web 9

    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

    Versione web 8

    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

Una volta ottenuto un token di accesso, puoi utilizzarlo per chiamare l'API GitHub. Ad esempio:

REST

curl -H "Authorization: Bearer [TOKEN]" https://api.github.com/gists/starred

Accesso degli utenti manualmente

Se non vuoi utilizzare l'SDK client, puoi gestire manualmente anche il flusso di accesso:

  1. Integra l'autenticazione GitHub nella tua app seguendo i passaggi indicati nella documentazione per gli sviluppatori.

  2. Accedi all'utente con GitHub utilizzando il flusso implementato nel passaggio precedente.

  3. Scambia il token che ricevi da GitHub con una credenziale Identity Platform:

    Versione web 9

    import { GithubAuthProvider } from "firebase/auth";

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

    Versione web 8

    var credential = firebase.auth.GithubAuthProvider.credential(token);
    github.js

  4. Utilizza le credenziali per far accedere l'utente con Identity Platform:

    Versione web 9

    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

    Versione web 8

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

Passaggi successivi