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

Quickstart Variante 1

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

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['loginUrl'] = "/path/to/the_url_that_will_be_called_with_the_userdata.php"; //siehe Grafik Nutzer-Authentifzierungsprozess
sociallyveConfig['importUrl'] = "/path/to/the_url_that_will_be_called_with_a_special_token.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. Die API benötigt zunächst die Definition einer Callbackfunktion. Diese wird aufgerufen, nachdem die Daten des Website Besuchers an Ihre Webseite weitergegeben wurden. In diesem Beispiel führt das Ausführen der Callbackfunktion zu einem Reload des Browserfensters (siehe Grafik: Nutzer-Authentifzierungsprozess). Der Parameter yourBackendsLoginResult enthält das Resultat, dass der Call an die URL, die in sociallyveConfig['loginUrl'] zurückgegeben hat (siehe Grafik: Nutzer-Authentifzierungsprozess).

var whatToDoAfterLogin = function(yourBackendsLoginResult) {
window.location.reload();
}

Jetzt können Sie die API nutzen, indem sie folgendes Javascript in Ihre HTML-Datei einfügen:

//Instanziierung der Sociallyve Klasse
var connector = new Sociallyve();

Teilen Sie dem connector nun Ihre zuvor definierte Callbackfunktion mit:

//Initialisierung
connector.setCallbackFunctionForLogin(callBackForLogin);

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