Direkt zum Hauptinhalt

Eine eigene Anmeldeseite zeichnen

Ziel​

Der Weg in Ihr Portal soll aussehen wie der Rest Ihrer Website: eine Seite Anmelden, eine Seite Konto erstellen und eine Seite Kennwort vergessen?, die Sie gezeichnet haben – während Ihre Start- und Preisseiten für jeden offen bleiben, der sich noch nicht angemeldet hat.

Bevor Sie beginnen​

  • Ein Portal, das auf Angemeldete Personen eingestellt ist. Siehe Besucher zur Anmeldung auffordern.
  • Jemand, der Ihre Parsware-Installation betreibt, hat den E-Mail-Versand eingerichtet. Sowohl das Erstellen eines Kontos als auch das Zurücksetzen eines Kennworts senden eine E-Mail.

1. Die Bildschirme zeichnen​

Zeichnen Sie in der Studio-App Ihres Portals drei Bildschirme. Benennen Sie sie, wie Sie möchten – diese Namen sind nur Beispiele:

BildschirmWas darauf ist
AnmeldenEin E-Mail-Feld, ein Kennwortfeld, ein Codefeld (siehe unten), eine Schaltfläche Anmelden
Konto erstellenEin Namensfeld, ein E-Mail-Feld, ein Kennwortfeld, eine Schaltfläche Konto erstellen
Kennwort vergessenEin E-Mail-Feld und eine Schaltfläche Link senden

Wählen Sie jedes Feld aus und setzen Sie Nimmt: Eine E-Mail-Adresse für die Adresse und Ein Kennwort für das Kennwort. Ein Kennwortfeld verbirgt, was eingegeben wird, und hat ein Auge, um es anzuzeigen.

Binden Sie jedes Feld an ein Zustandsfeld – state.email, state.password –, wie bei jedem anderen Formular.

2. Jeder Schaltfläche ihren Handler geben​

SchaltflächeHandler
AnmeldensignIn(getState("email"), getState("password"), getState("code"), "needsCode");
Konto erstellensignUp(getState("name"), getState("email"), getState("password"), "sent");
Link sendenrequestPasswordReset(getState("email"), "sent");

Das Kennwort geht an die Plattform, genau wie von der eigenen Anmeldeseite der Plattform aus. Es wird nie an etwas von Ihnen gesendet, und nichts auf Ihrer Seite kann die Sitzung lesen, die zurückkommt.

Das letzte Argument ist der Name eines Zustandsfelds, und darüber erfährt Ihre Seite, was passiert ist:

  • signUp und requestPasswordReset setzen es auf true, sobald die E-Mail verschickt ist. Legen Sie das Formular in einen Stapel mit Angezeigt !state.sent und eine Nachricht „Prüfen Sie Ihre E-Mails“ in einen anderen mit Angezeigt state.sent.
  • signIn setzt es auf true, wenn für das Konto die Anmeldung in zwei Schritten aktiviert ist. Geben Sie dem Codefeld Angezeigt state.needsCode: Der Besucher tippt die sechs Ziffern ein und drückt erneut Anmelden.
Warum nicht zu einem Bildschirm „Prüfen Sie Ihre E-Mails“ navigieren?

Die nächste Zeile eines Handlers läuft, ob der Aufruf funktioniert hat oder nicht, also würde navigate(...) nach signUp auch dann dorthin führen, wenn die Adresse abgelehnt wurde. Wird die Nachricht über das Zustandsfeld angezeigt, erscheint sie nur, wenn die E-Mail wirklich verschickt wurde.

Lehnt die Plattform ab – ein falsches Kennwort, eine Adresse, für die es schon ein Konto gibt –, erfährt der Besucher den Grund in einer Meldung, in seiner Sprache. Dafür müssen Sie nichts zeichnen.

3. Dem Portal davon erzählen​

  1. Öffnen Sie Ihre Lösung, wählen Sie Portale aus und öffnen Sie das Portal.
  2. Wählen Sie unter Anmeldebildschirm den Bildschirm Anmelden aus.
  3. Wählen Sie unter Vor der Anmeldung geöffnet die Bildschirme aus, die jeder sehen darf: Ihre Startseite, Ihre Preisseite, Konto erstellen und Kennwort vergessen.
  4. Drücken Sie Speichern.

Was ein Besucher sieht​

Wer sich nicht angemeldet hat, kann jeden offenen Bildschirm lesen. Geht er zu einem anderen Bildschirm – über einen Link, ein Lesezeichen oder eine Schaltfläche –, sieht er Ihren Bildschirm Anmelden, unter der Adresse dieses Bildschirms. Sobald er sich anmeldet, wird dieselbe Adresse zu dem Bildschirm, den er angefordert hat.

Ein Link Ihr Konto in Ihrer oberen Leiste funktioniert also für alle: Einem Fremden zeigt er die Anmeldung, einem Angemeldeten das Konto.

Wer sich direkt auf dem Bildschirm Anmelden anmeldet, gelangt weiter zum Startbildschirm Ihres Portals.

Bildschirme hinter der Anmeldung werden nicht an Fremde gesendet

Ein Bildschirm, der nicht offen ist, wird nicht in der Seite versteckt – er wird an jemanden, der sich nicht angemeldet hat, gar nicht erst gesendet. Was dieser stattdessen erhält, ist Ihr Anmeldebildschirm.

Wenn jemand einen Link zum Zurücksetzen des Kennworts anfordert, öffnet der Link in der E-Mail eine Seite, auf der er ein neues Kennwort wählt. Auch diese Seite können Sie zeichnen.

  1. Zeichnen Sie einen Bildschirm – etwa Neues Kennwort – mit zwei Kennwortfeldern, gebunden an state.password und state.again, und einer Schaltfläche Kennwort festlegen mit diesem Handler:

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

  2. Wählen Sie ihn im Portal unter Bildschirm für neues Kennwort aus. Dieses Feld erscheint, sobald ein Anmeldebildschirm gewählt ist, denn zum Anmeldebildschirm geht der Besucher als Nächstes.

Ihr Bildschirm sieht immer nur das Kennwort. Der Link trägt ein Geheimnis aus der E-Mail. Die Plattform nimmt es aus der Adresse, bevor Ihr Bildschirm erscheint, und fügt es selbst wieder hinzu, wenn Ihre Schaltfläche resetPassword aufruft. Nichts auf Ihrer Seite kann es lesen.

Ist das Kennwort festgelegt, wird der Besucher überall abgemeldet, zu Ihrem Bildschirm Anmelden gebracht und erfährt, dass sein Kennwort festgelegt ist. Öffnet jemand Neues Kennwort, ohne einem Link gefolgt zu sein, sagt ihm die Schaltfläche beim Drücken, dass er den Link in seiner E-Mail öffnen soll.

Sie müssen Neues Kennwort nicht zu Vor der Anmeldung geöffnet hinzufügen. Wer einen Zurücksetzen-Link hat, ist per Definition abgemeldet, daher wird ihm die Seite immer angezeigt.

Nachdem jemand ein Konto erstellt hat, öffnet der Link in seiner Bestätigungs-E-Mail eine Seite, die seine Adresse bestätigt. Auch diese Seite können Sie zeichnen – es ist die erste Seite, die ein neuer Kunde sieht.

  1. Zeichnen Sie einen Bildschirm – etwa Adresse bestätigt. Darauf gibt es nichts einzugeben, also geben Sie dem Bildschirm selbst einen Lade-Handler, der sofort bestätigt:

    confirmEmail("confirmed");

  2. Setzen Sie eine Zeile „Ihr Link wird geprüft…“ mit Angezeigt !state.confirmed darauf und eine Nachricht „Ihre Adresse ist bestätigt“ mit einer Schaltfläche Anmelden in einen Stapel mit Angezeigt state.confirmed.

  3. Wählen Sie ihn im Portal unter Bildschirm „Adresse bestätigt“ aus.

Ihr Bildschirm sieht das Geheimnis des Links nie, genau wie bei der Seite für das neue Kennwort. Und ein Bestätigungslink funktioniert nur einmal: Wie oft Ihr Bildschirm auch fragt, die Plattform bestätigt einmal und gibt jeder späteren Anfrage dieselbe Antwort. Wurde der Link bereits verwendet oder ist er abgelaufen, erfährt der Besucher das in einer Meldung.

Lassen Sie Bildschirm „Adresse bestätigt“ leer, um die eigene Seite der Plattform zu behalten. Diese Seite bestätigt die Adresse und bringt den Besucher mit einer Meldung zurück zu Ihrem Bildschirm Anmelden.

6. Eine noch nicht bestätigte Adresse und ein neues Kennwort (optional)​

Wer seine Adresse noch nicht bestätigt hat, kann sich nicht anmelden, und erfährt das auch. Geben Sie signIn ein fünftes Argument – den Namen eines Zustandsfelds –, und es wird auf true gesetzt, wenn das der Grund ist:

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

Ist das Feld angegeben, zeigt die Plattform für diese Ablehnung keine eigene Meldung – Ihre Zeichnung ist die Meldung, zeichnen Sie also die Worte ebenso wie die Schaltfläche. Ohne das Feld erfährt der Besucher es in einer Meldung, wie bei jeder anderen Ablehnung.

Zeichnen Sie einen Stapel mit Angezeigt state.unconfirmed, der eine Schaltfläche Bestätigungs-E-Mail erneut senden enthält:

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

resendConfirmation setzt das genannte Feld, sobald die Anfrage gestellt ist, und sagt – wie der Zurücksetzen-Link – „falls ein Konto auf Bestätigung wartet“, denn die Plattform verrät nicht, ob es eines gibt. Ein Bildschirm Bestätigung erneut senden mit einem E-Mail-Feld und dieser Schaltfläche, vor der Anmeldung geöffnet, hilft jemandem, der nie versucht hat, sich anzumelden.

Ein angemeldeter Besucher kann sein Kennwort ändern, auf einem Bildschirm hinter dem Eingang: das aktuelle, das neue zweimal, und

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

Vergleichen Sie vorher im Handler die beiden neuen. Bei Erfolg wird der Besucher überall abgemeldet, und das Portal bringt ihn zu Ihrer Anmeldung, mit einer Meldung, dass das Kennwort festgelegt ist.

Ein angemeldeter Besucher kann auch seinen Namen und sein Foto ändern. Auf seiner Kontoseite:

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

changePhoto() öffnet die eigene Bildauswahl des Besuchers, verkleinert das Bild im Browser und speichert es; bricht er ab, passiert nichts. Danach zeigen user.name und user.photo die neuen Werte, auf jedem Bildschirm. Wo user.photo leer ist, zeichnen Sie einen Platzhalter statt eines leeren Bildes.

7. Oder das Anmelde-Kit platzieren, statt es zu zeichnen​

Die Beispiellösung portal-sign-in-kit hat jeden der obigen Bildschirme bereits gezeichnet, als Komponenten: eine Anmeldekarte, eine Karte zum Erstellen eines Kontos, die Kontokarte mit Name und Foto sowie die Anmeldung in zwei Schritten. Ihre App teilt ihre Komponenten, sodass nach dem Import jede App der Umgebung sie unter Komponenten → Aus anderen Apps findet, gleich in welcher Lösung sie ist.

Ein Beispiel, das die Karten platziert, braucht das Kit nicht importiert. Es trägt eine eigene Kopie jeder Karte mit sich, weshalb sie bereits in seinem Designer sind. Importieren Sie das Kit, wenn Sie die Karten in einer eigenen App platzieren oder sie an einer Stelle ändern möchten.

Platzieren Sie eine Karte auf einem Bildschirm und richten Sie ihre Eigenschaften auf den Zustand Ihres Bildschirms – email auf state.email, sent auf state.sent. Die Karte schreibt, was eingegeben wird, in diese Felder und legt auch ihre Antworten dort ab. Benennen Sie Ihre Bildschirme so, wie die Karten es erwarten (Sign in, Create account, Forgot password, Resend confirmation, New password, Address confirmed, Account, Change password, Sign-in security), und die Links zwischen ihnen funktionieren.

Ändert sich das Kit, öffnen Sie Ihre App im Designer: Er meldet, dass seine Kopien aktualisiert wurden. Speichern Sie sie, und Ihr Portal hat die Änderung.

Die Beispiele portal-landing-page, portal-service-desk und portal-sign-in-and-accounts platzieren das Kit alle auf diese Weise.

Was dies nicht tut​

  • Es ändert nicht, wer sich anmelden kann. Es ist dasselbe Konto, dieselben Kennwortregeln und dieselbe Anmeldung in zwei Schritten wie auf der Seite der Plattform.
  • Es funktioniert nicht in einem Portal, das jeder öffnen kann. Dort gibt es niemanden, der sich anmelden könnte, daher lehnt das Portal dort einen Anmeldebildschirm ab.

Probieren Sie es aus​

Importieren Sie die Beispiellösung portal-sign-in-kit und dann portal-landing-page. Die Startseite hat den gesamten Eingang und dahinter eine Kontoseite, platziert aus dem Kit, sowie eine Seite How this sample works, die Schritt für Schritt durch alles führt.

Verwandte Seiten​