Google Drive Authentication In Salesforce - Easy Steps (Authentication Part 2)

Now where comes part 2 of authentication. This time it's with Google Drive.

In this blog Authentication with Google is explained so developers can get started.

Step 1 : Create  account on google (hope you already have), then go to developer console to create a project. Now click on project which is newly created then click on APIs and auth > APIs and make Drive API "on".

Step 2 : Now "Create New Client ID " which will look something like this :

Now we will use this info in salesforce to authenticate.

Step 3 : Create this apex class in Salesforce

public class GoogleDriveController
{
    //Fetched from URL
    private String code ;
    private string key = '134427681112-ld4vp2l1jut3aj2fktip776081nhn8l3.apps.googleusercontent.com' ;
    private string secret = 'hdHNk4GjNtkR4nNL1SqCfRk_' ;
    private string redirect_uri = 'https://c.ap1.visual.force.com/apex/GoogleDrivePage' ;
    
    public GoogleDriveController()
    {
        code = ApexPages.currentPage().getParameters().get('code') ;
        //Get the access token once we have code
        if(code != '' && code != null)
        {
            AccessToken() ;
        }
    }
    
    public PageReference DriveAuth()
    {
        //Authenticating
        PageReference pg = new PageReference(GoogleDriveAuthUri (key , redirect_uri)) ;
        return pg ;
    }
    
    public String GoogleDriveAuthUri(String Clientkey,String redirect_uri)
    {
        String key = EncodingUtil.urlEncode(Clientkey,'UTF-8');
        String uri = EncodingUtil.urlEncode(redirect_uri,'UTF-8');
        String authuri = '';
        authuri = 'https://accounts.google.com/o/oauth2/auth?'+
        'client_id='+key+
        '&response_type=code'+
        '&scope=https://www.googleapis.com/auth/drive'+
        '&redirect_uri='+uri+
        '&state=security_token%3D138r5719ru3e1%26url%3Dhttps://oa2cb.example.com/myHome&'+
        '&login_hint=jsmith@example.com&'+
        'access_type=offline';
        return authuri;
    }
    
    
    public void AccessToken()
    {
        //Getting access token from google
        HttpRequest req = new HttpRequest();
        req.setMethod('POST');
        req.setEndpoint('https://accounts.google.com/o/oauth2/token');
        req.setHeader('content-type', 'application/x-www-form-urlencoded');
        String messageBody = 'code='+code+'&client_id='+key+'&client_secret='+secret+'&redirect_uri='+redirect_uri+'&grant_type=authorization_code';
        req.setHeader('Content-length', String.valueOf(messageBody.length()));
        req.setBody(messageBody);
        req.setTimeout(60*1000);

        Http h = new Http();
        String resp;
        HttpResponse res = h.send(req);
        resp = res.getBody();
        
        System.debug(' You can parse the response to get the access token ::: ' + resp);
   }
}

Step 4 : Create this visualforce page (GoogleDrivePage) in Salesforce

Step 5 : Replace the code :

You can replace these three variables according to your settings (created in step 2)

private string key = '134427681112-ld4vp2l1jut3aj2fktip776081nhn8l3.apps.googleusercontent.com' ;
private string secret = 'hdHNk4GjNtkR4nNL1SqCfRk_' ;
private string redirect_uri = 'https://c.ap1.visual.force.com/apex/GoogleDrivePage' ;

Step 6 : Don't forget to create remote site setting :

Step 7 : All set to go, now hit the page "https:// ..... /apex/GoogleDrivePage", make sure your debug is on. Once authenticated with google debug will print the access token.

Now you can use this access token for further requests.

Please note, code is not beautified as this is just to explain how you can authenticate google with salesforce. A lot more creativity can be applied here.


Happy Coding!!

Integrating Google Maps in Salesforce

Requirement is to show the location of my Account on Google Maps. It looks difficult but actually it is very simple to implement.


Just create a new visualforce page with this code

<apex:page standardController="Account">

<script src="http://maps.google.com/maps?file=api">
</script>

<script type="text/javascript">

var map = null;
var geocoder = null;

var address = "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}";

function initialize() {
if(GBrowserIsCompatible())
{
  map = new GMap2(document.getElementById("MyMap"));
  map.addControl(new GMapTypeControl());
  map.addControl(new GLargeMapControl3D());
  
  geocoder = new GClientGeocoder();
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        document.getElementById("MyMap").innerHTML = address + " not found";
      } else {
        map.setCenter(point, 13);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        marker.bindInfoWindowHtml("Account Name : <b><i> {!Account.Name} </i></b> <br/> Address : "+address);
      }
    }
  );
}
}
</script>


<div id="MyMap" style="width:100%;height:300px"></div>
<script>
    initialize() ;
</script>

</apex:page>

As you can see that I have used standard controller so you need to pass the account Id in URL. Let's say if the page name is "GoogleMaps" then the URL will look something like this : ".../apex/GoogleMaps?id=YOUR_ACCOUNT_ID".

When you click on the balloon it will show you the Account name and the address, you can change it according to your need by changing the code of line "marker.bindInfoWindowHtml"


Use this page as in line visualforce page on native layout and enjoy the Google maps with Salesforce.


References
http://code.google.com/apis/maps/documentation/webservices/
http://code.google.com/apis/maps/index.html