在线快速手册-如何在Ruby / Rails中通过intuit实现SSO

时间:2019-01-06 04:01:41

标签: ruby-on-rails intuit-partner-platform quickbooks-online

基于Github上提供的示例,我能够使用Minimul / QboApi gem与Intuit进行连接,并获得与oauth2配合使用的“连接到Quickbooks”按钮。但是,gem和示例均未显示如何使用Intuit实现单点登录。在Minimul提供的示例中,“连接到Quickbooks”按钮由位于https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.5.js上的intuit javascript生成。 以及安装脚本和标签。该标签似乎已被弃用。或者至少,除了产生带有正确文本和徽标的按钮外,它似乎没有做任何其他事情。

但是最重要的是,我一直无法在ipp.anywhere.js包中找到任何文档,甚至不确定我是否打算与oauth2一起使用,因为在任何地方都没有提及它。我相信“连接到intuit”按钮可以做正确的事情,但是对于按钮需要说正确的事情并具有正确的徽标,否则准则似乎非常严格,否则他们将在商店中拒绝它。他们似乎还建议,如果启用了具有Intuit工作流程的SSO,则用户更有可能尝试某些操作。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

经过进一步的工作后,我想出了一个可以创建“使用Inuit按钮登录”的解决方案,尽管这有点像JavaScript一样。首先,我确定我真正需要更改的唯一一件事就是按钮图像。在其他方面,`后面的代码对于“使用intuit登录”或“连接到intuit工作流程”也可以正常工作。唯一的问题是按钮图像。

此处是通过“连接到Quickbooks”按钮获取访问权限和oauth2刷新令牌的代码(改编自Minimul/QboApi)。

在登录或会​​话控制器中的控制器代码中设置:

def new
  @app_center = QboApi::APP_CENTER_BASE # "https://appcenter.intuit.com" 
  state= SecureRandom.uuid.to_s
  intuit_id = ENV["CLIENT_ID"]
  intuit_secret = ENV["CLIENT_SECRET"]
  client = Rack::OAuth2::Client.new(
    identifier: intuit_id,
    secret: intuit_secret,
    redirect_uri: ENV["OAUTH_REDIRECT_URL"],
    uthorization_endpoint:"https://appcenter.intuit.com/connect/oauth2",
    token_endpoint: "https://oauth.platform.intuit.com/oauth2/v1/tokens/bearer",
    response_type: "code"
  )
  #make sure to include at least "openid profile email" 
  #in the scope to you can retrieve user info.
  @uri = client.authorization_uri(scope: 'com.intuit.quickbooks.accounting openid profile email phone address', state: state)
end

这是在视图上生成按钮所需的代码。 (该视图还需要加载jquery才能使脚本正常工作。)

<script type="text/javascript" src="<%= @app_center %>/Content/IA/intuit.ipp.anywhere-1.3.5.js">
</script>
<script>
    intuit.ipp.anywhere.setup({
        grantUrl: "<%== @uri %>",
        datasources: {
            quickbooks: true,
            payments: false
        }
    });
</script>
<div>
 <ipp:connecttointuit></ipp:connecttointuit>

此代码在交付给客户端的页面上产生以下html:

<ipp:connecttointuit>
   <a href="javascript:void(0)" class="intuitPlatformConnectButton">Connect with QuickBooks</a>
</ipp:connecttointuit>

此代码产生一个带有“与QuickBooks连接”图像的按钮,并且intuit.ipp.anywhere-1.3.5.js中的事件处理程序将自身附加到click事件。

问题在于按钮是通过生成的class=intuitPlatformConnectButton标记内的<a>属性设置样式的,因此,如果要使用“使用intuit按钮登录,而不是使用intuit按钮连接”,锚点需要更改为class='intuitPlatformLoginButtonHorizontal',但仍需要附加到为<ipp:connecttointuit>定义的事件处理程序上,不需要与intuit.ipp.anywhere混用的最佳解决方案是创建连接按钮并隐藏它,然后创建另一个样式为class=intuitPlatformLoginButtonHorizontal的标签,其单击事件调用单击隐藏的connect按钮。我在登录页面上使用AngularJs,因此我使用ng-click处理该单击,但是只需使用jquery即可完成。

new.html.erb:

<div>
   <a href="javascript:void(0)"  ng-class="'intuitPlatformLoginButtonHorizontal'"ng-click="intuit_login()"></a>
</div>
<div>
   <ipp:connecttointuit id="connectToIntuit" ng-hide="true"><  </ipp:connecttointuit>
</div>

和控制器代码:

 $scope.intuit_login = function() {
   let el = angular.element("#connectToIntuit:first-child")
   el[0].firstChild.click();
 }

这将导致身份验证后重定向到提供的重定向URL,您可以在其中使用openid获取用户凭据。