Magento2 集成Facebook 登录

1.注册Facebook账户

打开网址注册Facebook账户:facebook

2. 注册为Facebook开发者账户

打开 https://developers.facebook.com/

前往文档



选择 Websites or mobile websites



在开始使用之前,你必须注册facebook开发者账户然后注册facebook app,然后完成配置使用。

在实现我们的任何产品和SDK或访问我们的任何API之前,您必须首先注册为Facebook开发人员并使用我们的应用仪表板来提供有关您的应用程序的信息。 这些文档说明了如何注册为开发人员,如何使用App Dashboard配置应用程序的设置以及如何构建,测试和发布您的应用程序。

步骤1:开始注册程序登录到您的Facebook帐户后,转到Facebook for Developers网站,然后单击“ Get Started”。

点击“ Get Started”

在这个界面注意选择中文版本和英文版本的区别创建一个Facebook for Developers帐户,以构建和管理访问Facebook Graph API的应用程序,为他人拥有的应用程序做出贡献,并参与其中。第2步:同意我们的条款和政策

点击Continue

此号码将保存到您的Facebook个人资料。 我们使用手机号码发送短信通知,帮助您登录并个性化体验,例如与人联系并为我们产品上的每个人改善广告。 只有您会在个人资料上看到您的手机号码。 学到更多。

让我们知道这个手机号码属于您。 在发送给+86 xxx(中国)的SMS中输入代码。

查看您的电子邮件地址我们使用电子邮件地址发送通知,帮助您登录并个性化体验,例如联系人们并为我们产品上的每个人改善广告。

我同意从Facebook收到与营销有关的电子通讯,包括开发人员新闻,更新和促销电子邮件。 (您可以随时通过单击电子邮件底部的取消订阅来取消订阅这些电子邮件。您还可以在“开发者设置”中更新电子邮件首选项。)点击 ”Comfrim Email ”

以下那一项形容你最贴切?

完成注册。

现在,您已经注册,可以使用App Dashboard创建您的第一个应用程序。

3.创建App 应用

3.1 步骤1:Start the app creation process 开始建立应用程式如果你刚从注册流程中走出来,点击Create First App按钮。否则,请转到“应用程序”面板,然后单击“创建应用程序”。

之前未创建app

3.2 Step 2: Choose an app type 选择一个应用类型您的应用类型决定了哪些产品和API可用于您的应用。 如果这是您第一次创建应用程序,而您只是在探索应用程序的创建流程,请选择“无”选项(如果看不到“无”选项,则选择“其他”选项)。 以后,当您对我们的产品和API更加熟悉时,请参考我们的应用程序类型文档,以确定最适合您的应用程序的应用程序类型,然后创建一个新的应用程序并选择适当的类型。

在本次示例中我们做Facebook登录,因此我们选择 “Consumer” 消费者

之前创建过app

3.3 Step 3: Set your app name and email 设定您的应用程式名称和电子邮件输入你的应用名称和电子邮件地址,以便我们向你发送任何重要的开发者通知。电子邮件地址可以不同于与你的Facebook账户相关的电子邮件地址,但要确保它是有效的,并且你会监控它,因为所有重要的开发者通知都会发送到那里。您还可以添加一个Facebook Business Manager帐户(如果有),然后单击“创建应用程序”。


3.4 点击 “Create App”,然后叫输入密码:

输入facebook账户密码

一旦完成应用程序创建流程后,您的应用程序将被加载到应用程序仪表板中。

下面就是我刚刚新创建的app

app

3.5 点击 jaxpety pro 应用名称,然后点击Sttings。

3.6 点击 Basic 完成必须的基本设置

基本设置页面为您提供了一个配置重要设置,如您的应用程序的姓名,联系电子邮件和类别,并通过Facebook查找分配给您的应用的应用程序秘密。 您可以在Facebook平台上构建应用程序所需的设置。

常规设置包含分配给您应用的唯一标识符,并允许您提供其他信息以进一步定义和描述您的应用。 这些标识符允许我们在制作API调用时识别您的应用程序,并帮助我们确定应用程序用户已授予应用程序的权限和功能,并用于生成访问令牌。

General Settings

App ID

当您创建Facebook应用程序时,我们会生成并分配唯一ID。 对我们的API进行任何调用时,必须包含此ID。 我们所有的SDK都为您提供了一种方法,让您轻松在Codebase中设置此值,以便自动包含任何API调用。

App Secret

您的应用程序秘密用于一些Facebook登录流以生成应用访问令牌,可以代表应用程序的任何用户制作API请求。 非常重要的是安全地存储APP秘密,而不是包含在应用程序的开发人员以外的任何代码中的任何代码中。

我们建议应用程序访问令牌只能直接从您的应用程序的服务器中使用,以提供最佳安全性。 对于本机应用程序,我们建议该应用程序与您自己的服务器通信,然后服务器使用App Access令牌向Facebook进行API请求。

如果您的应用程序秘密受到损害,您可以在App Dashboard中重置它。

3.7 Display Name

显示名称是将显示在app Center中的应用的用户名。这个字段是切换你的应用程序到生成正式模式所必需的。

在选择或修改应用程序的显示名称时遵循以下准则,否则将在App Review期间拒绝。

请勿使用包含Facebook或FB的名称,或者Facebook产品的任何名称,如Oculus,WhatsApp或Instagram。

如果可以被视为对Facebook的引用,请勿使用“F”,“Book”或“Face”。

不要以暗示我们的伙伴关系,赞助或认可的方式使用我们的品牌。

不要将我们品牌的任何部分与您的名字相结合。

不要使用模仿或可以与我们的品牌混淆的名称或徽标

不要以一种使它们成为您应用最突出或突出的功能的方式展示我们的品牌资产。

Namespace

命名空间URL链接到您的应用程序的Canvas页面。 Canvas页面用于告诉用户您的应用程序。

App Domains

你的应用程序的域和子域的应用程序安装和使用期间的图形API请求验证。

Contact Email

联系电子邮件是发送开发者通知的电子邮件地址。这个字段是切换你的应用程序到直播模式所必需的。

Privacy Policy URL

4. Facebook Login

4.1 点击Facebook Login的 set up

4.2 点击 www web

选中web

4.3 输入要做facebook 登录的网站的网址

输入网址

4.4 输入网址点击保存,然后点击facebook login 按钮下的设置输入回调地址

输入回调地址

4.5 获取facebook login 应用的 Facebook App ID. Facebook App Secret.

Facebook App ID. Facebook App Secret.

将获取的id,秘钥配置在Magnto2 的后台,然后刷新网站输入facebook账户登录

登录界面

登录界面说明

  • APP icon: 默认图标,可以上传自己的logo
  • Display Name: test jaxpety 可以设置显示自己网站的名称
  • Privacy Policy URL : 登录界面最下面的文字是链接到自己设置的隐私信息的页面。

点击 “Cancel” 出现下面情况。

本文参考:https://developers.facebook.com/docs/development/create-an-app/app-dashboard/basic-settings