21.112014

Facebook Login anbinden

Um seinen Besuchern, die Registrierung so einfach wie möglich zu machen greifen viele derzeit auf den Facebook Login zurück. Hier zeige ich euch wie es grundlegend funktioniert.

Facebook Login

Um den Login von Facebook zu benutzen braucht ihr zu aller erst einen Facebook Developer Account. Diesen könnt ihr euch ganz einfach mit eurem normalen Facebook Account freischalten. Danach müsst ihr euch nur noch eine Testapp anlegen und schon kann es los gehen.

Facebook API einbinden

Zu erst müsssen wir die Facebook API einbinden. Es gibt viele Möglichkeiten dies zu tun. Ich habe mich hier für eine Javascript Variante entschieden.

<script type="text/javascript">
 window.fbAsyncInit = function() {
  FB.init({
   appId : 'DEINE_FACEBOOK_APP_ID',
   cookie : true, // enable cookies to allow the server to access the session
   xfbml : true, // parse social plugins on this page
   version : 'v2.2' // use version 2.2
  });
 };
 // Load the SDK asynchronously
 (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
</script>
<fb:login-button scope="public_profile,email" data-size="large" onlogin="handleLoginState();">Facebook Login</fb:login-button>

Jetzt haben wir die Basis für alles weitere.

Status abfragen

Klicken wir jetzt auf den Facebook Login Button wird der onlogin Callback ausgeführt. In unserem Fall die handleLoginState() Funktion.

function handleLoginState() {
 FB.getLoginStatus(function(response) {
  // check facebook status
  if (response.status == 'connected') {
   // is logged into facebook and our app
  } else if (response.status == 'not_authorized') {
   // is logged into facebook, but not in our app
  } else {
   // isn't logged into facebook
  }
 });
}

Daten abfragen

Möchten wir jetzt noch auf die angefragten Daten zugreifen geht das wie folgt:

FB.api('/me', function(response) {
 if (response && !response.error) {
  console.log(response);
 };
});

Jetzt müsst ihr die Daten nur noch an eure Anwendung schicken. Viel Spaß damit.

Lern uns kennen!