Linkedin OAuth认证,带有React前端&x2B;Rails API

Linkedin OAuth认证,带有React前端&x2B;Rails API,oauth,devise,linkedin,ruby-on-rails-5,omniauth-linkedin,Oauth,Devise,Linkedin,Ruby On Rails 5,Omniauth Linkedin,到目前为止,我的网站一直在使用Rails直接生成的fullstack视图,对于linkedin身份验证,我使用重定向uri路由到designe::OmniAuthCallbackController来处理逻辑 GET https://www.linkedin.com/oauth/v2/authorization?redirect_uri=my_devise_omniauth_callback_url 我想知道如何将其迁移到独立的React前端+独立的Rails服务器。React应用程序应“生成

到目前为止,我的网站一直在使用Rails直接生成的fullstack视图,对于linkedin身份验证,我使用重定向uri路由到
designe::OmniAuthCallbackController
来处理逻辑

GET https://www.linkedin.com/oauth/v2/authorization?redirect_uri=my_devise_omniauth_callback_url
我想知道如何将其迁移到独立的React前端+独立的Rails服务器。React应用程序应“生成”一个linkedin授权弹出窗口,并等待所有授权过程完成后再关闭自身并在主窗口上继续注册

我已经通过了,我看到从批准连接到获取用户信息的过程相当长。我很高兴Desive/Omniauth在服务器端为我完成了大部分工作,我宁愿保持这种方式,而不是在前端编写这种逻辑

(顺便问一下,假设Linkedin OAuth流与类似是否安全?)

我不确定这是否可以通过我在React应用程序上看到的方式实现(特别是linkedin弹出窗口和主React视图之间的数据通信)。另外据我所知,rails中的
omniauth gem
希望在OAuth提供者可以查询提供者两次之前从其接收一次性令牌(第一次交换访问令牌,第二次获取用户信息)。下面的方法行吗

  • 假设我的React客户端应用程序托管在
    Client.example.com
  • 假设我的服务器api托管在
    api.example.com
  • React应用程序打开一个弹出窗口,用于使用
    • (1) 直接指向api.example.com的重定向uri
    • (2) client.example.com上的重定向uri,然后我的React客户端必须将令牌转发到api.example.com
  • 授权代码在某种程度上到达了我的服务器
    api.example.com
    ,它获取访问代码并从Linkedin检索用户数据。它会将可用于注册的
    标识返回到浏览器
  • identity\u id
    实际上返回到弹出窗口,并传输回主React应用程序(如何?)

我也遇到了同样的问题,我找到了一个简单但有趣的解决方案:-)
(我使用
designe
omniauth-linkedin
gems中的所有OAuth逻辑。)

在我的应用程序中,您可以开始填写表单,并且在保存表单之前需要登录。我需要一种在不丢失表单数据和不重新加载页面的情况下记录用户日志的方法

当用户访问页面时,会给他一个唯一的uuid来识别他。此uuid用于启动websocket连接,以便稍后可以将数据直接推送到该选项卡

我用javascript
window.open()
在一个新选项卡中打开LinkedIn OAuth,这样我就可以用
window.close()
关闭这个选项卡

您可以将其他参数传递给OAuth身份验证,我传递唯一的uuid,以便在身份验证成功时恢复它,并且使用此uuid,我可以通过websocket发送消息来通知第一个选项卡(在我的应用程序中,我发送用户信息以更新当前用户的状态)

身份验证后,我在只包含
window.close()
的页面上重定向用户

在Rails中设置LinkedIn OAuth 您将需要一个功能完善的Omniauth/Devise身份验证

omniauth_callback_controller.rb

class OmniAuthCallbackController
user.rb

def self.connect\u to\u linkedin(auth,signed\u in\u resource=nil)
user=user.where(提供程序:auth.provider,linkedin\u uid:auth.uid)。首先
如果用户
返回用户
其他的
registered_user=user.where(电子邮件:auth.info.email)。首先
如果是注册用户
返回注册用户
其他的
user=user.create(lastname:auth.info.last\u name,firstname:auth.info.first\u name,
提供者:auth.provider,linkedin\u uid:auth.uid,电子邮件:auth.info.email,
linkedin_令牌:auth.credentials.token,linkedin_secret:auth.credentials.secret,
linkedin\u图片:auth.extra.raw\u info.pictureUrl,密码:designe.friendly\u令牌[0,20])
结束
结束
结束
routes.rb

design_用于:用户、控制器:{
omniauth_回调:“omniauth_回调”,
会话:“用户/会话”
}
现在,如果您访问
/users/auth/linkedin
,您将能够使用linkedin OAuth登录/创建用户

网箱连接 创建工作提供频道.rb

class CreateJobOfferChannel
创建_job_offer.js.coffee

class window.CreateJobOffer
构造函数:(参数)->
自我=@
@频道=App.cable.subscriptions.create{
频道:“CreateJobOfferChannel”,来宾:params[“来宾”]
},自我
@onReceive=params[“onReceive”]| | null
接收:(数据)=>
@onReceive(数据)如果@onReceive
反应前端 链接到LinkedIn OAuth(带有Desive和omniauth)


打开(`/users/auth/linkedin?guestGuid=${guestGuid}`)}>
使用LinkedIn登录

希望有帮助:)

我也遇到了同样的问题,我找到了一个简单但有趣的解决方案:-)
(我使用
designe
omniauth-linkedin
gems中的所有OAuth逻辑。)

在我的应用程序中,您可以开始填写表格并需要登录