Sosiaalisen median kirjautumiset (OAuth-palveluntarjoajat)
Integroi suosittuja OAuth-palveluntarjoajia, kuten Google, GitHub ja Facebook, tarjotaksesi käyttäjille sujuvan kirjautumisen sosiaalisen median tunnuksilla.
Sosiaalisen median kirjautumiset (OAuth-palveluntarjoajat) on ilmainen Supabase backend palveluna-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Supabase backend palveluna-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Supabase backend palveluna-kurssilla on yhteensä 4 oppituntia.
Helpompi rekisteröityminen sosiaalisilla kirjautumisilla
Ovatko käyttäjät kyllästyneitä luomaan uusia salasanoja jokaiseen sovellukseen? Sosiaalisilla kirjautumisilla, joita kutsutaan myös OAuth-palveluntarjoajiksi, käyttäjät voivat kirjautua sisään olemassa olevilla Google-, GitHub- tai Facebook-tileillään.
Tämä tekee rekisteröitymisestä paljon nopeampaa ja kätevämpää, parantaa käyttökokemusta ja voi lisätä palvelun käyttäjämäärää.
Supabase tekee OAuthista helppoa
Supabase toimii tehokkaana välikätenä ja yksinkertaistaa monimutkaista OAuth-prosessia. Sen sijaan, että kirjoittaisit monimutkaisen logiikan jokaiselle palveluntarjoajalle, Supabase käsittelee uudelleenohjaukset, tunnisteiden vaihdon ja istuntojen hallinnan turvallisesti.
Näin voit integroida useita sosiaalisia kirjautumisvaihtoehtoja vain vähäisellä koodimäärällä.
Palveluntarjoajien aktivointi projektissa
Ennen koodin kirjoittamista sinun on otettava haluamasi sosiaalisen kirjautumisen palveluntarjoajat käyttöön Supabase-projektisi hallintapaneelissa.
- Siirry kohtaan Authentication > Providers.
- Ota käyttöön esimerkiksi Google, GitHub tai Facebook.
- Sinun on määritettävä kunkin palveluntarjoajan Client ID ja Client Secret, jotka saat palveluntarjoajan kehittäjäkonsolista.
`signInWithOAuth`-metodi
Sosiaalisen kirjautumisen aloittamisen ydin sovelluksessasi on Supabase JavaScript -asiakkaan signInWithOAuth()-metodi. Tämä funktio ohjaa käyttäjän valitun palveluntarjoajan kirjautumissivulle.
Se ottaa vastaan provider-nimen (esimerkiksi 'google' tai 'github') ja valinnaisen options-olion, joka sisältää yleensä redirectTo-URL-osoitteen.
Google-kirjautumisen aloittaminen
Tässä on käytännön esimerkki Google-kirjautumisprosessin aloittamisesta. Kun tämä koodi suoritetaan, käyttäjä ohjataan Googlen todennussivulle.
Muista korvata window.location.origin + '/auth/callback' omalla callback-URL-osoitteellasi.
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-uudelleenohjausprosessi
Kun käyttäjä on kirjautunut onnistuneesti sisään sosiaalisen median palveluntarjoajan, kuten Googlen, kautta, palveluntarjoaja ohjaa hänet takaisin sovellukseesi.
Uudelleenohjaus sisältää URL-osoitteessa erityisiä parametreja, joita Supabase käyttää käyttäjän istunnon turvalliseen muodostamiseen. Se on OAuth-prosessin keskeinen osa.
Callback-reitin käsittely
Sovelluksellasi on oltava määritetty callback-reitti, kuten /auth/callback, joka vastaanottaa OAuth-palveluntarjoajan tekemän uudelleenohjauksen.
Supabase-asiakaskirjasto kuuntelee näitä URL-parametreja automaattisesti sivun latautuessa ja käsittelee ne käyttäjän istunnon luomiseksi. Tavallisesti tälle reitille ei tarvitse kirjoittaa erillistä koodia Supabase-asiakkaan alustamisen lisäksi.
Käyttäjän istuntotietojen käyttäminen
Kun käyttäjä on todennettu sosiaalisen kirjautumisen kautta, Supabase tarjoaa pääsyn käyttäjän istuntoon ja profiilitietoihin. Voit käyttää esimerkiksi metodia supabase.auth.getSession() aktiivisen istunnon tietojen hakemiseen.
Istunto-olio sisältää käyttäjän tunnisteen, sähköpostiosoitteen ja muita OAuth-palveluntarjoajan toimittamia metatietoja.
Nykyisen istunnon tarkistaminen
Tässä esimerkissä näytetään, miten voit tarkistaa, onko käyttäjä parhaillaan kirjautuneena sisään, ja hakea hänen istuntonsa tiedot. Tämä tehdään usein callback-uudelleenohjauksen jälkeen tai sovelluksen käynnistyessä.
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();Pidä sovelluksesi turvallisena
Tietoturva on todennuksessa ensiarvoisen tärkeää:
- Käytä HTTPS:ää: Varmista aina, että sovelluksesi tarjotaan HTTPS:n kautta.
- Kelvolliset `redirectTo`-URL-osoitteet: Määritä
redirectTo-URL-osoitteet huolellisesti sekä Supabasessa että OAuth-palveluntarjoajan asetuksissa uudelleenohjaushyökkäysten estämiseksi. - Asiakaspuolen avaimet: Älä koskaan paljasta Supabasen Service Role Key -avainta asiakaspuolella. Käytä asiakaspuolen toimintoihin ainoastaan Anon Key -avainta.
Sosiaalisen kirjautumisen tarkistus
Kun käytät metodia supabase.auth.signInWithOAuth(), mikä on redirectTo-option ensisijainen tarkoitus?
Kertaus ja seuraavat vaiheet
Olet oppinut onnistuneesti integroimaan sosiaaliset kirjautumiset Supabasen avulla! Tämä tehokas ominaisuus yksinkertaistaa käyttäjien todentamista, helpottaa kirjautumista ja hyödyntää suosittujen OAuth-palveluntarjoajien, kuten Googlen ja GitHubin, olemassa olevia käyttäjätilejä.
Ymmärrät nyt signInWithOAuth()-metodin roolin, uudelleenohjausprosessin ja käyttäjän istuntotietojen hakemisen.
Seuraavaksi tutustu käyttäjien istuntojen ja profiilien hallintaan, kuten käyttäjän metatietojen päivittämiseen ja turvalliseen uloskirjautumiseen.
Opi Supabase backend palveluna tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 11
- Oppitunnit
- 40
Usein kysytyt kysymykset
Onko oppitunti ”Sosiaalisen median kirjautumiset (OAuth-palveluntarjoajat)” ilmainen?
Kyllä – oppitunnin ”Sosiaalisen median kirjautumiset (OAuth-palveluntarjoajat)” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Supabase backend palveluna-kurssin, päivitä CoddyKit PROhon. Supabase backend palveluna-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Sosiaalisen median kirjautumiset (OAuth-palveluntarjoajat)”?
Integroi suosittuja OAuth-palveluntarjoajia, kuten Google, GitHub ja Facebook, tarjotaksesi käyttäjille sujuvan kirjautumisen sosiaalisen median tunnuksilla. Harjoittelet Supabase backend palveluna-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Supabase backend palveluna-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Supabase backend palveluna-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Sosiaalisen median kirjautumiset (OAuth-palveluntarjoajat)”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Supabase backend palveluna-oppitunnilla?
Kyllä. Jokainen Supabase backend palveluna-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Käyttäjän rekisteröinti sähköpostilla ja salasanalla
- Sosiaalisen median kirjautumiset (OAuth-palveluntarjoajat)
- Käyttäjäistuntojen ja profiilien hallinta
- Salasanan palautus ja Magic Link -todennus