Je eigen aanmeldpagina tekenen

Doel

Laat de ingang van je portal eruitzien als de rest van je site: een pagina Aanmelden, een pagina Account maken en een pagina Wachtwoord vergeten? die je zelf hebt getekend, met je landings- en prijspagina's open voor iedereen die zich nog niet heeft aangemeld.

Voordat je begint

• Een portal die op Mensen die zich aanmelden staat. Zie Bezoekers vragen zich aan te melden.
• Iemand die je Parsware-installatie beheert, heeft e-mail versturen ingericht. Een account maken en een wachtwoord opnieuw instellen sturen allebei een e-mail.

1. Teken de schermen

Teken in de Studio-app van je portal drie schermen. Noem ze zoals je wilt — deze namen zijn alleen voorbeelden:

Scherm	Wat erop staat
Aanmelden	Een e-mailvak, een wachtwoordvak, een codevak (zie hieronder), een knop Aanmelden
Account maken	Een naamvak, een e-mailvak, een wachtwoordvak, een knop Account maken
Wachtwoord vergeten	Een e-mailvak en een knop Stuur de link

Selecteer elk vak en stel Neemt in: Een e-mailadres voor het adres en Een wachtwoord voor het wachtwoord. Een wachtwoordvak verbergt wat er wordt getypt en heeft een oogje om het te tonen.

Koppel elk vak aan een statusveld — state.email, state.password — zoals bij elk formulier.

2. Geef elke knop zijn handler

Knop	Handler
Aanmelden	signIn(getState("email"), getState("password"), getState("code"), "needsCode");
Account maken	signUp(getState("name"), getState("email"), getState("password"), "sent");
Stuur de link	requestPasswordReset(getState("email"), "sent");

Het wachtwoord gaat naar het platform, precies zoals vanaf de eigen aanmeldpagina van het platform. Het wordt nooit naar iets van jou gestuurd, en niets op je pagina kan de sessie lezen die terugkomt.

Het laatste argument is de naam van een statusveld, en zo komt je pagina te weten wat er is gebeurd:

• signUp en requestPasswordReset zetten het op true zodra de e-mail is verstuurd. Zet het formulier in één stapel met Zichtbaar !state.sent, en een bericht "Kijk in je e-mail" in een andere met Zichtbaar state.sent.
• signIn zet het op true als het account aanmelden in twee stappen heeft ingeschakeld. Geef het codevak Zichtbaar state.needsCode: de bezoeker typt de zes cijfers en drukt nog een keer op Aanmelden.

Waarom niet naar een scherm "kijk in je e-mail" navigeren?

De volgende regel van een handler wordt uitgevoerd, of de aanroep nu is gelukt of niet, dus navigate(...) na signUp zou er ook naartoe gaan als het adres werd geweigerd. Door het bericht vanuit het statusveld te tonen, verschijnt het alleen als de e-mail echt is verstuurd.

Weigert het platform — een verkeerd wachtwoord, een adres dat al een account heeft — dan krijgt de bezoeker in een bericht te horen waarom, in zijn eigen taal. Daarvoor hoef je niets te tekenen.

3. Vertel de portal erover

1. Open je oplossing, kies Portals en open de portal.
2. Kies bij Aanmeldscherm het scherm Aanmelden.
3. Kies bij Open vóór aanmelden de schermen die iedereen mag zien: je landingspagina, je prijspagina, Account maken en Wachtwoord vergeten.
4. Druk op Opslaan.

Wat een bezoeker ziet

Wie zich niet heeft aangemeld, kan elk open scherm lezen. Gaat hij naar een ander scherm — via een link, een bladwijzer of een knop — dan ziet hij je scherm Aanmelden, op het adres van dat scherm. Zodra hij zich aanmeldt, wordt datzelfde adres het scherm waar hij om vroeg.

Een link Je account in je bovenbalk werkt dus voor iedereen: een onbekende krijgt het aanmelden te zien, iemand die is aangemeld zijn account.

Wie zich op het scherm Aanmelden zelf aanmeldt, gaat door naar het startscherm van je portal.

Schermen achter de aanmelding worden niet naar onbekenden gestuurd

Een scherm dat niet open is, wordt niet verborgen in de pagina — het wordt nooit gestuurd naar iemand die zich niet heeft aangemeld. Wat hij in plaats daarvan krijgt, is je aanmeldscherm.

4. Teken ook de pagina die een resetlink opent (optioneel)

Vraagt iemand een link aan om zijn wachtwoord opnieuw in te stellen, dan opent de link in de e-mail een pagina waarop hij een nieuw wachtwoord kiest. Ook die pagina kun je tekenen.

1. Teken een scherm — bijvoorbeeld Nieuw wachtwoord — met twee wachtwoordvakken gekoppeld aan state.password en state.again, en een knop Wachtwoord instellen met deze handler:

   if (getState("password") != getState("again")) {
     notifyError("The two passwords are different.");
   } else {
     resetPassword(getState("password"));
   }

2. Kies het in de portal bij Scherm voor nieuw wachtwoord. Dat vak verschijnt zodra er een Aanmeldscherm is gekozen, omdat de bezoeker daarna naar het aanmeldscherm gaat.

Je scherm ziet alleen het wachtwoord. De link draagt een geheim uit de e-mail mee. Het platform haalt dat uit het adres voordat je scherm verschijnt en voegt het zelf weer toe wanneer je knop resetPassword aanroept. Niets op je pagina kan het lezen.

Is het wachtwoord ingesteld, dan wordt de bezoeker overal afgemeld, naar je scherm Aanmelden gebracht en krijgt hij te horen dat zijn wachtwoord is ingesteld. Opent iemand Nieuw wachtwoord zonder een link te volgen, dan zegt de knop dat hij de link in zijn e-mail moet openen.

Je hoeft Nieuw wachtwoord niet toe te voegen aan Open vóór aanmelden. Wie een resetlink heeft, is per definitie afgemeld, dus de pagina wordt hem altijd getoond.

5. Teken ook de pagina die een bevestigingslink opent (optioneel)

Nadat iemand een account heeft gemaakt, opent de link in zijn bevestigingsmail een pagina die zijn adres bevestigt. Ook die pagina kun je tekenen — het is de eerste pagina die een nieuwe klant ziet.

1. Teken een scherm — bijvoorbeeld Adres bevestigd. Er valt niets op te typen, dus geef het scherm zelf een laadhandler die direct bevestigt:

   confirmEmail("confirmed");

2. Zet er een regel "Je link wordt gecontroleerd…" op met Zichtbaar !state.confirmed, en een bericht "Je adres is bevestigd" met een knop Aanmelden in een stapel met Zichtbaar state.confirmed.

3. Kies het in de portal bij Scherm voor bevestigd adres.

Je scherm ziet het geheim van de link nooit, precies zoals op de pagina voor een nieuw wachtwoord. En een bevestigingslink werkt maar één keer: hoe vaak je scherm er ook om vraagt, het platform bevestigt één keer en geeft elke volgende vraag hetzelfde antwoord. Is de link al gebruikt of verlopen, dan krijgt de bezoeker dat in een bericht te horen.

Laat Scherm voor bevestigd adres leeg om de eigen pagina van het platform te houden. Die pagina bevestigt het adres en brengt de bezoeker met een bericht terug naar je scherm Aanmelden.

6. Een nog niet bevestigd adres, en een nieuw wachtwoord (optioneel)

Wie zijn adres nog niet heeft bevestigd, kan zich niet aanmelden, en krijgt dat te horen. Geef signIn een vijfde argument — de naam van een statusveld — en dat wordt op true gezet als dat de reden is:

signIn(getState("email"), getState("password"), getState("code"), "needsCode", "unconfirmed");

Met het veld genoemd toont het platform voor deze weigering geen eigen melding: uw tekening is de melding, dus teken de woorden net zo goed als de knop. Zonder het veld krijgt de bezoeker het in een melding te horen, zoals bij elke andere weigering.

Teken een stapel met Zichtbaar state.unconfirmed met daarin een knop Stuur de bevestigingsmail opnieuw:

resendConfirmation(getState("email"), "resent");

resendConfirmation zet het veld dat je noemt zodra de aanvraag is gedaan, en zegt — net als de resetlink — "als er een account wacht op bevestiging", omdat het platform niet vertelt of dat zo is. Een scherm Bevestiging opnieuw sturen met een e-mailvak en die knop, open vóór aanmelden, helpt iemand die nooit heeft geprobeerd zich aan te melden.

Een aangemelde bezoeker kan zijn wachtwoord wijzigen op een scherm achter de ingang: het huidige, twee keer het nieuwe, en

changePassword(getState("current"), getState("password"));

Vergelijk eerst de twee nieuwe in de handler. Lukt het, dan wordt de bezoeker overal afgemeld en brengt de portal hem naar je aanmeldscherm, met een bericht dat het wachtwoord is ingesteld.

Een aangemelde bezoeker kan ook zijn naam en foto wijzigen. Op zijn accountpagina:

changeName(getState("name"), "renamed");   // "renamed" is set to true once it is saved
changePhoto();                             // opens the device's picture chooser
removePhoto();

changePhoto() opent de eigen afbeeldingskiezer van de bezoeker, verkleint de afbeelding in de browser en slaat haar op; annuleert hij, dan gebeurt er niets. Daarna tonen user.name en user.photo de nieuwe, op elk scherm. Waar user.photo leeg is, teken je een tijdelijke afbeelding in plaats van een lege.

7. Of plaats de aanmeldkit in plaats van hem te tekenen

De voorbeeldoplossing portal-sign-in-kit heeft alle schermen hierboven al getekend, als componenten: een aanmeldkaart, een kaart om een account te maken, de accountkaart met naam en foto, en aanmelden in twee stappen. De app deelt zijn componenten, dus na het importeren vindt elke app in de omgeving ze onder Componenten → Uit andere apps, in welke oplossing die app ook zit.

Een voorbeeld dat de kaarten plaatst, heeft de kit niet nodig. Het heeft van elke kaart een eigen kopie bij zich; daarom staan ze al in de designer. Importeer de kit als je de kaarten in een eigen app wilt plaatsen, of als je ze op één plek wilt wijzigen.

Plaats een kaart op een scherm en laat de eigenschappen ervan naar de status van je scherm wijzen — email naar state.email, sent naar state.sent. De kaart schrijft wat er wordt getypt in die velden, en zet haar antwoorden daar ook neer. Geef je schermen de namen die de kaarten verwachten (Sign in, Create account, Forgot password, Resend confirmation, New password, Address confirmed, Account, Change password, Sign-in security) en de links ertussen werken.

Verandert de kit, open je app dan in de designer: die meldt dat de kopieën zijn bijgewerkt. Sla op, en je portal heeft de wijziging.

De voorbeelden portal-landing-page, portal-service-desk en portal-sign-in-and-accounts plaatsen de kit allemaal op deze manier.

Wat dit niet doet

• Het verandert niet wie zich kan aanmelden. Het is hetzelfde account, dezelfde wachtwoordregels en hetzelfde aanmelden in twee stappen als op de pagina van het platform.
• Het werkt niet op een portal die iedereen kan openen. Daar valt niemand aan te melden, dus de portal weigert daar een aanmeldscherm.

Probeer het

Importeer de voorbeeldoplossing portal-sign-in-kit en daarna portal-landing-page. De landingspagina heeft de complete ingang en een accountpagina daarachter, geplaatst vanuit de kit, en een pagina How this sample works die er stap voor stap doorheen loopt.

Gerelateerd

• Bezoekers vragen zich aan te melden
• Bezoekers aanmelden in twee stappen laten inschakelen
• Een app publiceren als portal