Example to show how to integrate a site with AnnotatorJS with AnnotateIt.org Store. Includes the Javascript part as well as some server side token generators : one in Ruby and the other in Python.

annotateit-ruby-jwt.md

Replace the Auth options hash value having token: <TOKEN_FOR_TESTING_THAT_LASTS_FOR_A_DAY> with an actual token. This token can be generated by the server side scripts and copied in. It supercedes the tokenUrl: if set.

Just to be 100% sure, feel free to verify the validity of the JSON Web Token generated using jwt.io, JWT debugger. Oh, and the TTL is set to 86400 which is a day. Enough time to generate a token and play around with it.

Ps: If there are any amendments that I can make to improve clarity or fix issues, feel free to leave a comment below. I'll get a notification and act on it as soon as I can.

Ps 2: I was experiencing an issue with CORS and so I submitted the issue (and this code) to the annotator-dev mailing list. Check the July 2014 archives for an email with the subject ... '[annotator-dev] Integrating Site With AnnotateIt Store'.

annotateit.org.html

<!-- +++ STYLESHEETS +++ -->
<link rel="stylesheet" href="/assets/stylesheets/annotator.min.css">

<!-- +++ JAVASCRIPTS +++ -->
<script type="text/javascript" src="/assets/javascripts/vendor/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/assets/javascripts/annotator.min.js"></script>
<script type="text/javascript" src="/assets/javascripts/annotator.auth.min.js"></script>
<script type="text/javascript" src="/assets/javascripts/annotator.store.min.js"></script>

<!-- CALL ANNOTATOR: With Auth and Store plugins enabled -->
<script type="text/javascript">
$(document).ready(function() {

  // Call Annotator JS
  var content = $('#content').annotator();

  // +++ Auth Plugin +++
  content.annotator('addPlugin', 'Auth', {
    // The URL to request the token from. Defaults to /auth/token
    tokenUrl: '/auth/token',
    // If this is present it will not be requested from the server above. Defaults to null.
    token: '<TOKEN_FOR_TESTING_THAT_LASTS_FOR_A_DAY>',
    // Whether to fetch the token when the plugin is loaded. Defaults to true
    autoFetch: true
  });

  // +++ Store +++
  content.annotator('addPlugin', 'Store', {
    // This is the API endpoint. If the server supports Cross Origin Resource
    // Sharing (CORS) a full URL can be used here. Defaults to /store. The
    // trailing slash should be omitted.
    prefix: 'http://annotateit.org/api',
    // Custom meta data that will be attached to every annotation that is sent
    // to the server. This will override previous values. E.g. attach the uri of the
    // current page to all annotations to allow search.
    annotationData: {
      'uri': 'http://localhost:4000/example/page/to/annotate'
    },
    // An object literal containing query string parameters to query the store.
    // If loadFromSearch is set, then we load the first batch of annotations
    // from the ‘search’ URL as set in options.urls instead of the registry path
    // ‘prefix/read’. Defaults to false.
    loadFromSearch: {
      'limit': 20,
      'all_fields': 1,
      'uri': 'http://localhost:4000/example/page/to/annotate'
    },
    // The server URLs for each available action (excluding prefix). These URLs
    // can point anywhere but must respond to the appropriate HTTP method. The
    // :id token can be used anywhere in the URL and will be replaced with the
    // annotation id.
    // Methods for actions are as follows:
    // create:  POST
    // update:  PUT
    // destroy: DELETE
    // search:  GET
    urls: {
      // These are the default URLs.
      create:  '/annotations',
      update:  '/annotations/:id',
      destroy: '/annotations/:id',
      search:  '/search'
    },
    // If true will display the "anyone can view this annotation" checkbox.
    showViewPermissionsCheckbox: true,
    // If true will display the "anyone can edit this annotation" checkbox.
    showEditPermissionsCheckbox: true
  });
});
</script>

ruby-jwt-generator.py

# JSON Web Token Generator (Python)
# ---------------------------------
#
# pip install pyjwt
# https://pypi.python.org/pypi/PyJWT
# https://github.com/progrium/pyjwt/
#
# See http://jwt.io for a JWT debugger

import datetime
import jwt

# Replace these with your details
CONSUMER_KEY = '<CONSUMER_KEY>'
CONSUMER_SECRET = '<CONSUMER_SECRET>'

# Only change this if you're sure you know what you're doing. 86400 = 1 day
CONSUMER_TTL = 86400

# Generate JWT string
def generate_token(user_id):
    return jwt.encode({
      'consumerKey': CONSUMER_KEY,
      'userId': user_id,
      'issuedAt': _now().isoformat() + 'Z',
      'ttl': CONSUMER_TTL
    }, CONSUMER_SECRET)

# Generate time in ISO8601 format
def _now():
    return datetime.datetime.utcnow().replace(microsecond=0)

# Initiate token generation and other debugging stuff ... prints to console
user_id = 1
token = generate_token(user_id)
print '\n+++'
print token
print jwt.decode(token, verify=False)
print '+++\n'
jwt.decode(token, verify=True)

# This example uses 'PyJWT', not 'python-jwt'. They are different JWT libraries
# that do the same thing, imported the same way but have different APIs. This
# screwed me up a bit because I installed the latter obviously causing the code
# not to work. But just in case you prefer the 'python-jwt' implementation, see
# below:
#
# pip install jwt
# https://pypi.python.org/pypi/python_jwt
# https://github.com/davedoesdev/python-jwt

ruby-jwt-generator.rb

# JSON Web Token Generator (Ruby)
# -------------------------------
#
# http://jwt.io
# https://github.com/progrium/ruby-jwt
#
# See http://jwt.io for a JWT debugger

require 'time'
require 'jwt'

# Replace these with your details
CONSUMER_KEY = '<CONSUMER_KEY>'
CONSUMER_SECRET = '<CONSUMER_SECRET>'

# Only change this if you're sure you know what you're doing. 86400 = 1 day
CONSUMER_TTL = 86400

# Generate JWT string
def generate_token(user_id)
  payload = {
    'consumerKey' => CONSUMER_KEY,
    'userId' => user_id,
    'issuedAt' => Time.now.utc.iso8601,
    'ttl' => CONSUMER_TTL
  }
  JWT.encode(payload, CONSUMER_SECRET)
end

# Initiate token generation and other debugging stuff ... prints to console
user_id = 1
token = generate_token(user_id)
puts "\n+++"
puts token
puts JWT.decode(token, CONSUMER_SECRET, false)
puts "+++\n"
JWT.decode(token, CONSUMER_SECRET, true)

help to create in java

hi there , I have met a problem that I can't highlight the annotations on front page loaded from db .Will you give some solutions ?thanks a bunch