PricingLoginStart free
Supabase backend palveluna · Oppitunti

Käyttäjän rekisteröinti sähköpostilla ja salasanalla

Toteuta perinteinen sähköposti- ja salasanatodennus, mukaan lukien käyttäjän rekisteröityminen, sisäänkirjautuminen ja salasanan palautus.

Oppitunti 1/411 vaihetta

Käyttäjän rekisteröinti sähköpostilla ja salasanalla on ilmainen Supabase backend palveluna-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.

Sähköposti- ja salasanatodennuksen perusteet

Tervetuloa Supabasen käyttäjätodennuksen pariin! Aloitamme yleisimmällä menetelmällä: sähköpostilla ja salasanalla.

Tämän menetelmän avulla käyttäjät voivat luoda tilin sähköpostiosoitteella ja valitsemallaan salasanalla sekä kirjautua sitten sisään näillä tunnistetiedoilla.

Supabase Auth selitettynä

Supabase tarjoaa täydellisen todennusjärjestelmän heti käyttövalmiina. Se huolehtii seuraavista:

  • käyttäjien rekisteröinnistä ja kirjautumisesta
  • salasanojen hajautuksesta ja tietoturvasta
  • istuntojen hallinnasta
  • sähköpostivahvistuksista ja salasanan palautuksista

Kaikkia näitä hallitaan yksinkertaisilla asiakaspuolen metodeilla.

Supabase Clientin alustaminen

Ennen käyttäjien rekisteröintiä tai sisäänkirjautumista Supabase-asiakas on määritettävä. Tämä asiakas toimii yhteytenä kaikkiin Supabasen palveluihin, myös todennukseen.

Tarvitset projektisi URL-osoitteen ja anon-avaimen (julkisen avaimen), jotka löydät Supabase-hallintapaneelin asetuksista.

import { createClient } from '@supabase/supabase-js'

const SUPABASE_URL = 'YOUR_SUPABASE_URL'
const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

console.log('Supabase client initialized!')

Uusien käyttäjien rekisteröiminen

Jotta käyttäjät voivat luoda tilin, käytämme signUp-metodia. Tämä metodi ottaa vastaan sähköpostiosoitteen ja salasanan sekä valinnaisesti muita käyttäjän metatietoja.

Supabase huolehtii salasanan turvallisesta tallentamisesta ja lähettää yleensä käyttäjälle vahvistussähköpostin.

async function registerUser(email, password) {
  const { data, error } = await supabase.auth.signUp({
    email: email,
    password: password
  })

  if (error) {
    console.error('Sign up error:', error.message)
  } else {
    console.log('User signed up successfully:', data.user.email)
    console.log('Check your email for a confirmation link!')
  }
}

Kokeile käyttäjän rekisteröimistä

Tehdään signUp-metodista suoritettava esimerkki. Tämä koodi simuloi uuden käyttäjän rekisteröintiä.

Oikeassa sovelluksessa hakisit sähköpostiosoitteen ja salasanan lomakkeelta.

import { createClient } from '@supabase/supabase-js'

const SUPABASE_URL = 'https://abcde12345.supabase.co'
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFiY2RlMTIzNDUiLCJyb2xlIjoiYW5vbiIsImlhdCI6MTY3ODkwMTIzNCwiZXhwIjoxOTk0NTY3ODkwfQ.YOUR_SECRET_KEY'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

async function trySignUp() {
  const testEmail = `testuser${Date.now()}@example.com`
  const testPassword = 'securepassword123'

  console.log(`Attempting to sign up ${testEmail}`)
  const { data, error } = await supabase.auth.signUp({
    email: testEmail,
    password: testPassword
  })

  if (error) {
    console.error('Sign up failed:', error.message)
  } else {
    console.log('Sign up successful! User ID:', data.user.id)
    console.log('Confirmation email sent to:', data.user.email)
  }
}

trySignUp()

Sähköpostin vahvistaminen

Kun käyttäjä rekisteröityy, Supabase lähettää yleensä vahvistussähköpostin. Se on tärkeä turvatoimi, jolla varmistetaan sähköpostiosoitteen omistajuus.

  • Käyttäjä napsauttaa sähköpostissa olevaa linkkiä.
  • Linkki vahvistaa hänen sähköpostiosoitteensa.
  • Hänen tilinsä aktivoituu, minkä jälkeen hän voi kirjautua sisään.

Voit määrittää sähköpostimallit ja uudelleenohjauksen URL-osoitteet Supabase-projektisi asetuksissa.

Nykyisten käyttäjien kirjautuminen

Kun käyttäjä on rekisteröitynyt ja vahvistanut sähköpostiosoitteensa, hän voi kirjautua sisään signInWithPassword-metodilla.

Tämä metodi todentaa käyttäjän ja palauttaa istunto-olion, jonka avulla käyttäjä voi käyttää suojattuja resursseja.

async function signInUser(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: email,
    password: password
  })

  if (error) {
    console.error('Sign in error:', error.message)
  } else {
    console.log('User signed in successfully:', data.user.email)
    console.log('Session access token:', data.session.access_token)
  }
}

Kokeile käyttäjän sisäänkirjautumista

Tässä on suoritettava esimerkki käyttäjän sisäänkirjautumisesta. Muista, että käyttäjän on oltava jo rekisteröitynyt ja hänen sähköpostiosoitteensa vahvistettu, jotta tämä toimii.

Istuntotunniste tallennetaan yleensä myöhempiä todennettuja pyyntöjä varten.

import { createClient } from '@supabase/supabase-js'

const SUPABASE_URL = 'https://abcde12345.supabase.co'
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFiY2RlMTIzNDUiLCJyb2xlIjoiYW5vbiIsImlhdCI6MTY3ODkwMTIzNCwiZXhwIjoxOTk0NTY3ODkwfQ.YOUR_SECRET_KEY'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

async function trySignIn() {
  const existingEmail = 'an_existing_user@example.com' // Replace with a real registered email
  const existingPassword = 'securepassword123' // Replace with that user's password

  console.log(`Attempting to sign in ${existingEmail}`)
  const { data, error } = await supabase.auth.signInWithPassword({
    email: existingEmail,
    password: existingPassword
  })

  if (error) {
    console.error('Sign in failed:', error.message)
  } else {
    console.log('Sign in successful! User ID:', data.user.id)
    console.log('Current session:', data.session)
  }
}

trySignIn()

Salasanan palautuksen aloittaminen

Entä jos käyttäjä unohtaa salasanansa? Supabasen avulla salasanan palautus voidaan hoitaa helposti ja turvallisesti käyttämällä resetPasswordForEmail-metodia.

Tämä metodi lähettää käyttäjän sähköpostiin erityisen magic link -linkin, jonka avulla hän voi asettaa uuden salasanan.

async function requestPasswordReset(email) {
  const { data, error } = await supabase.auth.resetPasswordForEmail(email, {
    redirectTo: 'https://example.com/update-password' // User redirected here after clicking link
  })

  if (error) {
    console.error('Password reset request error:', error.message)
  } else {
    console.log('Password reset email sent successfully to:', email)
  }
}

Tarkistus: Auth-metodit

Mitä Supabase Auth -metodia käytetään uuden käyttäjätilin luomiseen sähköpostiosoitteella ja salasanalla?

Vastaa interaktiivisessa oppitunnissa

Sähköposti- ja salasanatodennuksen yhteenveto

Hienoa työtä! Opit Supabasen sähköposti- ja salasanatodennuksen perusteet:

  • Supabase-asiakkaan alustaminen.
  • signUp-metodin käyttäminen uusien käyttäjien rekisteröimiseen.
  • Sähköpostin vahvistusprosessin ymmärtäminen.
  • signInWithPassword-metodin käyttäminen nykyisten käyttäjien sisäänkirjautumiseen.
  • Salasanan palautuksen aloittaminen resetPasswordForEmail-metodilla.

Tämä muodostaa sovellustesi turvallisen käyttäjähallinnan perustan!

Aloita maksutta

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
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Käyttäjän rekisteröinti sähköpostilla ja salasanalla” ilmainen?

Kyllä – oppitunnin ”Käyttäjän rekisteröinti sähköpostilla ja salasanalla” 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 ”Käyttäjän rekisteröinti sähköpostilla ja salasanalla”?

Toteuta perinteinen sähköposti- ja salasanatodennus, mukaan lukien käyttäjän rekisteröityminen, sisäänkirjautuminen ja salasanan palautus. 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 1/4.

Kuinka kauan ”Käyttäjän rekisteröinti sähköpostilla ja salasanalla”-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

  1. Käyttäjän rekisteröinti sähköpostilla ja salasanalla
  2. Sosiaalisen median kirjautumiset (OAuth-palveluntarjoajat)
  3. Käyttäjäistuntojen ja profiilien hallinta
  4. Salasanan palautus ja Magic Link -todennus
← Takaisin: Supabase backend palveluna