Puoi consentire ai tuoi 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 oppure eseguendo manualmente il flusso GitHub OAuth 2.0 e passando il token di accesso risultante a Firebase.
Prima di iniziare
- Aggiungi Firebase al tuo progetto JavaScript .
- Nella console Firebase , apri la sezione Auth .
- Nella scheda Metodo di accesso abilitare il provider GitHub .
- Aggiungi l' ID client e il segreto client dalla console per sviluppatori di quel provider alla configurazione del provider:
- Registra la tua app come applicazione per sviluppatori su GitHub e ottieni l'ID client OAuth 2.0 e il segreto client della tua app.
- Assicurati che il tuo URI di reindirizzamento Firebase OAuth (ad es.
my-app-12345.firebaseapp.com/__/auth/handler
) sia impostato come URL di callback di autorizzazione nella pagina delle impostazioni dell'app nella configurazione dell'app GitHub .
- Fare clic su Salva .
Gestisci il flusso di accesso con l'SDK Firebase
Se stai creando un'app Web, il modo più semplice per autenticare i tuoi utenti con Firebase utilizzando i loro account GitHub è gestire il flusso di accesso con l'SDK JavaScript di Firebase. (Se desideri autenticare un utente in Node.js o in un altro ambiente diverso dal browser, devi gestire manualmente il flusso di accesso.)
Per gestire il flusso di accesso con l'SDK JavaScript di Firebase, procedi nel seguente modo:
- Crea un'istanza dell'oggetto provider GitHub:
Web modular API
import { GithubAuthProvider } from "firebase/auth"; const provider = new GithubAuthProvider();
Web namespaced API
var provider = new firebase.auth.GithubAuthProvider();
- Facoltativo : specificare ulteriori ambiti OAuth 2.0 che si desidera richiedere al provider di autenticazione. Per aggiungere un ambito, chiama
addScope
. Per esempio:Consulta la documentazione del provider di autenticazione .Web modular API
provider.addScope('repo');
Web namespaced API
provider.addScope('repo');
- Facoltativo : specificare ulteriori parametri del provider OAuth personalizzati che si desidera 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. Per esempio:I parametri OAuth obbligatori riservati non sono consentiti e verranno ignorati. Vedere il riferimento del provider di autenticazione per ulteriori dettagli.Web modular API
provider.setCustomParameters({ 'allow_signup': 'false' });
Web namespaced API
provider.setCustomParameters({ 'allow_signup': 'false' });
- Esegui l'autenticazione con Firebase utilizzando l'oggetto provider GitHub. Puoi chiedere agli utenti di accedere con i propri account GitHub aprendo una finestra popup o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferito sui dispositivi mobili.
- Per accedere con una finestra pop-up, chiama
signInWithPopup
:Si noti inoltre che è possibile recuperare il token OAuth del provider GitHub che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API GitHub.Web modular API
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); // ... });
Web namespaced API
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; // ... });
Questo è anche il luogo in cui puoi rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento per l'autenticazione .
- Per accedere reindirizzando alla pagina di accesso, chiama
signInWithRedirect
: Segui le best practice quando usi "signInWithRedirect".Quindi, puoi anche recuperare il token OAuth del provider GitHub chiamandoWeb modular API
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web namespaced API
firebase.auth().signInWithRedirect(provider);
getRedirectResult
quando la tua pagina viene caricata:Questo è anche il luogo in cui puoi rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento per l'autenticazione .Web modular API
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); // ... });
Web namespaced API
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; // ... });
- Per accedere con una finestra pop-up, chiama
Gestisci il flusso di accesso manualmente
Puoi anche eseguire l'autenticazione con Firebase utilizzando un account GitHub gestendo il flusso di accesso chiamando gli endpoint GitHub OAuth 2.0:
- Integra l'autenticazione GitHub nella tua app seguendo la documentazione dello sviluppatore . 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 all'applicazione Node.js.
- Dopo che un utente ha eseguito correttamente l'accesso a GitHub, scambia il token di accesso OAuth 2.0 con una credenziale Firebase:
Web modular API
import { GithubAuthProvider } from "firebase/auth"; const credential = GithubAuthProvider.credential(token);
Web namespaced API
var credential = firebase.auth.GithubAuthProvider.credential(token);
- Esegui l'autenticazione con Firebase utilizzando le credenziali Firebase:
Web modular API
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; // ... });
Web namespaced API
// 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; // ... });
Esegui l'autenticazione con Firebase in un'estensione di Chrome
Se stai creando un'app di estensione di Chrome, devi aggiungere il tuo ID estensione di Chrome:
- Apri il tuo progetto nella console Firebase .
- Nella sezione Autenticazione , apri la pagina Metodo di accesso .
- Aggiungere un URI come il seguente all'elenco dei domini autorizzati:
chrome-extension://CHROME_EXTENSION_ID
Solo le operazioni popup ( signInWithPopup
, linkWithPopup
e reauthenticateWithPopup
) sono disponibili per le estensioni di Chrome, poiché le estensioni di Chrome non possono utilizzare i reindirizzamenti HTTP. Dovresti chiamare questi metodi da uno script di una pagina in background piuttosto che da un popup di azione del browser, poiché il popup di autenticazione annullerà il popup di azione del browser. I metodi popup possono essere utilizzati solo nelle estensioni che utilizzano Manifest V2 . Il più recente Manifest V3 consente solo script in background sotto forma di service worker, che non possono eseguire affatto le operazioni popup.
Nel file manifest dell'estensione di Chrome assicurati di aggiungere l'URL https://apis.google.com
alla lista consentita content_security_policy
.
Prossimi passi
Dopo che un utente ha effettuato 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 sul provider di autenticazione, con cui l'utente ha effettuato l'accesso. Questo nuovo account viene archiviato 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 dell'utente.
Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione del tuo utente è impostare un osservatore sull'oggetto
Auth
. È quindi possibile ottenere le informazioni di base sul profilo dell'utente dall'oggettoUser
. Vedere Gestire gli utenti .In Firebase Realtime Database and Cloud Storage Security Rules , puoi ottenere 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 disconnettere un utente, chiama signOut
:
Web modular API
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web namespaced API
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });