Sosiale innlogginger (OAuth-leverandører)
Integrer populære OAuth-leverandører som Google, GitHub eller Facebook for å tilby sømløs sosial innlogging for brukerne.
Sosiale innlogginger (OAuth-leverandører) er en gratis leksjon i Supabase som backend som tjeneste på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Supabase som backend som tjeneste, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Supabase som backend som tjeneste inneholder totalt 4 leksjoner.
Forenkle registreringen med sosial innlogging
Er De lei av at brukere må opprette nye passord for hver app? Sosiale innlogginger, også kalt OAuth-leverandører, lar brukere logge inn med eksisterende kontoer fra tjenester som Google, GitHub eller Facebook.
Dette gjør registreringen mye raskere og mer praktisk, forbedrer brukeropplevelsen og kan potensielt øke antallet brukere.
Supabase gjør OAuth enkelt
Supabase fungerer som en kraftig mellommann som forenkler den komplekse OAuth-flyten. I stedet for at De skriver komplisert logikk for hver leverandør, håndterer Supabase viderekoblinger, tokenutveksling og øktadministrasjon på en sikker måte.
Det betyr at De kan integrere flere alternativer for sosial innlogging med minimalt med kode.
Aktivere leverandører i prosjektet
Før De skriver kode, må De aktivere de ønskede leverandørene for sosial innlogging i dashbordet for Supabase-prosjektet.
- Gå til Authentication > Providers.
- Slå på leverandører som Google, GitHub eller Facebook.
- De må konfigurere den aktuelle Client ID og Client Secret, som De får fra leverandørens utviklerkonsoll.
Metoden `signInWithOAuth`
Kjernen i å starte en sosial innlogging i applikasjonen er Supabase JavaScript-klientens signInWithOAuth()-metode. Denne funksjonen viderekobler brukeren til innloggingssiden hos den valgte leverandøren.
Den tar imot et provider-navn (for eksempel «google» eller «github») og et valgfritt options-objekt, som vanligvis inneholder en redirectTo-URL.
Starte Google-innlogging
Her er et praktisk eksempel på hvordan du starter en Google-påloggingsflyt. Når denne koden kjører, sendes brukeren til Googles autentiseringsside.
Husk å erstatte window.location.origin + '/auth/callback' med den faktiske callback-URL-en din.
import { createClient } from '@supabase/supabase-js';
// Initialize Supabase client (replace with your actual URL and Anon Key)
const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';
const supabase = createClient(supabaseUrl, supabaseAnonKey);
async function signInWithGoogle() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
redirectTo: window.location.origin + '/auth/callback'
}
});
if (error) {
console.error('Error initiating Google login:', error.message);
} else {
console.log('Redirecting to Google for authentication...');
// User will be redirected automatically
}
}
// To run this, you'd typically call signInWithGoogle()
// on a button click event in a web application.
// For example: signInWithGoogle();OAuth-viderekoblingsflyten
Etter at brukeren har logget inn hos den sosiale leverandøren (for eksempel Google), viderekobler leverandøren brukeren tilbake til applikasjonen din.
Denne viderekoblingen inneholder spesielle parametere i URL-en som Supabase bruker til å opprette brukerens økt på en sikker måte. Dette er en viktig del av OAuth-prosessen.
Håndtere callback-ruten
Applikasjonen din trenger en angitt callback-rute (for eksempel /auth/callback) for å motta viderekoblingen fra OAuth-leverandøren.
Supabase-klientbiblioteket lytter automatisk etter disse URL-parameterne når siden lastes inn, og behandler dem for å opprette en brukerøkt. Vanligvis trenger du ikke å skrive eksplisitt kode for denne ruten utover å initialisere Supabase-klienten.
Få tilgang til data om brukerøkten
Når brukeren er autentisert via sosial pålogging, gir Supabase tilgang til brukerens økt- og profilinformasjon. Du kan bruke metoder som supabase.auth.getSession() for å hente detaljer om den aktive økten.
Øktobjektet inneholder brukerens ID, e-postadresse og andre metadata fra OAuth-leverandøren.
Kontroller den gjeldende økten
Dette eksempelet viser hvordan du kontrollerer om en bruker er logget inn, og henter data om brukerøkten. Dette gjøres ofte etter callback-viderekoblingen eller når appen starter.
import { createClient } from '@supabase/supabase-js';
// Initialize Supabase client (replace with your actual URL and Anon Key)
const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';
const supabase = createClient(supabaseUrl, supabaseAnonKey);
async function getCurrentUserSession() {
const { data: { session }, error } = await supabase.auth.getSession();
if (error) {
console.error('Error getting session:', error.message);
return null;
}
if (session) {
console.log('User is logged in!');
console.log('User ID:', session.user.id);
console.log('Email:', session.user.email);
console.log('Provider:', session.user.app_metadata.provider);
return session;
} else {
console.log('No active session.');
return null;
}
}
// Call this function to check the session
// getCurrentUserSession();Hold appen sikker
Sikkerhet er avgjørende ved autentisering:
- Bruk HTTPS: Sørg alltid for at applikasjonen leveres via HTTPS.
- Gyldige `redirectTo`-URL-er: Konfigurer
redirectTo-URL-ene nøye både i Supabase og i innstillingene hos OAuth-leverandøren for å forhindre viderekoblingsangrep. - Klientnøkler: Eksponer aldri Supabase Service Role Key på klientsiden. Bruk bare Anon Key til operasjoner på klientsiden.
Kontroll av sosial pålogging
Når du bruker supabase.auth.signInWithOAuth(), hva er hovedformålet med alternativet redirectTo?
Oppsummering og neste steg
Du har lært hvordan du integrerer sosial pålogging med Supabase! Denne kraftige funksjonen forenkler brukerautentisering, gjør innlogging enklere og utnytter eksisterende brukerkontoer hos populære OAuth-leverandører som Google og GitHub.
Du forstår nå rollen til signInWithOAuth(), viderekoblingsflyten og hvordan du henter data om brukerøkten.
Deretter kan du utforske hvordan du administrerer brukerøkter og profiler, blant annet ved å oppdatere brukermetadata og håndtere utlogging på en sikker måte.
Lær deg Supabase som backend som tjeneste med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 11
- Leksjoner
- 40
Ofte stilte spørsmål
Er leksjonen «Sosiale innlogginger (OAuth-leverandører)» gratis?
Ja – hele teksten i «Sosiale innlogginger (OAuth-leverandører)» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Supabase som backend som tjeneste-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Supabase som backend som tjeneste inneholder totalt 4 leksjoner.
Hva lærer jeg i «Sosiale innlogginger (OAuth-leverandører)»?
Integrer populære OAuth-leverandører som Google, GitHub eller Facebook for å tilby sømløs sosial innlogging for brukerne. Du øver på Supabase som backend som tjeneste med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Supabase som backend som tjeneste?
Ingen tidligere erfaring er nødvendig. Supabase som backend som tjeneste på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Sosiale innlogginger (OAuth-leverandører)»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Supabase som backend som tjeneste-leksjonen?
Ja. Alle Supabase som backend som tjeneste-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Brukerregistrering med e-post og passord
- Sosiale innlogginger (OAuth-leverandører)
- Håndtering av brukerøkter og profiler
- Passordtilbakestilling og autentisering med magic link