Home » API » Einbindung der Javascript Bibliothek » Quickstart Variante 2

Quickstart Variante 2

Eine Beispielprozess für die Nutzerauthentifzierung können Sie hier finden.

Nutzung einer eigenen Login-Funktion

Schritt 0: Voraussetzungen

Um die API nutzen zu können, müssen folgende Voraussetzungen erfüllt sein:

  • Sie besitzen eine gültige applicationId (auch API-Key genannt) bei allyve
  • Sie besitzen einen zugehörigen (geheimzuhaltenden) Schlüssel (API-Secret) bei allyve. Bitte bewahren Sie das appsecret sicher und für Unbefugte nicht zugänglich auf

Schritt 1: Anlegen der Verzeichnisstrukturen

Legen Sie folgende Verzeichnisstruktur in Ihrem Webauftritt an:

/sociallyve
--/js
--/html

Schritt 2: Dateien

Laden Sie die Datei “http://cdn.allyve.com/xd_allyzer.html” herunter und kopieren Sie sie in das eben angelegte Verzeichnis “sociallyve/html“:

Legen Sie in dem Verzeichnis sociallyve/js eine leere Javascript Datei an. Nennen Sie diese Datei “sociallyveConfig.js“.

Öffnen Sie die Datei “sociallyveConfig.js” und befüllen Sie sie mit folgenden Werten:

sociallyveConfig['applicationId'] = "YOUR_APPLICATION_ID";
sociallyveConfig['apiUrl'] = "https://api.allyve.com/api/sociallyve/";
sociallyveConfig['pathToForwarder'] = "/sociallyve/html/xd_allyzer.html";
 
sociallyveConfig['importUrl'] = "/path/to/the_url_that_will_be_called_with_the_contact_data.php";

Schritt 3: Anpassen Ihrer HTML-Datei

Die Nutzung der API setzt voraus, dass Sie die Javascript Bibliothek jQuery (www.jquery.com) in Ihre Seite einbinden.
Fügen Sie die nachstehenden Zeilen dem Head-Abschnitt Ihrer HTML-Datei hinzu:

<link rel="stylesheet" type="text/css" media="screen" href="//cdn.allyve.com/css/sociallyve_simple.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/sociallyve/js/sociallyveConfig.js"></script>
<script type="text/javascript" src="//cdn.allyve.com/js/sociallyve_simple.js"></script>

Schritt 4: Einbinden der Login-Buttons

Fügen Sie den nachstehenden HTML-Code zu dem Body-Abschnitt Ihrer HTML-Datei hinzu, damit dem User die Loginbuttons der verschiedenen Sozialen Netzwerke angezeigt werden:

<div saId="facebook" class="sociallyve_single_login_button"></div>
<div saId="gmx" class="sociallyve_single_login_button"></div>
<div saId="twitter" class="sociallyve_single_login_button"></div>

Schritt 5: Nutzung der API

Die Nutzung der Api erfolgt in Javascript. Da Sie hier (anders als in Quickstart Variante 1) die Verarbeitung der zurückgelieferten Daten über eine eigene Funktion durchführen möchten, müssen Sie diese definieren und zuweisen. Der Parameter queryStr enthält dabei den vollständigen von der API gelieferten Parameter-String (siehe Grafik: Nutzer-Authentifzierungsprozess).

var myOwnLoginFunction = function(queryStr) {
	doMyOwnProcessing(queryStr);
}
var myOwnImportFunction = function(queryStr) {
	doMyOwnImporting(queryStr);
}
//Instanziierung der Sociallyve Klasse
var connector = new Sociallyve();

Teilen Sie dem connector nun Ihre zuvor definierte Login-Funktion mit:

//Initialisierung
connector.setLoginFunction(myOwnLoginFunction);
connector.setImportFunction(myOwnImportFunction);

FERTIG!

Bitte stellen Sie sich, dass Sie bei den von der allyve API erhaltenen Daten immer eine Signaturüberprüfung durchführen

Zuletzt aktualisiert am 5. März 2012 von admin - Anmelden

Kommentare

Schreibe einen Kommentar