facebook - 自分のウェブサイトに Facebook ログインを追加するにはどうすればよいですか?

Question

Stackoverflow は、Facebook ログインなど、さまざまな方法で Web サイトにログインしています。

Facebook ソーシャルプラグイン (「ソーシャルプラグイン」を参照) を使用すると、いいねボタンや Facebook ログインを追加できます。しかし、facebook アカウントを stackoverflow アカウントに接続するために、stackoverflow によってどのように管理されるのでしょうか?

score 8 · Accepted Answer

Facebook ソーシャルプラグイン: ログインボタン Facebook は、彼らがソーシャルプラグインと呼ぶものを多数提供しています。私たちが興味を持っているのはログインボタンです。Web ページにボタンを配置するための基本的な手順は次のとおりです。

サイトには Facebook アプリが必要です。https://developers.facebook.com/apps/にアクセスし、[Create New App] ボタンをクリックします。

「アプリの表示名」は意味のあるものにすることができます。私は通常、サイトのドメイン名を使用します。将来的には、この同じアプリを他の目的にも使用できます。「アプリの名前空間」は、特殊文字を含まないものである必要があります。私は通常、スペースやピリオドなどを含まないアプリの表示名を使用します。次に、「アプリドメイン」と Web サイトの「サイト URL」を入力する必要があります。アプリドメインには、サイトがホストされているドメイン名を入力します。サイトの URL には、Web サイトの完全な URL を入力します。たとえば、ドメインが name.com の場合、サイトの URL はhttp://www.name.comのようになります。. 適切な情報を入力したら、変更を保存します。これで、自分の「アプリ ID」と「アプリシークレット」を表示するページが表示されます。ページにログインボタンコードを追加するときにアプリ ID が必要になるため、そのページを開いたままにしておいてください。次に、Facebook からログインボタンのコードを取得する必要があります。http://developers.facebook.com/docs/reference/plugins/login/にアクセスし、[コードを取得] ボタンをクリックします。最初のボックスから HTML5 コードをコピーし、ここでは Web ページの body タブのすぐ下に配置します。コードは次のようになります。

<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>

コード内の APP_ID を、Facebook アプリ用に作成したアプリ ID に置き換えてください。次に、ログインボタンを配置する場所に 2 番目のボックスのコードを貼り付けます。コードは次のようになります。

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

data-show-faces 属性を false に変更しました。これを true に設定すると、ユーザーがログインしているときにログアウトボタンがレンダリングされないためです。

score 4 · Accepted Answer

Facebook ログインプラグインは、ユーザーが Web サイトにログインする方法のみを提供します。内部システムへのリンクは自分で行う必要があります (StackOverflow と同様)。これは、Facebook ユーザーの詳細に基づいて新しい「ユーザー」を作成することを意味します。

たとえば、Web サイトで「ユーザー名」として電子メールアドレスを使用している場合、Facebook ユーザーに電子メールアドレスを提供するよう依頼するか、電子メールアドレスの許可を求める必要があります。次に、ユーザーの新しいアカウントを作成し、ランダムなパスワードを与えます。

また、ログインフローを変更して、既存のユーザーが電子メール/パスワードまたは関連する Facebook アカウントでサインインできるようにする必要があります。

score 0 · Accepted Answer

アプリの登録と fb SDK のダウンロード後に、次のコードに従います。

<?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)){
	$request=new FacebookRequest($sess,'GET','/me');
	$response=$request->execute();
	$graph=$response->getGraphObject(GraphUser::classname());
	$name=$graph->getName();
	echo 'hi $name';
	
}
else
{
	echo '<a href="'.$helper->getLoginUrl().'">Login with Facebook</a>';
}

facebook - 自分のウェブサイトに Facebook ログインを追加するにはどうすればよいですか?

3 に答える 3

Related

Reference