Google API integration with Salesforce

Google API integration with Salesforce

Companies are getting increasingly reliant on applications such as Salesforce.com and Google Drive. The ability to share information between these applications enables streamlining business processes.

We can integrate Google API’s with salesforce by using below steps.

Follow the below steps for the integration of Salesforce and Google drive :-

  • Create App in Google Console
  • Open Google Drive console. Here is the link for console:
https://console.developers.google.com/apis
  • Select a project. If you don’t have any project, then create one.
  • Select ENABLED APIS AND SERVICES
  • Choose the needed API. For this enable “Google Drive API” and “Google Picker API”
  • Go to OAuth consent screen. Add Application Name, add Application Logo (if needed) & then select scope. Scope defined what type of access your app can guarantee.
  • Create credentials, choose for that OAuth client ID.
  • Credentials are needed to connect our Google project with Salesforce.
  • Select Web Application, add some Name, leave other fields blank. We don’t know Authorized redirect URLs yet.
  • Then you should receive a client ID and client secret.
Figure 1. Created credentials in google console
  • Configure Salesforce Auth. Provider
  • In Salesforce go to Setup > Auth. Provider > New and select Open ID Connect
  • Select Name, paste Consumer Key and Consumer Secret. You can find it in Credentials > OAuth 2.0 client IDs.
  • Add endpoints:
  • Authorize Endpoint URL

https://accounts.google.com/o/oauth2/auth?access_type=offline&approval_prompt=force

Token Endpoint URL   https://accounts.google.com/o/oauth2/token

  • Give a default Scope as https://www.googleapis.com/auth/drive
  • After saving you can find Callback URL in Salesforce Configuration section. Copy the link and paste it in your credentials (Credentials > OAuth 2.0 client IDs).
Figure 2. Auth Provider

  • Remember: “Domain must be added to the authorized domains list before submitting.”
  • Test your connection. Open Test-Only Initialization URL and OAuth-Only Initialization URL.
Figure 3. OAuth 2.0 Client IDs

Go to Setup > Remote Site Settings > New Remote Site

  • Add remote site setting

Fulfill fields, as Remote Site URL use: https://www.googleapis.com

  • Create new visualforce page

<apex:page showHeader=”true” sidebar=”false” standardStylesheets=”false” docType=”html-5.0″>

    <script type=”text/javascript”>

    // The Browser API key obtained from the Google API Console.

    // Replace with your own Browser API key, or your own key.

    var developerKey = ‘AIzaSyCBPNCs3tdQePgF0zUac4ua3bhCDD9-Byg’;

    // The Client ID obtained from the Google API Console. Replace with your own Client ID.

    var clientId = “340258919089-24i3olodcgptipdvd8h5ru4esnf5nog8.apps.googleusercontent.com”

    // Replace with your own project number from console.developers.google.com.

    // See “Project number” under “IAM & Admin” > “Settings”

    var appId = “340258911289”;

    // Scope to use to access user’s Drive items.

    var scope = [‘https://www.googleapis.com/auth/drive.file’];

    var pickerApiLoaded = false, oauthToken, loadAuth=false;

    // Use the Google API Loader script to load the google.picker script.

    function loadPicker() {

      gapi.load(‘auth’, {‘callback’: onAuthApiLoad});

      gapi.load(‘picker’, {‘callback’: onPickerApiLoad});

    }

    function onAuthApiLoad() {

    if(loadAuth==true) {

      window.gapi.auth.authorize(

          {

            ‘client_id’: clientId,

            ‘scope’: scope,

            ‘immediate’: false

          },

          handleAuthResult);

          }

    }

    function onPickerApiLoad() {

               pickerApiLoaded = true;

               createPicker();

    }

    function handleAuthResult(authResult) {

               if (authResult && !authResult.error) {

                               oauthToken = authResult.access_token;

                               createPicker();

                }

    }

    // Create and render a Picker object for searching images.

    function createPicker() {

      if (pickerApiLoaded && oauthToken) {

             var picker = new google.picker.PickerBuilder()

            .enableFeature(google.picker.Feature.NAV_HIDDEN)

            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)

               .enableFeature(google.picker.Feature.SUPPORT_DRIVES)

            .setAppId(appId)

            .setOAuthToken(oauthToken)

            .addView(new google.picker.DocsView(google.picker.ViewId.DOCS).setIncludeFolders(true).setSelectFolderEnabled(true))

            .setDeveloperKey(developerKey)

            .setCallback(pickerCallback)

            .build();

         picker.setVisible(true);

      }

    }

    // A simple callback implementation.

    function pickerCallback(data) {

          if (data.action == google.picker.Action.PICKED) {

                var fileId = data.docs[0].id;

          }

          if( data[google.picker.Response.ACTION] === google.picker.Action.PICKED ) {

                var downloadUrl;

                if( data.viewToken[0] === “upload” ) {

                    downloadUrl = data[google.picker.Response.DOCUMENTS][0].downloadUrl;

                }

                else {

                    downloadUrl = data[google.picker.Response.DOCUMENTS][0].url;

                }

                document.getElementById( “result” ).innerHTML = downloadUrl;

                document.getElementById( “result” ).setAttribute( “href”, downloadUrl );

          }

    }      

         function uploadFiles() {

               loadAuth = true;

               onAuthApiLoad()

        }

    </script>

    <a onclick=”uploadFiles()”>

               <div class=”slds-text-heading_large”>Open GDrive</div>

    </a>

    <a id=”result” target=”_blank”></a>

    <!– The Google API Loader script. –>

    <script type=”text/javascript” src=”https://apis.google.com/js/api.js?onload=loadPicker”></script>

</apex:page>

Below is the preview of  Visualforce page

Figure 4 Preview of vf page (On clicking of  Open GDrive button this window will popup )
Figure 5 After sign in to Gmail it will ask for permission (click allow)
Figure 6. Shows the Google Drive files in Visualforce page popup