Vorgestellt: OAuth.io - Client-Site-Social-Login - einfach und schnell
04. Dezember 2013 Web-Entwicklung von Eric Kubenka
Heut möchte ich mal wieder eine JavaScript-Bibliothek, beziehungsweise einen Service vorstellen und an den Mann bringen. Schon während der Betaphase habe ich das Projekt OAuth.io verfolgt und nach einiger Wartezeit auch damals einen Zugang erhalten.
Die Funktion ist ganz simple. Statt sich mit nervigen Requests, Token, APIs und anderen Bestandteilen für die Kommunikation mit Social-Media-Diensten auseinanderzusetzen, übernimmt Oauth.io diese ganze Verwaltung.
Von Nöten ist nur ein Oauth.io-Account, dort werden alle Keys und Secrets der Social-Media-Provider abgelegt und fortan wird mittels eines Zwei-Zeilers ein kompletter Login mit beispielsweise Twitter oder Facebook durchgeführt.
Wie das Ganze bei Euch einzubinden ist, wird ordentlich in der Dokumentation erwähnt, aber weil es so simpel ist, stell ich folgend den besagten Ablauf mit dem Login mal dar. Mit Code, Bildern und was man so erwartet.
Zum Glück in einfachen Schritten
Zuerst braucht man einen OAuth.io Zugang. Den kann man sich hier anlegen. Anschließend muss im OAuth.io-Interface eine entsprechende Anwendugn angelegt werden.
Nach dem das erledigt ist, wird eine Facebook-App benötigt. Welche Eigenschaften diese braucht, wird in der OAuth-Dokumentation erläutert.
Wichtig: Die Callback-URL, sowie die App-Domain muss wie bei OAuth.io beschrieben angegeben werden. Dabei ist die Callback URL eine URL von oauth.io. Eure eigene Callback-URL setzt ihr erst später im JavaScript.
Der App-Key und das App-Secret der Facebook-Anwendung müssen im OAuth.io-Key-Manager abgelegt werden. Die hauseigene Dokumentation unterstützt einen dabei vollstens.
Folgend muss OAuth.io bezogen werden (GitHub) und anschließend wird mit dem online angezeigten OAuth.io-Key wie folgt die Verbindung hergestellt. Folgender Code stellt einen vollwertigen Login-Prozess mit Ausgabe der Profildaten des angemeldeten Anwenders dar.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/oauth.js"></script>
</head>
<body>
<button id="loginfb" >Login with facebook</button>
<pre id="output"></pre>
<script type="text/javascript">
$(document).ready(function(){
OAuth.initialize('inserYourKeyHere');
$('#loginfb').on('click', function(){
OAuth.popup('facebook', function(err, result) {
if(err){
console.log(err);
return;
}
result.get('/me').done(function(data) {
$('#output').append(JSON.stringify(data, "",10));
});
});
});
});
</script>
</body>Ausgabe
{
"id": "100001031005102",
"name": "Eric Kubenka",
"first_name": "Eric",
"last_name": "Kubenka",
"link": "https://www.facebook.com/eric.kubenka",
"username": "eric.kubenka",
...
...
}OAuth.io unterstützt von Haus aus über 80 Provider, darunter Facebook, Google, Microsoft, Twitter, GitHub und alles was Rang und Namen hat.
Doch wo ist der Haken?
Nunja. Das ganz ist nur bis zu 5000 Requests pro Monat gratis. Ab dann wird dieses Preismodel angewandt. Damit man diese Zahlen auch im Auge behält wird ein hübsches Dashboard bereitgestellt.
Fazit
Da ab 5001 Requests meiner Meinung nach hohe Kosten anfallen lohnt sich das ganze entweder nur für große Seiten oder man bleibt definitiv unter der besagten Anzahl. Sollte man nur die Login-Funktionen nutzen wollen sind ja auch nicht soviel Requests nötig. Möchte man aber eine Social-Media-Basierte Applikation aufsetzen, sollte man entweder die Prozesse selbst implementieren oder sich nach einer Alternative umsehen.
Ich selbst schreibe nebenbei an einer kleinen PHP-Bibliothek zur freien Verfügung. Jedoch finde ich nicht so oft Zeit :).
Der hier dargestellte Code liegt wie immer unter Github bereit. Eine Live-Demo von oauth.io gibt es hier.