En av ioniske styrker er i tjenestene som den tilbyr på toppen av rammen. Dette inkluderer tjenester for godkjenning av brukere av appen din, pressemeldinger og analyser. I denne serien lærer vi om disse tre tjenestene ved å lage en app som bruker hver av dem.
Den første tjenesten vi skal se på er Auth-tjenesten. Dette tillater oss å implementere godkjenning i en jonisk app uten å skrive en enkelt linje med back-end-kode. Eller hvis du allerede har et eksisterende autentiseringssystem, kan du også bruke det. Tjenesten støtter følgende autentiseringsmetoder:
Epost Passord: Brukeren er registrert ved å levere e-post og passord.
Sosial pålogging: Brukeren er registrert ved hjelp av sin sosiale media profil. Dette inkluderer for øyeblikket Facebook, Google, Twitter, Instagram, LinkedIn og GitHub.
Tilpasset: Brukeren er registrert ved å bruke et eksisterende autentiseringssystem.
I denne opplæringen skal vi bare dekke e-post / passord og sosial pålogging med Facebook.
Hva du skal skape
Før vi går videre, er det alltid godt å ha en generell ide om hva vi skal skape, og hva strømmen av appen vil være som. Appen har følgende sider:
hjemmeside
registreringsside
bruker siden
Hjemmeside
Hjemmesiden er standard siden av appen hvor brukeren kan logge inn med e-post / passord eller deres Facebook-konto.
Når brukeren klikker på Logg inn med Facebook knappen, vises en skjerm som ligner på følgende, og når brukeren er enig, er brukeren logget på appen:
Registrering Side
Registreringssiden er hvor brukeren kan registrere seg ved å skrive inn e-post og passord. Facebook-pålogging krever ingen påmelding fordi brukerinformasjonen leveres av Facebook API.
Bruker side
Den endelige siden er bruker siden, som kun kan ses når brukeren allerede har logget på.
Bootstrap en ny ionisk app
Nå som du vet hva vi lager, la oss begynne å bygge vår app!
Først starter vi en ny jonisk app ved hjelp av den tomme startmalen:
ionisk start authApp blank
Naviger i det nyopprettede authApp mappe. Dette tjener som rotkatalogen av prosjektet.
For å raskt bli satt opp med brukergrensesnittet til appen, har jeg opprettet en GitHub repo der du kan finne startkildens filer. Last ned repo, navigere inne i starter mappe og kopiere src mappe over til roten til det joniske prosjektet du nettopp har opprettet. Dette inneholder malfiler for hver av sidene i appen. Jeg vil fortelle deg mer detaljert hva hver av disse filene gjør i en senere seksjon.
Server prosjektet slik at du umiddelbart kan se endringene dine mens du utvikler appen:
ionisk servering
Opprett en ionisk konto
Siden vi bruker Ionic's back-end for å håndtere brukerautentisering, trenger vi en måte å administrere brukerne av appen på. Det er her den joniske kontoen kommer inn. Den lar deg administrere dine joniske apps og de tjenestene de bruker. Dette inkluderer administrering av Auth-tjenesten. Du kan opprette en jonisk konto ved å gå til Ionic.io-registreringssiden.
Koble appen til ioniske tjenester
Deretter navigerer du til rotkatalogen av prosjektet og installerer ikonet Ionic Cloud:
npm installere @ ionic / cloud-angular - save
Denne plugin vil tillate appen å enkelt samhandle med ioniske tjenester.
Deretter kan du initialisere appen for å bruke ioniske tjenester:
ionisk io init
Dette ber deg om å logge inn med din joniske konto. Når du har angitt riktig påloggingsinformasjon, oppretter kommandolinjeverktøyet automatisk en ny appoppføring under din joniske konto. Denne posten er koblet til appen du utvikler.
Du kan bekrefte at dette trinnet har fungert ved å åpne .io-config.json fil og ionic.config.json fil på roten av prosjektet ditt. De APP_ID bør være det samme som app-IDen som er tilordnet den nyopprettede appen i ditt ikoniske dashbord.
Hjemmeside
Naviger inne i src / sider / home katalog for å se filene til hjemmesiden. Åpne home.html fil og du vil se følgende:
Ionic2 Auth e-postPassord
Denne siden vil spørre brukeren for e-post og passord eller logge inn med sin Facebook-konto. Hvis brukeren ikke har noen konto enda, kan de klikke på påmeldingsknappen for å få tilgang til registreringssiden. Vi går tilbake til detaljene til denne siden senere som vi går videre til påloggingsdelen. Jeg viser det bare til deg, så du kan se koden for å navigere til påmeldingssiden.
Deretter åpner du home.ts fil. For nå inneholder den bare noen boilerplate-kode for å navigere til registrerings- og brukersiden. Senere skal vi gå tilbake til denne siden for å legge til koden for å logge brukeren inn.
Brukerregistrering
Oppsettet til registreringssiden er funnet i src /sider / registrering-side / registrering-/side.html. Ta en titt på denne filen, og du vil finne en enkel skjema med et emailfelt og et passordfelt.
Neste, la oss ta en titt på signup-page.ts fil.
La oss bryte dette ned. Først importerer den kontrollerne for å lage varsler og lastere:
importer AlertController, LoadingController fra 'ionisk-vinkelformet';
Deretter importerer den klassene som trengs fra Cloud Client:
importer Auth, UserDetails, IDetailedError fra '@ ionic / cloud-angular';
De Auth tjeneste som omhandler brukerregistrering, innlogging og pålogging.
User er typen som brukes til å definere brukerdetaljer når du registrerer eller logger inn i en bruker.
IDetailedError brukes til å bestemme den eksakte grunnen til feilen som oppstod. Dette gjør det mulig for oss å gi brukervennlige feilmeldinger til brukeren når det oppstår en feil.
Erklære variablene som skal brukes til å lagre e-post og passordinngang av brukeren. Dette bør være det samme som navnet du har gitt til verdi og ngModel attributter i layoutfilen.
Neste er registrere metode, som kalles når Registrere knappen er trykket. La oss kode denne metoden sammen.
Først brenner den opp en laster, og lukker den automatisk etter fem sekunder (slik at hvis noe går galt, blir brukeren ikke igjen med en lastingsanimasjon som spinner for alltid).
registrer () la loader = this.loadingCtrl.create (innhold: "Signer deg opp ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000);
Deretter la vi opprette et objekt for å lagre brukerens detaljer:
la detaljer: UserDetails = 'email': this.email, 'passord': this.password;
Til slutt vil vi ringe til melde deg på() metode fra Auth service og levere brukerens detaljer som argumentet. Dette returnerer et løfte, som vi pakker ut med deretter(). Når en suksess er mottatt fra back-end, den første funksjonen du overfører til deretter() vil bli henrettet Ellers vil den andre funksjonen bli utført.
this.auth.signup (detaljer) .then ((res) => loader.dismiss (); // skjul loader let alert = this.alertCtrl.create (tittel: "Du er registrert!", subTitle: 'Du kan nå logge inn.', Knapper: ['OK']); alert.present (); // vis varselboks, (feil: IDetailedError) => ...);
Hvis et feilrespons mottas fra Ionic Auth, slår vi gjennom en rekke feil og konstruerer en feilmelding basert på typen feil mottatt. Her finner du listen over Auth registreringsfeil som kan oppstå.
loader.dismiss (); var error_message = "; for (la e av err.details) if (e === 'conflict_email') error_message + =" E-post eksisterer allerede. "; else error_message + =" Ugyldig legitimasjon. "; la varsel = this.alertCtrl.create (title: error_message, subTitle: 'Vennligst prøv igjen.', knapper: ['OK']); alert.present ();
Når det er gjort, kan du prøve appen i nettleseren din. E-post / passordloggingen har ingen plugin eller maskinvareavhengigheter, så du bør kunne teste det ut i nettleseren. Du kan da finne den nyregistrerte brukeren i Auth fanen i din ikoniske app dashbord.
Sette opp Facebook App
Det neste trinnet er å konfigurere appen slik at den kan håndtere innfødte Facebook-pålogginger. Først må du opprette en Facebook-app. Du kan gjøre det ved å logge deg på Facebook-kontoen din og deretter gå til Facebook Developer Site. Derfra, opprett en ny app:
Når appen er opprettet, klikker du på Legg til produkt lenke på sidefeltet og velg Facebook Logg inn. Dette åpner Kjapp start skjermen som standard. Vi trenger egentlig ikke det, så gå videre og klikk på innstillinger lenke rett under Facebook-innlogging. Det skulle vise deg følgende skjerm:
Her må du aktivere Embedded Browser OAuth Login sette inn og legge til https://api.ionic.io/auth/integrations/facebook som verdien for Gyldig OAuth-omdirigering av URIer. Lagre endringene når det er gjort.
Deretter må du koble Ionic Auth til Facebook-appen du nettopp har opprettet. Gå til ditt ikoniske instrumentpanel og velg appen som ble opprettet tidligere (se delen "Koble appen til ioniske tjenester"). Klikk på innstillinger kategorien og deretter Brukerauth. Under Sosialleverandører, Klikk på Setup knappen ved siden av Facebook:
Skriv inn app-ID og apphemmelig for Facebook-appen du opprettet tidligere, og klikk Aktiver.
Installer Facebook Plugin
Deretter installerer du Facebook-plugin for Cordova. I motsetning til de fleste plugins krever dette at du skal levere litt informasjon: Facebook App ID og App Name. Du kan bare kopiere denne informasjonen fra dashbordet til Facebook-appen.
Når det er gjort, er det siste du må gjøre å gå tilbake til prosjektet ditt, åpne src / app / app.module.ts fil, og legg til CloudSettings og CloudModule tjenester fra sky-vinkel pakke:
importer CloudSettings, CloudModule fra '@ ionic / cloud-angular';
Erklære cloudSettings gjenstand. Dette inneholder APP_ID av din joniske app og eventuelle tilleggstillatelser (omfang) du vil spørre fra brukerne av appen din. Som standard spør dette allerede om e-post og public_profile.
Senere, når du legger til andre sosiale tilbydere i appen din, følges en lignende prosess.
Logg på brukeren i
Nå er det på tide å gå tilbake til hjemmesiden og gjøre noen endringer. HTML-malen har allerede alt vi trenger, så vi trenger bare å oppdatere skriptet. Gå videre og åpne src / sider / home / home.ts fil. På toppen av filen importerer du følgende i tillegg til det du allerede har tidligere:
importer NavController, AlertController, LoadingController fra 'ionisk-vinkelformet'; importer Auth, FacebookAuth, User, IDetailedError fra '@ ionic / cloud-angular'; importer UserPage fra '... / bruker-side / bruker-side';
Inne i konstruktøren, avgjøre om en bruker er logget inn eller ikke. Hvis en bruker allerede er logget inn, navigerer vi automatisk til bruker siden.
Eksporter klasse HomePage // erklære variabler for lagring av brukeren og e-post innført av brukerens e-post: streng; passord: streng; konstruktør (offentlig navCtrl: NavController, offentlig auth: Auth, offentlig facebookAuth: FacebookAuth, offentlig bruker: Bruker, offentlig advarselCtrl: AlertController, offentlig loadingCtrl: LoadingController) if (this.auth.isAuthenticated ()) this.navCtrl.push user); ...
Deretter når Logg Inn knappen er trykket, vi begynner med å vise en lastingsanimasjon.
logg inn (type) la loader = this.loadingCtrl.create (innhold: "Logg inn ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000); ...
Som du så i src / sider / home / home.html filen tidligere, en streng som representerer hvilken innloggingsknapp som er trykket (enten e-post / passord-innloggingsknappen eller Facebook-innloggingsknappen) sendes til Logg Inn() funksjon. Dette gjør at vi kan bestemme hvilken innloggingskode som skal utføres. Hvis typen er 'Fb', Det betyr at Facebook-innloggingsknappen ble trykket, så vi kaller Logg Inn() metode av FacebookAuth service.
hvis (type == 'fb') this.facebookAuth.login (). da ((res) => loader.dismiss (); this.navCtrl.push (UserPage);, (err) => / / skjul lasteren og naviger til bruker siden loader.dismiss (); la alert = this.alertCtrl.create (tittel: "Feil ved å logge inn på Facebook.", subTitle: 'Vennligst prøv igjen.', knapper: [ 'OK']); alarm.present (););
Ellers ble e-post / passord-innloggingsknappen trykket, og vi må logge brukeren inn med detaljene som er oppgitt i påloggingsskjemaet.
Ta en titt på den endelige versjonen av home.ts-filen for å se hvordan det skal se ut.
Bruker side
Den siste siden er bruker siden.
Oppsettet, i src / sider / user-page / bruker /side.html, viser profilbildet til brukeren og deres brukernavn. Hvis brukeren registrerte seg med e-post / passord, vil brukernavnet være e-postadressen til brukeren, og profilbildet blir standardprofilfotoet tildelt av jonisk. På den annen side, hvis brukeren registrerte seg med Facebook, vil profilbildet bli deres Facebook-profilbilde og deres brukernavn vil være deres fulle navn.
Deretter ser du på bruker-page.ts fil.
Under ionisk-vinkel pakke, importerer vi Plattform service bortsett fra NavController. Dette brukes til å få informasjon om den gjeldende enheten. Det har også metoder for å lytte til maskinvarehendelser, for eksempel når du trykker på maskinvare-tilbakeknappen i Android.
importer NavController, Platform fra 'ionisk-vinkelformet';
Og for sky-vinkel pakke, vi trenger Auth, FacebookAuth, og Bruker tjenester:
importer Auth, FacebookAuth, User fra '@ ionic / cloud-angular';
Inne i klassekonstruktøren, avgjør om brukeren er logget inn med brukerens e-post / passord eller sin Facebook-konto. Fyll ut brukernavn og bilde basert på det. Deretter, under det, tilordne en funksjon som skal utføres når maskinvare-tilbakeknappen trykkes. De registerBackButtonAction () aksepterer to argumenter: funksjonen som skal utføres og prioriteten. Hvis det er mer enn ett av disse i appen, utføres bare høyeste prioritet. Men siden vi bare trenger dette på denne skjermen, legger vi bare inn 1.
De logoutUser () Metoden inneholder logikken for å logge brukeren ut. Det første du gjør er å avgjøre om en bruker faktisk er logget inn. Hvis en bruker er logget inn, avgjør vi om brukeren er en Facebook-bruker eller en bruker av e-post / passord.
Dette kan gjøres ved å sjekke e-post eiendom under user.details gjenstand. Hvis denne egenskapen eksisterer, betyr det at brukeren er e-post / passordbruker. Så hvis det er ellers, antar vi at det er Facebook-bruker. Ringer på Logg ut() metode i Auth og FacebookAuth fjerner gjeldende bruker av appen.
logoutUser () if (this.auth.isAuthenticated ()) if (this.user.details.hasOwnProperty ('email')) this.auth.logout (); annet this.facebookAuth.logout (); this.navCtrl.pop (); // gå tilbake til hjemmesiden
Kjører appen på en enhet
Nå kan vi prøve vår app! Først sett opp plattformen og bygg feilsøkingsapplikasjonen:
ionisk plattform legge android ionic build android
For Facebook-innlogging for å jobbe, må du levere hash av apk-filen til Facebook-appen. Du kan bestemme hash ved å utføre følgende kommando:
Deretter går du til Facebook-appens grunninnstillingsside og klikker på Legg til plattform knappen i bunnen av skjermen. Å velge Android som plattformen. Du ser da følgende skjema:
Fyll ut Google Play-pakke navn og Nøkkelhashes. Du kan sette alt du vil ha som verdien for Google Play-pakke navn så lenge det følger samme format som appene i Google Play (f.eks. com.ionicframework.authapp316678). For Nøkkelhashes, du må sette i hasen tilbake fra tidligere. Ikke glem å slå Lagre endringer når du er ferdig.
Når det er gjort, kan du nå kopiere android-debug.apk fra plattformer / android / bygge / utganger / apk mappe til enheten din, installer den, og kjør deretter.
Konklusjon og neste trinn
Det er det! I denne opplæringen har du lært hvordan du bruker Ionic Auth-tjenesten for å enkelt implementere godkjenning i din joniske app. Vi har brukt e-post / passordautentisering og Facebook-innlogging i denne opplæringen, men det finnes andre alternativer, og det bør være enkelt for deg å legge til de i appen din også.
Her er noen neste skritt du kan prøve på egenhånd som ville ta appen din til neste nivå.
Lagre ytterligere brukerinformasjon-bortsett fra e-post og passord, kan du også lagre tilleggsinformasjon for brukerne.
Bruk andre sosiale innloggingsleverandører-Som nevnt i begynnelsen av artikkelen, kan du også implementere sosial login med følgende tjenester: Google, Twitter, Instagram, LinkedIn og GitHub.
Legg til en funksjon for tilbakestilling av passord-passord tilbakestille kan implementeres ved hjelp av Ionic's tilbakestillingsskjemaer, eller du kan lage din egen.
Egendefinert autentisering-hvis du allerede har en eksisterende back-end som håndterer brukerautentisering for tjenesten din, må du kanskje implementere egendefinert godkjenning.
Det er alt for nå. Hold deg oppdatert på flere artikler om bruk av ioniske tjenester! Og i mellomtiden kan du sjekke ut noen av våre andre flotte innlegg på mobilprogramutvikling på tvers av plattformer.
Share
Accentsconagua
