Facebook 帐号快速注册/登录会员|顾客设定

EC + SC  (简中).png
顾客除了可以使用  Email 电邮注册成为会员外,我们也提供使用 Facebook 帐号登录的功能,让顾客可以快速一键注册/登录您的商店。

一键使用 Facebook 帐号登录为 Facebook 所开发的功能,是透过将 Facebook 的应用程式安装到商店中才能完成的功能。 我们会需要先建立好 Facebook 应用程式再回到商店后台进行安装,由于设定步骤较多,敬请耐心并依照步骤进行设定。若有画面与此说明不符或是有相关问题的状况,请撷取您的萤幕操作画面,提供后台线上顾问帮您确认。 

 

*请留意:Facebook 应用程式为贵司透过 Facebook 个人帐号建立的资产,并不属于 SHOPLINE 拥有,请您留意权限与使用情况外,也请特别留意 Facebook 每年发出的通知与资料审核情况,若日后有在应用程式收件夹收到 Facebook 「资料使用情形检查」讯息,请您在期限内回覆以免您的应用程式遭到 Facebook 停用。

以下将分别说明:

 

一、Facebook 登入功能设定步骤

步骤一:进入 Facebook for Developers 

请您点选此连结进入 Facebook for Developers 并使用您 Facebook 个人帐号登入,并点选「我的应用 >  创建应用」开始来建立 Facebook 应用程式。

*注意:由于 Facebook for Developers 应用程式是绑定并建立在个人帐号旗下,为避免贵司内部人员、权限异动建议使用贵司可共同管理的 Facebook 个人帐号建立程式,并请留意「步骤十一」在最后新增贵司相关人员同为此应用程式管理员,以便后续维护管理。

___2020-11-06___4.55.13.png

____.jpg

 

提醒您,如果您的 Facebook 帐号已经有创建过 Facebook 应用,当您点选「创建应用」后,网页会出现询问您「您的应用有什么用途?」的视窗,请您点选第三项「打造关联体验」来创建您的 Facebook 登入应用,并接续以下的步骤完成 Facebook 登入功能的设定。

___2020-11-06___4.56.04.png


步骤二:建立 Facebook 应用程式

请注意「应用显示名」会出现在登入流程让顾客查看,会建议您填写「商店/品牌名称」并填写您/公司的联络电子邮件,若是您有商务管理平台也可以在下个栏位选填,再来请点选「创建应用

___2020-11-12___1.07.49.png

点选后会出现「安全验证」的弹跳视窗,请完成验证后点选「提交」 。

SC_Step4.png


步骤三:新增「Facebook 登入」应用程式

接下来会进入新增应用程式的页面,请找到「Facebook 登录」并点选「设置」。

SC_Step5.jpg

 
进入「Facebook 登录」设定页面后,请选择要将应用程式使用在「网络」中。SC_Step6.jpg


步骤四: 输入商店网址

请在「网站网址」中输入您商店首页网址,例如:https://www.test123.com 或是 https://www.test123.com.tw 等,请注意:务必要填写https:// 开头的安全性加密网址 ,输入完毕确认后,请点选右下角的「保存 (Save)」按钮,并待应用程式存取网址。 

SC_Step7.png


步骤五:进入应用程式「基本」中设定

接下来请到左侧主控版,进入「设置 > 基本」完成应用域名、隐私权政策网址、应用图标、商业用途、服务条款网址、类别、网站地址栏位的设定。

SC_Step8.png

fill1___.png

1.应用域名(必填)

这个栏位总共会需要输入 2 个网址(裸网域包含子网域网址),请依照以下方法取得并分别贴上后按下键盘的「Enter(Window) / Return(Mac)」键,当网址变成蓝底灰字时才代表成功输入。

  • 如果您的商店使用独有网址,例如:https://www.test123.com 
    请分别填入 2 个网址:www.test123.com 和 test123.com 

  • 如果您的商店使用免费网址,例如:https://test456.shoplineapp.com
    请分别填入 2 个网址:test456
    .shoplineapp.comshoplineapp.com

以上「红字粗体的范例网址」请更换成您的商店网址,若不确定您商店独有网址和免费网址,可进入商店前台首页复制网址。 

*注意:请填写您的商店网址而非 SHOPLINE 官方网址。

 

2. 隐私权政策网址(必填)

隐私权政策为网站「将如何对待网路使用者个人资料」之声明,如网站使用者同意或信赖隐私政策之声明,則即具有契约效力,且隐私政策符合网路定型化契约之成立要件而定,商店中是否有揭露「隐私条款」为金流审核、Google 广告投放审核、Facebook  应用程式审核项目之一。

2020 年开始 Facebook 提升对 Facebook 帐户的保护,针对外部网站隐私政策的审核更加严格。建议您先回到「SHOPLINE 后台 > 网店设计 > 网店分页」中,使用「文字分页」或是「进阶分页」建立商店的「隐私政策 Privacy Policy」页面,再取得网页连结放置在此栏位中。撰写格式可参考:示范商店案例(仅供参考,请依实际规范及需求撰写),並请在分页「网路搜寻最佳化/SEO设定」的「标题」中包含「隐私权政策  Privacy Policy」;以及在「描述性URL」 中包含「privacy-policy 」让 Facebook 容易识别页面是隐私权相关内容。

____.png

设定完成后,再回到 上方设定画面中,在「2. 隐私政策网址」处填入:

2_______.png

 

  •       如果您的商店使用独有网址,您会类似这个网址:
    https://www.test123.com/pages/privacy-policy        
  •       如果您的商店使用免费网址,您会类似这个网址:https://test456.shoplineapp.com/pages/privacy- policy

以上「红字粗体的范例网址」请更换成您的商店网址,若不确定您商店独有网址和免费网址,可进入商店前台首页复制网址。 

*注意:请填写您的商店网址而非 SHOPLINE 官方网址。

 

3. 用户资料删除(必填)

3_______.png

如果栏位空白请输入商店首页网址,例如:https://www.test123.com 或是 https://www.test123.com.tw 等,请注意:务必要填写 https:// 开头的安全性加密网址。

 

4. 类别(必填)

4___.png
请依照您的商店贩售的商品或是服务类型,从选单中选取合适的选项。

 

5. 服务条款网址(建议填写)

5_______.png
此网址连结会显示在Facebook 登入应用程式的视窗「应用条款」中,我们会建议您编辑商店的预设分页「条款与细则」,并依实际情况描述您商店的服务项目与交易细则,完成后将分页网址连结放置在此栏位中。

 

6. 应用图标(必填)

6_____.png
应用图标会和「显示名称」一起出现在顾客登入流程,建议您上传商店 Logo 或是品牌图示完整呈现给顾客,减少顾客认为是诈骗或是非正式管道搜集用户资料的疑虑。 Facebook 建议上传尺寸为 1024 x 1024 像素,档案大小 5MB 以内的图片。   

 

7. 应用用途(必填)

7______.png

  • 如果您是为自己商店建立的,请点选「你自己或你的公司」
  • 如果您是 代理商/代营运 为商家建立的话,请点选「客户」 

8. 网站地址(必填)
    接下来请往下滑,到「网站」的区块,如果栏位空白请再次输入商店首页网址,例如:https://www.test123.com 或是 https://www.test123.com.tw 等,请注意:务必要填写 https:// 开头的安全性加密网址 ,输入完毕确认后请点选右下角的「保存更改」按钮。 

_____.png

 

步骤六:进入「Facebook 登录 > 设置」中设定

接下来请到左侧主控版,进入产品「Facebook 登录」>>「设置」中的「 客户端 OAuth 设定」进行设定。

SC_Step11.png 

1. 将指定功能开关开启

请开启以下 4 个功能开关,设定完毕后可以与下图比对确认:

  1. 开启「OAuth 客户端授权登录」    
  2. 开启「OAuth 网页授权登录」
  3. 开启「对跳转 URI 使用严格模式」
  4. 开启「强制启用 HTTPS」 SC_Step12.png

 

2. 在「有效 OAuth 跳转 URI」输入连结
    请依照以下方法取连结并贴到在「有效 OAuth 跳转 URI」栏位,贴上后按下键盘的「Enter(Window) / Return(Mac)」键,当网址变成蓝底灰字时才代表成功输入。   

  • 如果您的商店使用独有网址,例如:https://www.test123.com 
    請在欄位中貼上:https://www.test123.com/users/auth/facebook/callback  
  • 如果您的商店使用免费网址,例如:https://test456.shoplineapp.com
    请在栏位中贴上:https://test456.shoplineapp.com/users/auth/facebook/callback

以上「红字粗体的范例网址」请更换成您的商店网址,若不确定您商店独有网址和免费网址,可进入商店前台首页复制网址。

*注意:請填寫您的商店網址而非 SHOPLINE 官方網址。

完成设定后 请点选右下角「保存更改」按钮。

SC_Step13.png

*注意:送出之后请再检查,「对跳转 URI 使用严格模式」开关是否变成关闭(「否」的状态),如果变成关闭(「否」的状态)请再次开启(将状态改为「是」)并再次「保存更改」即可。  

 

步骤七:确认应用程式资料授权状态

请到「应用程式审查 > 权限和功能」确认 将 email 以及 public_profile 选项开启取得进阶的存取权限。

 

*请留意,若是您的应用程式被 Facebook 停用,会需要先完成 Facebook 的审核才能开启进阶授权的开关,请您先确认应用程式的设置正确后先提交重新审核予 Facebook 确认。

 

步骤八:确认应用程式状态

请查看画面上方「应用编号」旁的「开关」,开关应为的「开启」以及会显示「状态:已上线」这样应用程式才有办法使用。(如果开关是关闭的状态,则会显示「开发中」)SC_Step14.jpg


开启开关时,请点选视窗中的「切换模式」,将您的应用程式调整为「已上线」的状态。如果应用程式的开关是「关闭」的话,顾客将无法使用 Facebook 帐号登入商店喔!

SC_Step7-2.png

 

步骤九:准备好要输入在商店后台的资讯

请到左侧主控版,进入「设置 > 基本」, 点击「应用密钥」旁的「显示」按钮,让其代码显示出来。将「应用编号」以及「应用密钥」复制下来,接下来就要回到 SHOPLINE 商店后台进行设定了!SC_Step15.jpg 

步骤十:回到 SHOPLINE 商店后台设定  

请到您 SHOPLINE 商店后台,进入「设定」>>「顾客设定」找到「顾客以 Facebook 登录设定」栏位,并将功能开启。开启后将「应用编号」以及「应用密钥」贴到对应的栏位中,完成后请点击右下角的「更新」按钮保存设定,您的商店就可以使用Facebook 登入功能。

SC_Step16.png

 

步骤十一:将贵司相关同仁 Facebook 帐号都加入管理员

由于 Facebook for Developers 应用程式是绑定并建立在个人帐号旗下,为避免贵司内部人员异动建议使用贵司管理的 Facebook 个人帐号,并请留意「步骤十」在最后新增贵司相关人员同为此应用程式管理员,以便后续维护管理。

_____.png

 

步骤十二:测试是否能正常使用 Facebook 帐号一键注册/登录功能 

恭喜您设定完毕,最后就要进入到您的商店前台进行测试!

进入您商店的会员注册/登入页面,并点选 Facebook 注册/登入 按钮,会跳出 Facebook 视窗请求顾客登入并授权给您的应用程式(应用程式显示名称及图示就是在这个流程出现的)。

这时候顾客必须先授权 Facebook 登入应用程式存取资料,才可使用 Facebook 登入功能,如果顾客选择不授权的话,就无法使用 Facebook 登入功能。

SC_Step17.jpg

此功能设定步骤较多,如有操作设定的问题,欢迎您再将问题画面截图下来提供给线上顾问,我们会协助您处理。 

 

二、于结帐页面显示「Facebook 登入」按钮

方法一

前往「SHOPLINE 商店后台 > 设定 > 顾客设定」将「顾客以 Facebook 登入设定」功能开启,并贴上「应用程式编号」及「应用程式密钥」。(请参考上述设定步骤十

___2021-10-21___3.36.27.png

 

方法二

前往「商店后台 > 第三方服务 > Facebook」在「连接 Facebook 帐号」栏位点按「连接」,并填入 Facebook  App ID 、 Facebook  App Secret 资料。

___2021-10-21___3.00.25.png

 

接着开启「网店 Facebook 登入」功能。

___2021-10-21___3.28.44.png

 

无论是透过上述何种方法,在以下页面皆会出现「Facebook 登入」按钮,顾客可直接点选按钮登入:

*备注:只有透过 Facebook 注册的顾客才能使用「Facebook 登入」按钮。

  1. 会员注册/登入页面
    ___2021-10-25___11.41.41.png

  2. 一般结帐页面:购物车、填写资料画面
    ___2021-10-21___3.54.41.png

    ___2021-10-21___3.55.20.png

  3. 快速结帐页面
    ___2021-10-21___3.56.03.png

 

三、常见问题与排除方法

1. 若是顾客无法使用 Facebook 登入,该如何协助排除?

a. 显示「无法使用此功能」的提示:

由于 Facebook 会不定期进行应用程式审核与更新,这边会建议店家可以定时回到 Facebook for Developers 的商店应用程式,查看左侧「提示」内的「收件匣」查看 Facebook 最新提示,并依照讯息内容回覆 Facebook (尤其是 Facebook 向您发出的「资料使用情况检查」);并查看「设定 > 进阶」中的 API 版本,将版本下拉选取最新版本。

fb_login_hint1.png

 

请在应用程式「收件夹」务必回覆 Facebook 资料使用情况,勾选下列栏位后点选「继续」提交回覆,以免遭到 Facebook 停用您的应用程式导致无法使用此登入功能:

___2021-03-12___4.01.41.png

 

_____api__.png

 

 

b. 显示「No authorization code」或是无法存取电邮等提示:

Facebook 注册/登入时,商店会存取顾客 Facebook 帐号的姓名与电邮建立会员资料,若是顾客使用 Facebook 登入时有出现红色 no authorization code 的授权提示,请引导顾客至 Facebook 帐号设定中确认有填写姓名、电邮并至「Facebook > 设定及隐私 > 设定」确认「一般」的联络资料中有填写姓名、主要联络电邮,以及在「应用程式及网站」同意授权登入功能使用,与收信完成认证。

mceclip0.png

login_hint_2.png

 

遇到无法存取授权电邮的情况,也请您同时确认您的「Facebook 应用程式应用程式审查 > 权限和功能」确认 将 email 以及 public_profile 选项开启取得进阶的存取权限,这样您的商店才能透过顾客 Facebook 帐号资料建立会员:

 

 

c.登入时显示需要确认进阶权限以:

Facebook 应用程式版本、审核的部分,会通知您需要确认开启应用程式的进阶授权取得顾客的资料,若是您查看到以下的讯息:mceclip0.png

请您至应用程式的「应用程式审查 > 权限和功能」确认 将 email 以及 public_profile 选项开启取得进阶的存取权限。

 

d.若上述三个情况已经确认排除,但是顾客还是无法登入使用,请您重新依照此文章的设定步骤确认 Facebook 应用程式的「设定栏位」与「上线状态」,若有问题也请您提供相关的截图从后台联系线上顾客协助您。

 

2. 我已有 Facebook 快速登入功能,但为什么登入在 Facebook for Developers 上找不到我的应用程式?应用程式的编号怎么与后台不同?

若商店已有 Facebook 快速登入功能,表示已经在 Facebook 建立过快速登入的应用程式,Facebook for Developers 应用程式是绑定个人 Facebook 帐户管理的,因此若使用与先前不同人的 Facebook 帐户登入,也并未有原先应用程式的管理权限时,在 Facebook for Developer 中会找不到安装在商店的应用程式。

这时会建议您请原先设定该功能的同仁协助登入 Facebook for Developer 并调整商店的应用程式,并参考「步骤十一:将贵司相关同仁 Facebook 帐号都加入管理员」将贵司相关同仁都纳入管理员,以便后续维护与管理。

 

3. 我的应用程式为什么会被 Facebook 停用?申诉后要等候多久呢?

Facebook 登入功能的运作是由店家的应用程式提供,若是您的应用程式没有依照上述的设置完成造成顾客无法使用、隐私政策不完整等情况(有时也会有误判的情形),Facebook 侦测后可能会向您的应用程式提出警告并停用,这时候会建议您详读讯息中的内容确认您的应用程式设置完整。

确认您的应用程式已经符合规范、设置完整后,您可以透过应用程式中的申诉管道请 Facebook 协助您重新审核,通过后您商店的 Facebook 登入功能才能重新运作,但是我们并无法确认 Facebook 审核的时间,若申诉后等候时间较久,您可以重新提出申诉或联系 Facebook 确认审核的进度,或是考虑参考文章步骤重新建立一个新的应用程式让顾客重新授权后使用。mceclip1.png

mceclip0.png

 

4. 我收到 Facebook 通知我的隐私政策不完整,请问要如何修正?

Facebook 审核时会特别注重应用程式网址栏位以及隐私政策的描写,若是不完整要请您参考此篇文章的「步骤五:基本资料」的第二点(撰写格式可参考:示范商店案例),确认您网站隐私政策网页的内容以及是否有提交到应用程式中的栏位,请您确认完毕后回覆 Facebook 讯息请他们重新为您审核。mceclip2framed.png

 

 

 

 

 

还有其它问题?提交请求

评论