Een van de sterke punten van Ionic is de dienstverlening die het biedt bovenop het framework. Dit omvat services voor het verifiëren van gebruikers van uw app, pushmeldingen en analyses. In deze serie leren we over die drie services door een app te maken die ze allemaal gebruikt.
De eerste service waar we naar gaan kijken, is de Auth-service. Dit stelt ons in staat om authenticatie in een Ionische app te implementeren zonder een enkele regel back-endcode te schrijven. Of als u al een bestaand authenticatiesysteem heeft, kunt u dat ook gebruiken. De service ondersteunt de volgende verificatiemethoden:
Email Wachtwoord: gebruiker wordt geregistreerd door zijn e-mailadres en wachtwoord in te voeren.
Sociale login: gebruiker wordt geregistreerd via zijn profiel sociale media. Dit omvat momenteel Facebook, Google, Twitter, Instagram, LinkedIn en GitHub.
gewoonte: gebruiker wordt geregistreerd door gebruik te maken van een bestaand authenticatiesysteem.
In deze tutorial behandelen we alleen e-mail / wachtwoord en sociale login met Facebook.
Wat je gaat creëren
Voordat we verder gaan, is het altijd goed om een algemeen idee te hebben van wat we gaan maken en hoe de stroom van de app eruit zal zien. De app bevat de volgende pagina's:
Startpagina
aanmeldingspagina
gebruikerspagina
Startpagina
De startpagina is de standaardpagina van de app waar de gebruiker kan inloggen met zijn e-mailadres / wachtwoord of zijn Facebook-account.
Wanneer de gebruiker op klikt Inloggen met Facebook knop, een scherm vergelijkbaar met het volgende wordt weergegeven, en zodra de gebruiker ermee instemt, is de gebruiker ingelogd op de app:
Aanmeldingspagina
Op de aanmeldingspagina kan de gebruiker zich registreren door zijn e-mailadres en wachtwoord in te voeren. Aanmelden op Facebook vereist geen aanmelding omdat de gebruikersinformatie wordt geleverd door de Facebook API.
Gebruikerspagina
De laatste pagina is de gebruikerspagina, die alleen zichtbaar is als de gebruiker al is ingelogd.
Bootstrap een nieuwe Ionic-app
Nu we weten wat we aan het maken zijn, gaan we aan de slag met het bouwen van onze app!
Eerst bootstrap we een nieuwe Ionische app met behulp van de lege startersjabloon:
ionische start authApp blank
Navigeer binnen de nieuw gecreëerde authApp map. Dit dient als de hoofdmap van het project.
Om snel aan de slag te gaan met de gebruikersinterface van de app, heb ik een GitHub-repo gemaakt waarin je de bronbestanden van de starter kunt vinden. Download de repo, navigeer binnen de beginner map en kopieer de src map naar de hoofdmap van het Ionische project dat u zojuist hebt gemaakt. Dit bevat de sjabloonbestanden voor elk van de pagina's van de app. Ik zal u in meer detail uitleggen wat elk van deze bestanden in een later gedeelte doet.
Bedien het project zodat u uw wijzigingen direct kunt zien tijdens het ontwikkelen van de app:
ionische serveren
Maak een Ionisch account aan
Omdat we Ionic's back-end gebruiken om gebruikersauthenticatie af te handelen, hebben we een manier nodig om de gebruikers van de app te beheren. Dit is waar het Ionic-account wordt weergegeven. Hiermee kunt u uw Ionische apps en de services die zij gebruiken beheren. Dit omvat het beheer van de Auth-service. U kunt een Ionic-account maken door naar de aanmeldingspagina van Ionic.io te gaan.
Verbind de app met Ionic Services
Navigeer vervolgens naar de hoofdmap van het project en installeer de Ionic Cloud-plug-in:
npm install @ ionic / cloud-angle - save
Met deze plug-in kan de app gemakkelijk communiceren met Ionic-services.
Hierna kunt u de app initialiseren om Ionic-services te gebruiken:
ionisch io init
Dit vraagt u om u aan te melden met uw Ionic-account. Nadat u de juiste inloggegevens hebt ingevoerd, maakt het opdrachtregelhulpprogramma automatisch een nieuw app-record onder uw Ionic-account. Dit record is verbonden met de app die je aan het ontwikkelen bent.
U kunt controleren of deze stap heeft gewerkt door de. Te openen .io-config.json bestand en de ionic.config.json bestand in de root van uw project. De APP_ID moet hetzelfde zijn als de app-ID die is toegewezen aan de nieuw gemaakte app in uw Ionic-dashboard.
Startpagina
Navigeer binnen de src / pages / home map om de bestanden voor de startpagina te zien. Open de home.html bestand en je ziet het volgende:
Ionic2 Auth E-mailWachtwoord
Deze pagina vraagt de gebruiker om zijn e-mailadres en wachtwoord of om in te loggen met zijn Facebook-account. Als de gebruiker nog geen account heeft, kunnen ze op de aanmeldknop klikken om toegang te krijgen tot de aanmeldingspagina. We gaan later terug naar de details van deze pagina terwijl we verdergaan naar het aanmeldingsgedeelte. Ik laat het je gewoon zien, zodat je de code kunt zien voor het navigeren naar de aanmeldingspagina.
Open vervolgens de home.ts het dossier. Voorlopig bevat het alleen wat boilerplate-code voor het navigeren naar de aanmeldings- en gebruikerspagina. Later gaan we terug naar deze pagina om de code toe te voegen voor het aanmelden van de gebruiker.
Gebruiker Meld je aan
De lay-out van de aanmeldingspagina is te vinden in src /pages / aanmelden pagina's / aanmelden-pagina.html. Bekijk dit bestand en u zult een eenvoudig formulier vinden met een e-mailveld en een wachtwoordveld.
Laten we vervolgens eens kijken naar de aanmelden-page.ts het dossier.
Laten we dit opsplitsen. Ten eerste importeert het de controllers voor het maken van meldingen en loaders:
import AlertController, LoadingController van 'ionic-angular';
Vervolgens importeert het de klassen die nodig zijn van de Cloud Client:
importeer Auth, UserDetails, IDetailedError van '@ ionic / cloud-angular';
De Auth dienst die zich bezighoudt met gebruikersregistratie, inloggen en uitloggen.
Gebruikersdetails is het type dat wordt gebruikt voor het definiëren van de gebruikersgegevens bij het registreren of aanmelden bij een gebruiker.
IDetailedError wordt gebruikt voor het bepalen van de exacte reden voor de opgetreden fout. Dit stelt ons in staat gebruikers gebruiksvriendelijke foutmeldingen te bieden wanneer zich een fout voordoet.
Verklaar de variabelen die moeten worden gebruikt voor het opslaan van de e-mail en wachtwoordinvoer door de gebruiker. Dit moet hetzelfde zijn als de naam die u hebt gegeven aan de waarde en ngModel attributen in het lay-outbestand.
export class SignupPage email: string; wachtwoord: string; constructor (public auth: Auth, public alertCtrl: AlertController, public loadingCtrl: LoadingController) register () ...
Het volgende is het registreren methode, die wordt aangeroepen wanneer de Registreren knop is ingedrukt. Laten we deze methode samen coderen.
Eerst wordt een lader gestart en vervolgens wordt de lader na vijf seconden automatisch gesloten (zodat in het geval er iets misgaat, de gebruiker niet wordt overgelaten aan een laadanimatie die voor altijd draait).
register () let loader = this.loadingCtrl.create (content: "Signing you up ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000);
Laten we vervolgens een object maken om de gebruikersgegevens op te slaan:
laat details weten: UserDetails = 'email': this.email, 'password': this.password;
Eindelijk bellen we de inschrijven() methode van de Auth service en lever de gebruikersgegevens als het argument. Dit levert een belofte op, waarmee we uitpakken dan(). Zodra een succesantwoord is ontvangen van de back-end, de eerste functie waaraan u doorgeeft dan() zal worden uitgevoerd; anders wordt de tweede functie uitgevoerd.
this.auth.signup (details) .then ((res) => loader.dismiss (); // verberg de loader let alert = this.alertCtrl.create (title: "You're registered!", subtitel: 'U kunt nu inloggen.', Knoppen: ['OK']); alert.present (); // show alert box, (err: IDetailedError) => ...);
Als er een foutreactie wordt ontvangen van Ionic Auth, doorlopen we de array met fouten en construeren een foutbericht op basis van het type ontvangen fout. Hier vindt u de lijst met fouten bij het aanmelden die kunnen optreden.
loader.dismiss (); var error_message = "; for (let e of err.details) if (e === 'conflict_email') error_message + =" E-mail bestaat al. "; else error_message + =" Ongeldige inloggegevens. "; let alert = this.alertCtrl.create (title: error_message, subTitle: 'Please try again.', buttons: ['OK']); alert.present ();
Zodra dat is gebeurd, kunt u de app in uw browser proberen. De e-mailadres / wachtwoord-login heeft geen plug-in of hardware-afhankelijkheden, dus je zou in staat moeten zijn om het uit te testen in de browser. U kunt dan de nieuw geregistreerde gebruiker vinden in de Auth tab van je Ionische app-dashboard.
Facebook-app instellen
De volgende stap is om de app zo in te stellen dat deze native Facebook-aanmeldingen aankan. Eerst moet je een Facebook-app maken. U kunt dat doen door u aan te melden bij uw Facebook-account en vervolgens naar de Facebook-ontwikkelaarswebsite te gaan. Maak vanaf daar een nieuwe app:
Nadat de app is gemaakt, klikt u op de Voeg product toe link op de zijbalk en selecteer Facebook Login. Dit opent de Snelle start scherm standaard. We hebben dat niet echt nodig, dus ga je gang en klik op de instellingen link direct onder de Facebook-login. Dat zou je het volgende scherm moeten laten zien:
Hier moet je de Embedded Browser OAuth Inloggen instellen en toevoegen https://api.ionic.io/auth/integrations/facebook als de waarde voor de Geldige OAuth-omleidings-URI's. Sla de wijzigingen op zodra dit is gebeurd.
Vervolgens moet je Ionic Auth verbinden met de Facebook-app die je zojuist hebt gemaakt. Ga naar uw Ionic-dashboard en selecteer de app die eerder is gemaakt (zie het gedeelte 'De app verbinden met Ionic-services'). Klik op de instellingen tab en dan Gebruikersverificatie. Onder de Sociale providers, Klik op de Opstelling knop naast Facebook:
Voer de app-ID en het app-geheim in van de Facebook-app die u eerder hebt gemaakt en druk op in staat stellen.
Installeer de Facebook-plug-in
Installeer vervolgens de Facebook-plug-in voor Cordova. In tegenstelling tot de meeste plug-ins, vereist dit dat u een beetje informatie verstrekt: de Facebook-app-ID en de app-naam. U kunt deze informatie gewoon kopiëren vanuit het dashboard van de Facebook-app.
Als dat eenmaal is gebeurd, is het laatste dat je moet doen teruggaan naar je project, open het src / app / app.module.ts bestand en voeg de CloudSettings en CloudModule diensten van de cloud-hoekige pakket:
importeer CloudSettings, CloudModule van '@ ionic / cloud-angular';
Verklaren de cloudSettings voorwerp. Dit bevat de APP_ID van uw Ionische app en eventuele aanvullende machtigingen (bereik) die u van de gebruikers van uw app wilt vragen. Standaard vraagt dit al om de e-mail en publiek profiel.
Later, wanneer u andere sociale providers toevoegt aan uw app, wordt een vergelijkbaar proces gevolgd.
Aanmelden van de gebruiker
Nu is het tijd om terug te gaan naar de startpagina en een paar wijzigingen aan te brengen. De HTML-sjabloon heeft al alles wat we nodig hebben, dus we hoeven alleen het script bij te werken. Ga je gang en open de src / pages / home / home.ts het dossier. Bovenaan het bestand importeert u het volgende als aanvulling op wat u al eerder had:
importeer NavController, AlertController, LoadingController van 'ionic-angular'; importeer Auth, FacebookAuth, Gebruiker, IDetailedError van '@ ionic / cloud-angular'; importeer UserPage uit '... / user-page / user-page';
Bepaal binnen de constructor of een gebruiker momenteel is aangemeld of niet. Als een gebruiker al is ingelogd, gaan we automatisch naar de gebruikerspagina.
exportklasse HomePage // declareren variabelen voor het opslaan van de gebruiker en e-mail die wordt ingevoerd door de e-mail van de gebruiker: string; wachtwoord: string; constructor (public navCtrl: NavController, public auth: Auth, public facebookAuth: FacebookAuth, public user: User, public alertCtrl: AlertController, public loadingCtrl: LoadingController) if (this.auth.isAuthenticated ()) this.navCtrl.push ( userpage); ...
Vervolgens, wanneer de Log in knop wordt ingedrukt, beginnen we met het weergeven van een laadanimatie.
Zoals je zag in de src / pages / home / home.html bestand eerder, een tekenreeks die aangeeft op welke inlogknop is gedrukt (ofwel de e-mail / wachtwoord inlogknop of de Facebook-aanmeldknop) wordt doorgegeven aan de Log in() functie. Hiermee kunnen we bepalen welke inlogcode moet worden uitgevoerd. Als het type is 'FB', het betekent dat op de Facebook-inlogknop is gedrukt, dus we bellen naar Log in() methode van de FacebookAuth service.
if (type == 'fb') this.facebookAuth.login (). then ((res) => loader.dismiss (); this.navCtrl.push (UserPage);, (err) => / / verberg de lader en navigeer naar de gebruikerspagina loader.dismiss (); let alert = this.alertCtrl.create (title: "Fout bij inloggen op Facebook.", subtitel: 'Probeer opnieuw.', knoppen: [ 'OK']); alert.present (););
Anders werd op de inlogknop voor e-mail / wachtwoord gedrukt en moesten we de gebruiker aanmelden met de gegevens die op het aanmeldingsformulier waren ingevoerd.
Bekijk de definitieve versie van het bestand home.ts om te zien hoe alles eruit moet zien.
Gebruikerspagina
De laatste pagina is de gebruikerspagina.
De lay-out, in src / pages / user-page / user-pagina.html, toont de profielfoto van de gebruiker en zijn gebruikersnaam. Als de gebruiker zich heeft aangemeld met zijn / haar e-mailadres / wachtwoord, is de gebruikersnaam het e-mailadres van de gebruiker en is de profielfoto de standaardprofielfoto die door Ionic is toegewezen. Aan de andere kant, als de gebruiker zich heeft aangemeld bij Facebook, zal zijn profielfoto hun Facebook-profielfoto zijn en hun gebruikersnaam is hun volledige naam.
Bekijk vervolgens de user-page.ts het dossier.
Onder de ionische hoekige pakket, we importeren het Platform dienst naast NavController. Dit wordt gebruikt om informatie over het huidige apparaat te krijgen. Het heeft ook methoden om naar hardwaregebeurtenissen te luisteren, bijvoorbeeld wanneer op de hardware-terugknop op Android wordt gedrukt.
importeer NavController, Platform van 'ionic-angular';
En voor de cloud-hoekige pakket, we hebben de Auth, FacebookAuth, en Gebruiker Diensten:
importeer Auth, FacebookAuth, Gebruiker uit '@ ionic / cloud-angular';
Bepaal binnen de klasse-constructor of de gebruiker zich heeft aangemeld met hun e-mail- / wachtwoordgebruiker of hun Facebook-account. Vul de gebruikersnaam en foto gebaseerd op dat. Stel vervolgens een functie toe die moet worden uitgevoerd wanneer de knop Hardware terug wordt ingedrukt. De registerBackButtonAction () accepteert twee argumenten: de uit te voeren functie en de prioriteit. Als er meer dan één in de app is, wordt alleen de hoogste prioriteit uitgevoerd. Maar omdat we dit alleen in dit scherm nodig hebben, hebben we het gewoon ingestopt 1.
exportklasse UserPage openbare gebruikersnaam; openbare foto; constructor (public navCtrl: NavController, public auth: Auth, public facebookAuth: FacebookAuth, public user: User, public platform: Platform) if (this.user.details.hasOwnProperty ('email')) this.username = this. user.details.email; this.photo = this.user.details.image; else this.username = this.user.social.facebook.data.full_name; this.photo = this.user.social.facebook.data.profile_picture; this.platform.registerBackButtonAction (() => this.logoutUser.call (this);, 1);
De logoutUser () methode bevat de logica voor het loggen van de gebruiker. Het eerste wat het doet, is bepalen of een gebruiker daadwerkelijk is aangemeld. Als een gebruiker is aangemeld, bepalen we of de gebruiker een Facebook-gebruiker of een e-mail- / wachtwoordgebruiker is.
Dit kan gedaan worden door de e-mail eigendom onder de gebruikersdetails voorwerp. Als deze eigenschap bestaat, betekent dit dat de gebruiker een e-mail- / wachtwoordgebruiker is. Dus als het anders is, nemen we aan dat het een Facebook-gebruiker is. Oproep aan de uitloggen() methode in Auth en FacebookAuth wist de huidige gebruiker van de app.
logoutUser () if (this.auth.isAuthenticated ()) if (this.user.details.hasOwnProperty ('email')) this.auth.logout (); else this.facebookAuth.logout (); this.navCtrl.pop (); // ga terug naar de startpagina
De app op een apparaat uitvoeren
Nu kunnen we onze app uitproberen! Stel eerst het platform in en bouw de debug-apk:
ionisch platform add android ionic build android
Om de login op Facebook te laten werken, moet je de hash van het apk-bestand aan de Facebook-app leveren. U kunt de hash bepalen door de volgende opdracht uit te voeren:
Ga vervolgens naar de pagina met basisinstellingen van uw Facebook-app en klik op de Platform toevoegen knop onderaan in het scherm. kiezen Android als het platform. U ziet dan het volgende formulier:
Vul de Google Play Package Name en Key Hashes. Je kunt alles wat je wilt plaatsen als de waarde voor de Google Play Package Name zolang het dezelfde indeling volgt als de apps in Google Play (bijv. com.ionicframework.authapp316678). Voor de Key Hashes, je moet de hash inleveren die eerder is geretourneerd. Vergeet niet te raken Wijzigingen opslaan wanneer je klaar bent.
Zodra dat is gebeurd, kunt u nu het kopiëren android-debug.apk van de platforms / android / build / uitgangen / APK map naar uw apparaat, installeer het en voer het vervolgens uit.
Conclusie en volgende stappen
Dat is het! In deze zelfstudie hebt u geleerd hoe u gebruik kunt maken van de Ionic Auth-service om verificatie eenvoudig in uw Ionic-app te implementeren. We hebben e-mail / wachtwoord-authenticatie en Facebook-login gebruikt in deze tutorial, maar er zijn nog andere opties, en het zou gemakkelijk moeten zijn om die ook toe te voegen aan uw app.
Hier zijn enkele volgende stappen die u zelf zou kunnen proberen om uw app naar een hoger niveau te tillen.
Bewaar extra gebruikersinformatie-behalve de e-mail en het wachtwoord kunt u ook aanvullende informatie voor uw gebruikers opslaan.
Gebruik andere aanbieders van sociale login-zoals vermeld aan het begin van het artikel, kunt u ook sociale login implementeren met de volgende services: Google, Twitter, Instagram, LinkedIn en GitHub.
Voeg een functie voor wachtwoordherstel toe-wachtwoord resets kunnen worden geïmplementeerd met behulp van de formulieren voor wachtwoordherstel van Ionic, of u kunt uw eigen instellingen maken.
Aangepaste authenticatie-als u al een bestaande back-end hebt die de gebruikersverificatie voor uw service afhandelt, moet u mogelijk aangepaste verificatie implementeren.
Dat is het voor nu. Blijf op de hoogte voor meer artikelen over het gebruik van Ionic-services! En bekijk in de tussentijd enkele van onze andere geweldige berichten over platformonafhankelijke ontwikkeling van mobiele apps.
Share
Accentsconagua
