简体   繁体   中英

URL Shortener - auto shorten URL

In brief, a user select a document from Google drive using the Google Drive Picker API and then a URL is generated. I would like to shorten that URL for the current is too lengthily as its generated.

Below is the code that produces the URL

  // The Browser API key obtained from the Google Developers Console.
  var developerKey = 'ID';

  // The Client ID obtained from the Google Developers Console.
  var clientId = 'ID';

  // Scope to use to access user's photos.
  var scope = ['https://www.googleapis.com/auth/photos'];

  var pickerApiLoaded = false;
  var oauthToken;

  // Use the API Loader script to load google.picker and gapi.auth.
  function onApiLoad() {
    gapi.load('auth', {'callback': onAuthApiLoad});
    gapi.load('picker', {'callback': onPickerApiLoad});
  }

  function onAuthApiLoad() {
    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 picking user Photos.
  function createPicker() {
    if (pickerApiLoaded && oauthToken) {
      var picker = new google.picker.PickerBuilder().
          enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
          addView(google.picker.ViewId.PDFS).
          setOAuthToken(oauthToken).
          setDeveloperKey(developerKey).
          setCallback(pickerCallback).
          build();
      picker.setVisible(true);
    }
  }

  // A simple callback implementation.
  function pickerCallback(data) {
    var url = 'nothing';
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
      var doc = data[google.picker.Response.DOCUMENTS][0];
      url = doc[google.picker.Document.URL];
             var message = 'The following(s) were stored in Parse: ' + url;
    document.getElementById('result').innerHTML = message;

    }






  }


</script>
  </head>
  <body>
    <div id="result"></div>
    <div id="demo">

    <!-- The Google API Loader script. -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

In particular, below is the portion that generates the URL:

 // A simple callback implementation.
      function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
                 var message = 'The following(s) were stored in Parse: ' + url;
        document.getElementById('result').innerHTML = message;

    }

I have look into https://developers.google.com/url-shortener/ , but not sure how to integrate it.

First of all, you have to include in the onApiLoad function the scope for the URL Shortner API. With the scope settled, once you make your request to the Drive API, you should then send the document url to the URL Shortener API.

You can rely on a function similar to the following (based on the example provided on https://developers.google.com/api-client-library/javascript/samples/samples ):

<script>
  function appendResults(text) {
    var results = document.getElementById('results');
    results.appendChild(document.createElement('P'));
    results.appendChild(document.createTextNode(text));
  }

  function makeRequest() {
    var request = gapi.client.urlshortener.url.insert({
      'longURL': 'DRIVE DOCUMENT URL'
    });
    request.then(function(response) {
      appendResults(response.result.longUrl);
    }, function(reason) {
      console.log('Error: ' + reason.result.error.message);
    });
  }

  function init() {
    gapi.client.setApiKey('YOUR API KEY');
    gapi.client.load('urlshortener', 'v1').then(makeRequest);
  }
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM