总结：接入第三方平台登录注册项目

Posted 2020-10-05

 一、需求：

facebook、naver、kakao在登录注册浮层的第三方登录需求，要求用户在第三方登录流程中不能中断浮层，即：用户在online登录注册浮层中发起第三方登录时，浮层不能被关闭或者刷新，只能通过将第三方登录的信息会传到过来后，进入下一个流程。

 

二、第三方登录的流程：

用户在我们的登录注册浮层中发起第三方登录——>打开第三方登录页面——>第三方登录成功后，将信息回传到浮层，然后走接下来的流程。

 

三、第三方登录碰到的问题及解决：

【一】第三方平台给开发者造成的局限性:

1）为了安全，只有在第三方接入平台注册过的页面才可以拿到第三方登录成功后的信息，另外第三方平台提供给开发者接入的方式不尽相同，比如    facebook比较友好，一个第三方平台开发者帐号能够注册不限个数的登录成功后的回调页面，而像kakao、naver就相当不友好了，不提供英文文档是一方面，kakao可以注册多个domain，但只能制定一个path，naver可以注册5个页面。那问题来了，当一个公司有多个应用多条产线都想接入该第三方平台，如果一个开发者帐号只能配置有限个页面肯定是行不通的。那就申请多个开发者帐号喽，但是可能会出现这种现象：一个用户在我们公司产品A上做了第三方登录，如果用户之前没有应用帐号，我们给他创建了一个，同样是这个用户在我们公司产品B上做了第三方登录，我们又给他创建了一个应用帐号。同一个用户同一个第三方帐号登录两遍我们都给他创建了两个帐号。这种现象会由什么原因产生呢？——这两个第三方入口来自两个独立的第三方开发者账户。解决方法有两个：

• 允许多个开发者帐号，各个产线可以各自接入，后端进行所有信息的统一。
• 只有一个开发者帐号，大伙都公用页面吧，反正注册页面也就只做一件事，就是把第三方登录信息拿到，然后传到自己的页面。

     最后选择的方案是2——公用页面。kakao这类的，虽然只有限制的注册，但它还是分了 android ios restfulapi三种接入入口。

2）调试困难。facebook可以批量生产测试帐号，但测试帐号只能做直接登录，对于是否有我们平台帐号需要绑定的case无法覆盖到，kakao naver就只能手工注册帐号进行测试。幸好有我们应用的FAT环境，可以在FAT环境里头随意注销帐号随意生成帐号。

3）debug过程很困难。因为第三方登录是在第三方完成的，中间过程很难控制和复现，另外如果拿到的登录信息已经使用，比如拿这个登录信息做了我们应用中某个接口请求，那这个登录信息就不能做二次使用去复现问题。所以有关这块的话只能依靠编码人员，自己用fiddle做好相关页面的自测，不然直接接入第三方后再测，解决bug的代价会成倍上升。

 

【二】开发技术难点

1）保证浮层不被关闭，不被刷新，第三方登录页面你如何打开：首次打开采用_blank，之后redirect使用_self方式打开页面。

2）页面通信，如果将登录信息进行回传，通过父窗口open在第三方注册过的页面，通过注册过的页面打开第三方登录页面，第三方登录成功后它自己会进行一次redirect，redirect到注册过的页面，此时拿到url中的登录信息，进行回传，回传方式就是子页面通过window.opener调用父页面的js方法。

3）浮层可能在各种产品产线中使用，如何父子页面js跨域问题。iframe + window.name是一个可行但是繁琐的方案。具体情况可以解决，可以通过配置多域名站点进行跨域，即在浮层打开第三方注册过的页面的时候，将当前domain带上，当完成登录进行回传登录信息的时候再做一次多域名站点的跳转，跳转到domain下的站点，然后再在该站点下进行回传。只要把在第三方注册过的页面配置成多域名站点即可。