Loginformular auf der eigenen Website einbinden

TeamProQ bietet die Möglichkeit, ein Loginformular auf der firmeneigenen Website einzubinden, damit sich Benutzer direkt von dort aus in den TeamProQ-Datenraum einloggen können.

Die dazu notwendigen Änderungen an den Templates Ihres Website-CMS erklären wir in den folgenden Zeilen.

Das dargestellte Beispiel finden Sie auf der WebProQ Demoseite: demo.webproq.de

Binden Sie zunächst das für den Login notwendige JavaScript in das Seitentemplate an der Stelle ein, an der später auch das Loginformular ausgegeben werden soll:

<script type="text/javascript" src="http://admin.teamproq.de/remotelogin/script"></script>

 

Anschließend bestimmen Sie mit der Variable "tpq_login.popup", wie der Datenraum bei erfolgreichem Login geöffnet werden soll:

<script type="text/javascript">
  tpq_login.popup="auto";
</script>

 

Es stehen folgende Parameter zur Verfügung:

  1. "auto": Es wird versucht, ein Popup zu öffnen. Sollte dies auf Grund der Browsereinstellungen nicht möglich sein, wird der Datenraum im aktuellen Fenster geöffnet
  2. "false": Der Datenraum wird immer im aktuellen Fenster geöffnet.
  3. "true": Der Datenraum wird immer im Popup geöffnet.

 

Im nächsten Schritt erstellen Sie das eigentliche Loginformular:

<form method="post">
  <input type="hidden" name="project" value="IHRDATENRAUM"/>
  <label>Benutzername:</label> <input type="text" name="email" value=""/><br />
  <label>Passwort:</label> <input type="password" name="password" value=""/><br />
  <input type="button" id="login" value="Anmelden" onclick="tpq_login.login(this.form)" class="input-submit"/>
</form>

 

Die Gestaltung des Loginformulars ist Ihnen freigestellt. Wichtig ist, dass folgende Felder mit dem Formular übergeben werden:

  1. hidden-Feld: "project" - hier übergeben Sie den Namen Ihres Datenraums (erster Teil der URL, z.B.: IHRDATENRAUM.teamproq.de)
  2. Text-Feld: "email"
  3. Passwort-Feld: "password"
  4. den Submit-Button übernehmen Sie am Besten aus dem oberen Beispiel

 

Als letztes fügen Sie nun noch ein <div> mit der ID tpq_login_message ein, in dem Fehlermeldungen zurückgegeben werden können.

<div id="tpq_login_message"> </div>

 

Ihr fertiges Loginformular sollte nun wie folgt aussehen:

<div id="loginform">
  <script type="text/javascript" src="http://admin.teamproq.de/remotelogin/script"></script>
  <script type="text/javascript">
    tpq_login.popup="auto";
  </script>
  <form method="post">
    <input type="hidden" name="project" value="IHRDATENRAUM"/>
    <label>Benutzername:</label> <input type="text" name="email" value=""/><br />
    <label>Passwort:</label> <input type="password" name="password" value=""/><br />
    <input type="button" id="login" value="Anmelden" onclick="tpq_login.login(this.form)" class="input-submit"/>
  </form>
  <div id="tpq_login_message"> </div>
</div>

 

Sollten Sie Fragen zur Einbindung des Loginformulars haben, so melden Sie sich gern bei unserem Supportteam: support[at]teamproq.de