Il login

Principio

Il login XTEND è basato sulla chiamata di un web service mediante una azione utente.

Questo documento descrive l'applicazione della funzione di login nel sito di riferimento ASAMPLE.

In questo esempio, il sotto-programma di login valida la firma e restituisce le informazioni sull'account utente:

• La sua identità che verrà memorizzata nell'entità sessione
• L'elenco degli indirizzi di spedizione che verrà memorizzato sotto forma di entità di tipo 'Azione' per poter essere visualizzato

Se il sito XTEND è stato creato da una copia del sito ASAMPLE, le schede di parametrizzazione sono già create.

Altrimenti è possibile sia crearle che copiarle singolarmente a partire dal sito ASAMPLE con il bottone di azione X3 'Copia'.

Procedura

1. Creazione di una 'pagina web' (ALOGIN) per l'inserimento del codice utente/Password.
    Questa pagina sarà visualizzata in modalità protetta (HTTPS)

2. Creazione di una interfaccia (AXTDLOGIN) per la chiamata del web service di login

3. Creazione di entità (ASHIPADDR) per memorizzare le informazioni dell'account utente

4. Creazione di una 'azione Web' di tipo 'Login' (ASESSLOGIN)
    Parametri in input: il codice utente e la password.
    Questi parametri saranno 'mappati' sui parametri in input al web service.

5. Creazione di un token 'link dinamico' (ADLKLOGIN)
    Inserito nella pagina HTML (bottone 'Valida') per attivare l'azione utente

6. Creazione di una 'pagina web' (AUSERACCOUNT)
    Visualizza le informazioni dell'account cliente restituite dal sotto-programma di login
    Questa pagina verrà visualizzata in modalità protetta (HTTPS)

Gestione del login per il sito ASAMPLE

Funzionamento del programma di login per il sito ASAMPLE

Le informazioni di login XTEND sono gestite nella scheda utente X3.

Un utente XTEND è dichiarato come un utente X3 per il quale è stata contrassegnata la casella 'Connessione sito web'.

Il suo profil Safe X3 Was è recuperato ed alimentato nell'entità ASESSION.AUSERPROFILE.

Parametrizzazione X3

Fase 1 - Creazione dell'interfaccia

Il programma 4GL

Il file AYTXTLOGIN.src contiene i sorgenti del programma di login.

I dati dell'account utente sono scritti 'nel codice' nel programma.

L'account sage/sage permette di effettuare il login senza controllo della password.

Esempio
    Programma del login(info) del sito ATEMPLATE

La scheda sotto-programma

La scheda sotto-programma AYTXTLOGIN descrive i parametri del sotto-programma.

Vedere il documento azione utente per maggiori informazioni sul programma di login.

Gli altri parametri (AX*) sono i parametri obbligatori che devono implementare ogni sotto-programma di login XTEND.

Prima di continuare bisogna assicurarsi che il sotto-programma sia pubblicato con il nome di pubblicazione AXTDLOGIN

La scheda interfaccia

   1. Crea una scheda Interfaccia AXTDLOGIN di tipo 'Azione sotto-programma'

   2. Selezionare il nome di pubblicazione AXTDLOGIN

   3. Verificare che l'accesso non sia protetto

   4. Contrassegnare la visualizzazione di tutti i messaggi

   5. Registrare e validare

   6. Generare l'accesso

• In questo esempio sono stati raggruppati i parametri relativi agli indirizzi di spedizione (SHIP*) sotto il gruppo di nome X3LOG. Si sarebbe potuto usare un'altro gruppo se la dimensione fosse stata diversa dal gruppo che contiene gli altri parametri AX3*.
• Gli altri parametri (AX*) sono i parametri obbligatori che devono implementare ogni sotto-programma di login XTEND.
• AXLOGCOD / AXLOGVAL: Informazioni complementari sull'utente, di tipo chiave/valore, che saranno memorizzate nella sessione XTEND (blocco ASESSION).
  Es: NOME/DELPONTE,TEL/0476232526,COMPANY/SAGE...

7. Generare tutti i campi dell'interfaccia
    Vedere il menù 'Strumenti/Creazione token campo'

Campi non descritti nell'interfaccia

I campi relativi all'identità dell'utente sono passati sotto forma di elenco chiave/valore (AXPARCOD/AXPARVAL) e non sono visibili nei parametri del sotto programma (NAME, FIRSTNAME, PHONE, EMAIL).

E' quindi necessario dichiarare questi campi mediante la funzione XTEND 'Token campo'.

Fase 2 - Creazione delle entità

Identità utente

I campi presenti nei parametri AXPARCOD/AXPARVAL (chiave/valore) sono aggiunti automaticamente dal server XTEND nella sessione utente ASESSION.

L'utilizzo di chiave/valore permette di limitare il numero di parametri del sotto-programma.

Indirizzi di consegna

Creare l'entità ASHIPADDR di tipo Azione.

Vedere il menù 'Strumenti/Aiuto alla compilazione'

Questa entità sarà in seguito utilizzata nel mapping restituito dall'azione di login.

Fase 3 - Creazione dell'azione web

Dichiarazione dei parametri

Creare una azione ASESSLOGIN di tipo Login con come parametri i campi AXUSERCODE e AXPWD in inserimento.

Cancellazione all'inizio'
    deselezionata: per cancellare le entità solo se il login è validato.

Avanzamento dell'attività
    Si: affinchè ogni chiamata dell'azione sia registrata nel file di log

Attivo su reload
    No: per non richiamare il login se l'utente preme F5

Mapping dei parametri in input

Si tratta di far corrispondere i campi XTEND con i parametri di chiamata del web service di login.

In questo caso bisogna fare solo un mapping dei parametri dell'azione AXUSERCODE, AXPWD.

Per 'mappare' i parametri dell'azione non si indica il codice dell'entità.

Mapping dei parametri in output

Si tratta di creare l'entità di tipo Azione ASHIPADDR partendo dai dati ottenuti da X3.

Tale entità è di tipo Multi in quanto è basata su un gruppo di parametri (AXLOG_PAR) multi-dimensionato.

Le entità di tipo Azione sono salvate in memoria durante tutta la durata della sessione utente.

Sono ricreate automaticamente ad ogni chiamata dell'azione.

Fase 4 - Creazione di un link dimanico

Il link dinamico ADLKLOGIN è il token che sarà inserito nel bottone (tag <input>) di login. Permette di definire la pagina di destinazione (Pagina corrente in questo caso), di associare l'azione ASESSLOGIN e di valorizzare i parametri.

Parametri generali

Avanzamento dell'attività
    Si: affinchè ogni clic sul link venga registrato nel file di log

Forza modo http post
    No: Poiché una azione con i parametri è associata al link dinamico, la richiesta verrà inviata automaticamente in modalità POST

Pagina corrente
    Si: Il risultato (informazione utente) è visualizzato nella pagina corrente

Azione
    Codice dell'azione da attivare (ASESSLOGIN)

Controlla campi web
    Si:  per il parametro codice utente per controllare automaticamente i campi in inserimento obbligatorio 
    No:  per il parametro password poiché autorizza l'inserimento di password a blank

Parametri dell'azione

Si tratta di dichiarare tutti i parametri dell'azione di login ed indicare la maniera in cui si vuole valorizzarli.

AXUSERCODE, AXPWD
    'Campi Web Obbl' : Inserimento obbligatorio mediante un campo web
    'Campo web': contiene il nome del tag input (attribut name)

Il controllo dell'inserimento è attivo solo se l'opzione 'Folder Generale/Controlla campi web' è contrassegnata.

La richiesta sarà indirizzata verso il server XTEND solo se:

• l'utente ha valorizzato tutti i campi obbligatori
• i dati inseriti sono corretti per i campi di tipo data e numerico.

Il controllo è effettuato mediante la libreria JavaScript di XTEND.

Fase 5 - Creazione dei token blocco

Il token blocco ABLKSHIPADDR è utilizzato per visualizzare le entità ASHIPADDR che rappresentano gli indirizzi di consegna.

Tipo
    Multi record: Effettua una iterazione su tutte le entità ASHIPADDR e posiziona ogni entità in cima (top) alla sequenza del contesto di dati poi esegue i token figli

Nessun dato
    Non visualizzare nulla: Se l'entità ASHIPADDR non esiste, il blocco ed i token 'figli' sono ignorati

Entità
    ASHIPADDR: Codice dell'entità da visualizzare

Riga per blocco
    10: Visualizza 10 entità ASHIPADDR al massimo nella pagina

Cella per riga
    1: Visualizza un'entità per riga

Stile per riga
    oddLine e evenLine: Stili da definire nel file 'my.css' per alternare il colore dello sfondo delle righe

Non è possibile definire i criteri di selezione sui blocchi che selezionano entità salvate in memoria del server XTEND, cioè di tipo sessione o Azione. Il blocco seleziona automaticamente tutte le entità.

I criteri di selezione si applicano solo alle entità di tipo 'Accesso dati'.

Fase 6 - Creazione delle pagine web

Login

Creare la pagina web ALOGIN.

Pagina di défaut
    Associare il file login.html.
    Il file deve essere presente sul server X3 e può essere selezionato tramite il tasto F12.

Protocollo
    Https: Per indicare che bisogna criptare i dati della richiesta Http (Vedere configurazione HTTPS)

Blocco principale e blocco di sfondo
   Nessuno

Accesso protetto
    No: Per indicare che questa pagina è in accesso libero (anonimo)

Avanzamento dell'attività
    Si: Affinché la visualizzazione della pagina sia registrata nel file di log

Account utente

Creare la pagina web AUSERACCOUNT.

Pagina di défaut
    Associare il file account.html

Protocollo
    Https: Per indicare che bisogna criptare i dati della richiesta

Accesso protetto
    Si: Per bloccare l'accesso a questa pagina agli utenti anonimi

Avanzamento dell'attività
    Si: Affinché la visualizzazione della pagina sia registrata nel file di log

Fase 7 - Validazione del sito

Dopo la modifica dei parametri X3 si raccomanda di validare tutto il sito per mezzo della funzione per ricostruire il dizionario del server XTEND mediante la funzione 'Validazione sito Web(AYTFCYGEN)'.

Vericare attentamente che il sito XTEND sia pubblicato, ovvero che il campo 'Pubblica sito' della scheda 'Sito web' sia contrassegnato.

Pagina HTML

Link verso la pagina

Inserimento del token 'pagina web' ALOGIN nel menù a sinistra per visualizzare la pagina.

    <TD class="button"><A adx="ALOGIN">Login</A></TD>

Per effettuare un link semplice (senza azione né selezione) verso una pagina web mediante un tag anchor basta inserire un token di tipo 'pagina web' nel tag (<a adx="PaginaWeb"></a>) per limitare il numero di token 'link dinamici'.

Gestione del menù login/logout

Il contenuto del menù di sinistra è modificato in modo dinamico a seconda che l'utente sia 'signed' o meno.

Per fare ciò è stato usato il token link condizionatoADISPUSERLOGGEDIN che visualizza il contenuto del blocco (elementi figli) se l'utente è autenticato.

 <!adx="ADISPUSERLOGGEDIN">
 <!--Left menu for authenticated user-->
        <TR>
          <TD class="button">
                <A adx="AUSERACCOUNT">Account</A>       
          </TD>
        </TR>
        <TR>
          <TD class="button">
                <A adx="ADLKLOGOUT">Logout</A> 
          </TD>
        </TR>
<!adx="ADISPUSERLOGGEDIN">
<!adx="ADISPUSERLOGGEDIN:xnot">
 <!--Left menu for anonymous user-->
        <TR>
          <TD class="button">
                         <A adx="ALOGIN">Login</A>
          </TD>
        </TR>
<!adx="ADISPUSERLOGGEDIN">

Inserimento del login

Creazione dei campi di inserimento<input type="text"> del codice utente e password.

Se non si specifica l'attribut name in un tag <input> serà generato automaticamente con il nome del token adx.

Il parametro xrc(<input adx="TokenName:xrc">) è utilizzato per rivisualizzare l'ultimo valore inserito in caso di errore di inserimento individuato dal server XTEND o dall'applicazione X3. Permette di evitare la perdita dei dati inseriti.

Per l'inserimento della password si aggiunge l'attribut name="AXPWD" in quanto non è necessario inserire un token adx per rivisualizzare la password.

Creazione di un bottone <input type="button"> 'Valida' ed inserimento del token 'ADLKLOGIN' che attiverà l'azione di login.

Tutti i bottoni <input type="button"> che contengono i token adx devono essere di tipo 'button'.
Il tipo submit non deve essere utilizzato.

  <tr>
    <td><b>Codice:</b></td>
    <td> <input name="AXUSERCODE" type="text" adx="AXUSERCODE:xrc"></td>
    <td><input type="button" value="Valida" class="button" adx="ADLKLOGIN"></td>
  </tr>
  <tr>
    <td><b>Password:</b></td>
    <td colspan="2"> <input type="password" name="AXPWD">    </td>
  </tr>

Il token ADLKLOGIN visualizza la pagina AXUSERACCOUNT se la firma è validata dal sotto-programma X3.

Un'azione utente è considerata come validata se la chiamata del web service non ha restituito nessun messaggio di errore.

I messaggi di errore sono postati in 4GL mediante il sotto programma ADDMESSERR (Call ADDMESSERR("Messaggio") From AWEB)

La visualizzazione dei messaggi X3 è effettuata mediante il token AXUSERMSG.

Es: <span id="userMsg" class="userMsg" adx="aMsgUser"></span>

Visualizzazione account utente

La pagina AUSERACCOUNT visualizza le informazioni dell'account utente. I dati provengono dal mapping dei parametri restituiti dal sotto-programma di login:

• identità dell'utente memorizzato ASESSION
• elenco degli indirizzi (entità ASHIPADDR)

La visualizzazione dei dati di identità consiste nel posizionare dei token 'campo web' senza specificare il contesto di dati (token blocco) poiché i dati della sessione sono sempre disponibili in una pagina web.

  <tr>
        <td><b>Cogome:</b></td>
        <td adx="NAME"></td>
  </tr><tr>
        <td><b>Nome:</b></td>
        <td adx="FIRSTNAME"></td>
  </tr><tr>
        <td><b>EMail:</b></td>
        <td adx="EMAIL"></td>
  </tr><tr>
        <td><b>Tel.:</b></td>
        <td adx="PHONE"></td>
  </tr>

La visualizzazione dell'elenco degli indirizzi di consegna consiste nel posizionare il blocco ABLKSHIPADDR che effettua una iterazione sull'elenco degli indirizzi e permette di creare tante righe nel riquadro quanti gli indirizzi in elenco.

Per ogni riga si creano tante celle con un tag adx="SHIP*" quanti i dati da visualizzare.

<table width="100%" border="1">
    <tr  class="tabTitle">
        <th><small><b>Indirizzo1</b></small></th>
        <th><small><b>Indirizzo2</b></small></th>
        <th><small><b>Città</b></small></th>
        <th><small><b>CAP</b></small></th>
    </tr>    
<!adx="ABLKSHIPADDR">  
    <tr adx="aLineStyle:xattr=Class">
        <td><small adx="SHIPADR1"></small></td>
        <td><small adx="SHIPADR2"></small></td>
        <td><small adx="SHIPCITY"></small></td>
        <td><small adx="SHIPZIP"></small></td>
    </tr> 
<!adx="ABLKSHIPADDR">         
</table>

Per visualizzare le righe di un riquadro con colori alternati si posiziona un token adx nel tag <tr>.
<tr adx="aLineStyle:xattr=Class">

aLineStyle contiene il nome della classe e xAttr=Class indica che bisogna valorizzare l'attributo classe con il valore del campo aLineStyle.

Le classi css (aLineStyle) che sono applicate alle righe del riquadro sono definite nella scheda di parametrizzazione del blocco.

Visualizzazione della descrizione della pagina

<!adx="ABLKDOCHTML">
   <div adx="TESTO">
   </div>
<!adx="ABLKDOCHTML">