Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Eseguire l'autenticazione utilizzando GitHub con JavaScript

Puoi consentire agli utenti di eseguire l'autenticazione 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 o eseguendo manualmente il flusso OAuth 2.0 di GitHub e passando il token di accesso risultante a Firebase.

Prima di iniziare

Aggiungi Firebase al tuo progetto JavaScript.
Nella console Firebase, vai a Sicurezza > Autenticazione.
Nella scheda Metodo di accesso, attiva il provider di accesso GitHub.
Aggiungi l'ID cliente e il client secret dalla console per sviluppatori di quel provider alla configurazione del provider:
1. Registra la tua app come applicazione per sviluppatori su GitHub e ottieni l' ID cliente e il client secret OAuth 2.0 della tua app.
2. Assicurati che l'URI di reindirizzamento OAuth di Firebase (ad esempio, my-app-12345.firebaseapp.com/__/auth/handler) sia impostato come l' URL di callback dell'autorizzazione nella pagina delle impostazioni dell'app nella configurazione dell'app GitHub.
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 Firebase JavaScript. (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:

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

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 provider di autenticazione.
Facoltativo: specifica i parametri del provider OAuth personalizzati aggiuntivi 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 maggiori dettagli, consulta il riferimento del provider di autenticazione.

Esegui l'autenticazione con Firebase utilizzando l'oggetto provider GitHub. Puoi chiedere agli utenti di accedere con i loro account GitHub aprendo una finestra popup o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferibile 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 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 dell'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

Poi, puoi anche recuperare il token OAuth del provider GitHub chiamando getRedirectResult quando la pagina viene caricata:

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 dell'autenticazione.

Gestire gli errori account-exists-with-different-credential

Se hai attivato l'impostazione Un account per indirizzo email nella Firebase console, quando un utente tenta di accedere a un provider (ad esempio GitHub) con un'email già esistente per il provider di un altro utente Firebase (ad esempio Google), viene generato l'errore auth/account-exists-with-different-credential insieme a un AuthCredential oggetto (token di accesso GitHub). Per completare l'accesso al provider previsto, l'utente deve prima accedere al provider esistente (Google) e poi collegarsi al precedente AuthCredential (token di accesso GitHub).

Se utilizzi signInWithPopup, puoi gestire gli errori auth/account-exists-with-different-credential con un codice simile all'esempio seguente:

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) {
  // ...
}

Modalità di reindirizzamento

Questo errore viene gestito in modo simile nella modalità di reindirizzamento, con la differenza che le credenziali in attesa devono essere memorizzate nella cache tra i reindirizzamenti delle pagine (ad esempio, utilizzando l'archiviazione della sessione).

Gestire manualmente il flusso di accesso

Puoi anche eseguire l'autenticazione con Firebase utilizzando un account GitHub gestendo il flusso di accesso chiamando gli endpoint OAuth 2.0 di GitHub:

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.
Se devi accedere a un'applicazione Node.js, invia il token di accesso OAuth token all'applicazione Node.js.

Dopo che un utente ha eseguito l'accesso con GitHub, scambia il token di accesso OAuth 2.0 accesso con 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

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 ai documenti offscreen.

Al momento della creazione del progetto, Firebase eseguirà il provisioning di un sottodominio univoco per il tuo progetto: https://my-app-12345.firebaseapp.com.

Questo verrà utilizzato anche come meccanismo di reindirizzamento per l'accesso OAuth. Questo dominio deve essere consentito per tutti i provider OAuth supportati. Tuttavia, ciò significa che gli utenti potrebbero visualizzare questo dominio durante l'accesso a GitHub prima di essere reindirizzati all'applicazione: Continua a: https://my-app-12345.firebaseapp.com.

Per evitare di visualizzare il sottodominio, puoi configurare un dominio personalizzato con Firebase Hosting:

Segui i passaggi da 1 a 3 in Configurare il dominio per Hosting. Quando verifichi la proprietà del dominio, Hosting esegue il provisioning di un certificato SSL per il tuo dominio personalizzato.
Aggiungi il tuo dominio personalizzato all'elenco dei domini autorizzati nella Firebase console: auth.custom.domain.com.
Nella console per sviluppatori GitHub o nella pagina di configurazione OAuth, inserisci nella lista consentita l'URL della pagina di reindirizzamento, a cui sarà possibile accedere sul tuo dominio personalizzato: https://auth.custom.domain.com/__/auth/handler.

Quando inizializzi la libreria JavaScript, specifica il tuo dominio personalizzato con il authDomain campo:

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

Passaggi successivi

Dopo che un utente ha eseguito l'accesso per la prima volta, viene creato un nuovo account utente e collegato alle credenziali con cui ha eseguito l'accesso, ovvero nome utente e password, numero di telefono o informazioni del provider di autenticazione. Questo nuovo account viene memorizzato come parte del tuo progetto Firebase e può essere utilizzato per identificare un utente in ogni app del tuo progetto, indipendentemente dalla modalità di accesso.

Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è impostare un observer sull'oggetto Auth. Puoi quindi ottenere le informazioni di base del profilo dell'utente dall'oggetto User. Consulta Gestire gli utenti.
Nelle regole di sicurezza di Firebase Realtime Database e Cloud Storage , puoi ottenere l'ID utente univoco dell'utente che ha eseguito l'accesso dalla variabile auth, e utilizzarlo per controllare i dati a cui un utente può accedere.

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

Eseguire l'autenticazione utilizzando GitHub con JavaScript Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.