Quickbooks Online - How to implement SSO with intuit in Ruby/Rails

Question

I was able to connect with to Intuit using the Minimul/QboApi gem and get the "Connect to Quickbooks" button working with oauth2 based on the example provided on Github. However neither the gem nor the samples show how to implement single sign on with Intuit. In the example provided by Minimul, the Connect To Quickbooks button is produced by intuit's javascript found at https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.5.js and a setup script and the tag . The tag appears to have been deprecated. Or at least, it doesn't appear to do anything other than produce the button with the right text and logo on it.

But bottom line, I have been unable to find any documentation on the ipp.anywhere.js package, and not even sure if i's meant to used with oauth2 since it's not mentioned anywhere. I believe that the connect to intuit button does the right things, but the guidelines seem pretty strict about what that the button needs to say the right thing and have th eright logo or they will reject it in the store. They also seem to suggest that users are much more likely to try something if an SSO with Intuit workflow is enabled. Any help appreciated.

Answer 1

After some further work, I figured out a solution that can create a 'log in with Inuit button' , although it's a bit of a javascript hack. First, I determined that the only thing I really needed to change was the button image. In other respects the code behind ` works fine for either a "login with intuit" or "connect to intuit work flow" . The only problem is the button image.

Here is the code (adapted from Minimul/QboApi) to get access and oauth2 refresh tokens via a "Connect to Quickbooks" button.

Setup in the controller code in login or sessions controller:

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

Here is the code required to generate the button on the view. (The view needs to load jquery as well in order for the script to work.)

<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>

This code produces the following html on the page delivered to the client:

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

This code produces a button with the Connect with QuickBooks image, and an event handler inside intuit.ipp.anywhere-1.3.5.js attaches itself to the click event.

The problem is that the button is styled by the class=intuitPlatformConnectButton attribute inside the generated <a> tag, so if you want a "login with intuit button instead of a connect with intuit button the class on the anchor needs to be changed to class='intuitPlatformLoginButtonHorizontal' but still needs to attach to the event handler defined for <ipp:connecttointuit>. The best solution that doesn't require mucking with intuit.ipp.anywhere is to create the connect button and hide it, and then create another tag styled with class=intuitPlatformLoginButtonHorizontal whose click event calls click on the hidden connect button. I use AngularJs on my login page, so I handle the click with ng-click, but it could be done simply with jquery alone.

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>

and the controller code:

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

This will result in a redirect upon authentication to the supplied redirect url, where you can use openid to get the user credentials.