如何将facebook登录添加到我自己的网站？

Question

Stackoverflow使用不同的方式登录他们的网站,例如使用facebook登录.

使用facebook社交插件(请参阅社交插件),您可以添加类似按钮或Facebook登录.但是如何通过stackoverflow管理将facebook帐户与stackoverflow帐户连接起来？

Answer 1

Facebook社交插件:登录按钮Facebook提供了许多他们称之为社交插件的东西.我们感兴趣的是登录按钮.以下是将按钮导入网页所涉及的基本步骤:

您的网站需要一个Facebook应用程序.转到https://developers.facebook.com/apps/并单击"创建新应用程序"按钮.

您的"应用程序显示名称"可能是有意义的.我通常会使用该网站的域名.您也可以将此同一个应用程序用于其他目的."App Namespace"需要是不包含任何特殊字符的东西.我通常使用我的应用程序显示名称,没有空格,句点等.现在您需要输入"应用程序域"和网站"站点URL".对于应用程序域,请输入托管您站点的域名.对于网站网址,请输入您网站的完整网址.例如,如果您的域名是name.com,那么您的网站网址应该类似于http://www.name.com.输入正确的信息后,保存更改.现在您将有一个页面显示您的"App ID"和"App Secret".只需将该页面保持打开状态,因为在将登录按钮代码添加到页面时,您将需要自己的应用程序ID.现在我们需要从Facebook获取登录按钮代码.转到http://developers.facebook.com/docs/reference/plugins/login/,然后单击"获取代码"按钮.从第一个框中复制HTML5代码,现在将其放在网页正文标签下方.代码看起来应该是这样的:

<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.现在,将第二个框中的代码粘贴到您希望登录按钮驻留的任何位置.代码应该类似于:

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

我将data-show-faces属性更改为false,因为当它设置为true时,用户登录时将不会呈现注销按钮.

Answer 2

Facebook 登录插件仅提供一种让用户登录您网站的方法。您必须自己链接到您的内部系统（就像 StackOverflow 所做的那样）。这意味着根据 Facebook 用户的详细信息创建一个新的“用户”。

例如，如果您的网站使用电子邮件地址作为“用户名”，那么您必须要求 Facebook 用户提供他们的电子邮件地址或请求电子邮件地址许可。然后，您为用户创建一个新帐户并为其提供一个随机密码。

您还必须更改登录流程，以便现有用户可以使用其电子邮件/密码或关联的 Facebook 帐户登录。