Applikationer med Firebase Auth och Realtime Database · Lektion

Autentisering med Facebook och GitHub

Lägg till Facebook och GitHub som autentiseringsleverantörer och konfigurera din app och Firebase för social inloggning

Lektion 2 av 411 steg

Autentisering med Facebook och GitHub är en gratis lektion i Applikationer med Firebase Auth och Realtime Database på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Applikationer med Firebase Auth och Realtime Database, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Applikationer med Firebase Auth och Realtime Database innehåller totalt 4 lektioner.

Social inloggning: Facebook och GitHub

Välkommen! I den här lektionen går vi igenom hur du integrerar två populära alternativ för social inloggning: Facebook och GitHub.

Att använda sociala leverantörer som dessa kan förbättra användarupplevelsen avsevärt genom att erbjuda snabba och välbekanta metoder för registrering och inloggning.

Varför erbjuda social inloggning?

Social inloggning ger användarna en smidig upplevelse. Här är några fördelar:

Bekvämlighet: Användarna kan logga in med konton de redan har.
Mindre friktion: De behöver inte skapa nya användarnamn eller lösenord.
Förtroende: Användarna känner sig ofta säkrare när de använder etablerade plattformar.
Snabbare introduktion: Snabb åtkomst till appens funktioner.

Konfigurera Facebook-appen: utvecklarkonsolen

Innan du aktiverar Facebook-inloggning i Firebase måste du skapa en app på plattformen Facebook for Developers.

Gå till developers.facebook.com och skapa en ny app.
Välj typen ”Consumer” för vanlig användarautentisering.
Anteckna ditt App ID och din App Secret; du behöver dem i Firebase.

Konfigurera produkten Facebook Login

När du har skapat din Facebook-app måste du konfigurera produkten ”Facebook Login”:

Lägg till produkten ”Facebook Login” i Facebook App Dashboard.
Kontrollera under ”Settings” för Facebook Login att ”Web OAuth Login” är aktiverat.
Lägg till Firebase OAuth-omdirigerings-URI:n (som finns i Firebase Auth-inställningarna) under ”Valid OAuth Redirect URIs”. Detta är avgörande för säkerheten.

Firebase Console: aktivera Facebook

Nu ska vi aktivera Facebook som autentiseringsleverantör i Firebase:

Gå till avsnittet Authentication i Firebase-projektets konsol.
Gå till fliken ”Sign-in method”.
Klicka på ”Add new provider” och välj Facebook.
Klistra in ditt Facebook-App ID och din App Secret i de angivna fälten.
Se till att aktivera leverantören och spara ändringarna!

Kod: Facebook-inloggning

När allt är konfigurerat kan du använda Firebase SDK för att logga in användare med Facebook. Detta JavaScript-exempel visar den centrala logiken, som vanligtvis utlöses av en knapp.

/* This is a conceptual example for web/JS.
   Firebase SDK must be initialized before use. */

// 1. Get Auth instance & Facebook provider
const auth = firebase.auth();
const provider = new firebase.auth.FacebookAuthProvider();

// 2. Define the sign-in function
function signInWithFacebook() {
  console.log("Attempting Facebook sign-in...");
  auth.signInWithPopup(provider)
    .then((result) => {
      // User successfully signed in
      const user = result.user;
      console.log("Logged in as:", user.displayName);
    })
    .catch((error) => {
      // Handle errors (e.g., user cancelled, network error)
      console.error("Facebook login failed:", error.message);
    });
}

// Call the function (in a real app, this is a button click)
signInWithFacebook();

Konfigurera GitHub-appen: utvecklarkonsolen

Att integrera GitHub liknar integrationen med Facebook. Först behöver du skapa en OAuth App på GitHub:

Gå till github.com/settings/developers.
Klicka på ”New OAuth App”.
Fyll i ”Application name” och ”Homepage URL”.
Ange Firebase OAuth-omdirigerings-URI för ”Authorization callback URL”.
Klicka på ”Register application” och notera ditt Client ID och din Client Secret.

Firebase Console: aktivera GitHub

Aktivera sedan GitHub som autentiseringsleverantör i ditt Firebase-projekt:

Gå till Authentication > Sign-in method i Firebase-konsolen.
Klicka på ”Add new provider” och välj GitHub.
Klistra in ditt GitHub-Client ID och din Client Secret i motsvarande fält.
Aktivera leverantören och spara ändringarna.

Firebase OAuth-omdirigerings-URI för GitHub visas här. Kontrollera att den stämmer överens med den du angav på GitHub.

Kod: inloggning med GitHub

Precis som med Facebook kan du använda Firebase SDK för att logga in användare när GitHub har konfigurerats. Det här JavaScript-exemplet visar hur processen fungerar.

/* This is a conceptual example for web/JS.
   Firebase SDK must be initialized before use. */

// 1. Get Auth instance & GitHub provider
const auth = firebase.auth();
const provider = new firebase.auth.GithubAuthProvider();

// 2. Define the sign-in function
function signInWithGitHub() {
  console.log("Attempting GitHub sign-in...");
  auth.signInWithPopup(provider)
    .then((result) => {
      // User successfully signed in
      const user = result.user;
      console.log("Logged in as:", user.displayName);
    })
    .catch((error) => {
      // Handle errors (e.g., user cancelled, network error)
      console.error("GitHub login failed:", error.message);
    });
}

// Call the function (in a real app, this is a button click)
signInWithGitHub();

Snabbtest: konfigurera social inloggning

Du har lärt dig stegen för att integrera social inloggning. Vilka av följande steg är nödvändiga när du konfigurerar en ny social autentiseringsleverantör, till exempel Facebook eller GitHub, med Firebase?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Facebook- och GitHub-autentisering

Bra jobbat! I den här lektionen lärde du dig att lägga till Facebook- och GitHub-autentisering i ditt Firebase-projekt.

Vi gick igenom hur du skapar utvecklarappar på de olika plattformarna.
Du såg hur du konfigurerar nödvändiga inställningar, inklusive OAuth-omdirigerings-URI:er.
Slutligen aktiverade vi dessa leverantörer i Firebase-konsolen och tittade på konceptuell kod för att logga in användare.

Social inloggning förenklar introduktionen av nya användare och gör din app mer tillgänglig!

Gratis att börja

Lär dig Applikationer med Firebase Auth och Realtime Database med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 11
Lektioner: 44

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Autentisering med Facebook och GitHub” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Applikationer med Firebase Auth och Realtime Database, inklusive ”Autentisering med Facebook och GitHub”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Applikationer med Firebase Auth och Realtime Database innehåller totalt 4 lektioner.

Vad lär jag mig i ”Autentisering med Facebook och GitHub”?

Lägg till Facebook och GitHub som autentiseringsleverantörer och konfigurera din app och Firebase för social inloggning Ni övar på Applikationer med Firebase Auth och Realtime Database med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Applikationer med Firebase Auth och Realtime Database?

Du behöver inga förkunskaper. Utbildningen i Applikationer med Firebase Auth och Realtime Database på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Autentisering med Facebook och GitHub”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Applikationer med Firebase Auth och Realtime Database-lektionen?

Ja. Varje Applikationer med Firebase Auth och Realtime Database-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Applikationer med Firebase Auth och Realtime Database