2012-08-07 35 views
11

Stackoverflow verwendet verschiedene Möglichkeiten, um sich auf seiner Website anzumelden, z. mit dem Facebook Login.Wie füge ich Facebook Login zu meiner eigenen Website hinzu?

Mit den Facebook Social Plugins (siehe social plugins) können Sie einen Like Button oder einen Facebook Login hinzufügen. Aber wie wird es mit stackoverflow gemanagt, um das Facebook-Konto mit einem stackoverflow-Konto zu verbinden?

+0

Zum Beispiel gibt es die Registrierung direkt auf der Seite Plugin Sie verknüpft. Und es gibt natürlich Möglichkeiten, es selbst zu implementieren - lassen Sie den Benutzer einfach eine Verbindung zu Ihrer App herstellen, erhalten Sie die benötigten Informationen und erstellen Sie ein neues Konto mit dem Anmeldesystem Ihrer Seiten. – CBroe

Antwort

4

Das Facebook Login-Plugin bietet nur eine Möglichkeit für Sie, den Benutzer auf Ihrer Website zu protokollieren. Sie müssen die Verbindung zu Ihrem internen System selbst herstellen (wie es StackOverflow macht). Dies bedeutet, dass ein neuer "Benutzer" basierend auf den Details des Facebook-Nutzers erstellt wird.

Wenn Ihre Website beispielsweise die E-Mail-Adresse als "Benutzername" verwendet, müssen Sie Facebook-Nutzer bitten, ihre E-Mail-Adresse anzugeben oder nach der E-Mail-Adresse zu fragen. Anschließend erstellen Sie einen neuen Account für den Benutzer und geben ihm ein zufälliges Passwort.

Sie müssen auch den Login-Flow ändern, damit sich bestehende Benutzer mit ihrer E-Mail-Adresse oder ihrem zugehörigen Facebook-Konto anmelden können.

7

Facebook Social Plugin: Der Login Button Facebook bietet eine Vielzahl von, wie sie Social Plugins nennen. Der, an dem wir interessiert sind, ist der Login Button. Hier sind die grundlegenden Schritte, um die Schaltfläche auf Ihre Webseite zu bekommen:

Sie benötigen eine Facebook-App für Ihre Website. Gehen Sie zu https://developers.facebook.com/apps/ und klicken Sie auf die Schaltfläche "Create New App".

Ihr "App Display Name" kann etwas Sinnvolles sein. Ich gehe normalerweise mit dem Domain-Namen für die Website. Sie können diese App auch für andere Zwecke in Zukunft verwenden. Der "App Namespace" muss etwas sein, das keine Sonderzeichen enthält. Normalerweise verwende ich meinen App-Anzeigenamen ohne Leerzeichen, Punkte usw. Jetzt müssen Sie Ihre "App Domain" und Website "Site URL" eingeben. Geben Sie für die App-Domain den Domain-Namen ein, auf dem Ihre Site gehostet wird. Geben Sie für die URL der Website die vollständige URL Ihrer Website ein. Wenn Ihre Domain z. B. name.com lautet, sollte Ihre Site-URL beispielsweise so aussehen: http://www.name.com. Speichern Sie Ihre Änderungen, sobald Sie die richtigen Informationen eingegeben haben. Jetzt haben Sie eine Seite, die Ihre "App ID" und "App Secret" zeigt. Lassen Sie diese Seite einfach geöffnet, da Sie Ihre App-ID benötigen, wenn Sie den Code für die Anmeldeschaltfläche zu Ihrer Seite hinzufügen. Jetzt müssen wir den Login-Button-Code von Facebook bekommen. Gehen Sie zu http://developers.facebook.com/docs/reference/plugins/login/ und klicken Sie auf die Schaltfläche "Code abrufen". Kopieren Sie den HTML5-Code aus der ersten Box und legen Sie ihn jetzt direkt unter dem Body-Tab Ihrer Webseite ab. Der Code sollte wie folgt aussehen:

<div id="fb-root"></div> 
<script> 
    (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/all.js#xfbml=1&appId=APP_ID"; 
    fjs.parentNode.insertBefore(js, fjs); 
    } (document, 'script', 'facebook-jssdk')); 
</script> 

Im Code sicher sein APP_ID mit der App-ID ersetzen Sie für Ihre Facebook-App erstellt. Fügen Sie nun den Code aus der zweiten Box an der Stelle ein, an der die Login-Schaltfläche gespeichert werden soll. Der Code sollte in etwa so aussehen:

<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1"></div> 

ich die Daten-show-Gesichter auf false geändert zuschreiben, weil damit auf true den Logout-Button gesetzt wird nicht übertragen, wenn der Benutzer angemeldet ist.

0

folgen diesen Code nach App-Registrierung und fb sdk herunterladen:

<?php 
 
require_once('lib/Facebook/FacebookSession.php'); 
 
require_once('lib/Facebook/FacebookRequest.php'); 
 
require_once('lib/Facebook/FacebookResponse.php'); 
 
require_once('lib/Facebook/FacebookSDKException.php'); 
 
require_once('lib/Facebook/FacebookRequestException.php'); 
 
require_once('lib/Facebook/FacebookRedirectLoginHelper.php'); 
 
require_once('lib/Facebook/FacebookAuthorizationException.php'); 
 
require_once('lib/Facebook/GraphObject.php'); 
 
require_once('lib/Facebook/GraphUser.php'); 
 
require_once('lib/Facebook/GraphSessionInfo.php'); 
 
require_once('lib/Facebook/Entities/AccessToken.php'); 
 
require_once('lib/Facebook/HttpClients/FacebookCurl.php'); 
 
require_once('lib/Facebook/HttpClients/FacebookHttpable.php'); 
 
require_once('lib/Facebook/HttpClients/FacebookCurlHttpclient.php'); 
 

 

 
use Facebook\FacebookSession; 
 
use Facebook\FacebookRedirectLoginHelper; 
 
use Facebook\FacebookRequest; 
 
use Facebook\FacebookResponse; 
 
use Facebook\FacebookSDKException; 
 
use Facebook\FacebookRequestException; 
 
use Facebook\FacebookAuthorizationException; 
 
use Facebook\GraphObject; 
 
use Facebook\GraphUser; 
 
use Facebook\GraphSessionInfo; 
 

 
use Facebook\FacebookHttpable; 
 
use Facebook\FacebookCurlHttpClient; 
 
use Facebook\FacebookCurl; 
 

 

 

 
session_start(); 
 
$app_id=""; 
 
$app_secret=""; 
 
$redirect_url=""; 
 
FacebookSession::setDefaultApplication($app_id,$app_secret); 
 
$helper=new FacebookRedirectLoginHelper($redirect_url); 
 
$sess=$helper->getSessionFromRedirect(); 
 
if(isset($sess)){ 
 
\t $request=new FacebookRequest($sess,'GET','/me'); 
 
\t $response=$request->execute(); 
 
\t $graph=$response->getGraphObject(GraphUser::classname()); 
 
\t $name=$graph->getName(); 
 
\t echo 'hi $name'; 
 
\t 
 
} 
 
else 
 
{ 
 
\t echo '<a href="'.$helper->getLoginUrl().'">Login with Facebook</a>'; 
 
}

Verwandte Themen