Use CoreAPI authentication support in API docs.

rest_framework/static/rest_framework/docs/js/api.js

@@ -1,28 +1,13 @@
-function normalizeHTTPHeader(str) {
-    return (str.charAt(0).toUpperCase() + str.substring(1))
-        .replace( /-(.)/g, function($1) { return $1.toUpperCase(); })
-        .replace( /(Www)/g, function($1) { return 'WWW'; })
-        .replace( /(Xss)/g, function($1) { return 'XSS'; })
-        .replace( /(Md5)/g, function($1) { return 'MD5'; })
+function normalizeHTTPHeader (str) {
+  // Capitalize HTTP headers for display.
+  return (str.charAt(0).toUpperCase() + str.substring(1))
+    .replace(/-(.)/g, function ($1) { return $1.toUpperCase() })
+    .replace(/(Www)/g, function ($1) { return 'WWW' })
+    .replace(/(Xss)/g, function ($1) { return 'XSS' })
+    .replace(/(Md5)/g, function ($1) { return 'MD5' })
 }
 
-function getCookie(name) {
-    var cookieValue = null;
-    if (document.cookie && document.cookie !== '') {
-        var cookies = document.cookie.split(';');
-        for (var i = 0; i < cookies.length; i++) {
-            var cookie = jQuery.trim(cookies[i]);
-            // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                break;
-            }
-        }
-    }
-    return cookieValue;
-}
-
-let responseDisplay = 'data';
+let responseDisplay = 'data'
 const coreapi = window.coreapi
 const schema = window.schema
 
@@ -127,22 +112,23 @@ $('form.api-interaction').submit(function(event) {
 
     // Setup authentication options.
     if (window.auth && window.auth.type === 'token') {
-        // Header authentication
-        options.headers = {
-            'Authorization': window.auth.value
-        }
+      // Header authentication
+      options.auth = new coreapi.auth.TokenAuthentication({
+        prefix: window.auth.scheme,
+        token: window.auth.token
+      })
     } else if (window.auth && window.auth.type === 'basic') {
-        // Basic authentication
-        const token = window.auth.username + ':' + window.auth.password
-        const hash = window.btoa(token)
-        options.headers = {
-            'Authorization': 'Basic ' + hash
-        }
+      // Basic authentication
+      options.auth = new coreapi.auth.BasicAuthentication({
+        username: window.auth.username,
+        password: window.auth.password
+      })
     } else if (window.auth && window.auth.type === 'session') {
-        // Session authentication
-        options.csrf = {
-            'X-CSRFToken': getCookie('csrftoken')
-        }
+      // Session authentication
+      options.auth = new coreapi.auth.SessionAuthentication({
+        csrfCookieName: 'csrftoken',
+        csrfHeaderName: 'X-CSRFToken'
+      })
     }
 
     const client = new coreapi.Client(options)
@@ -202,10 +188,12 @@ $('#auth-control').find("[data-auth='none']").click(function (event) {
 $('form.authentication-token-form').submit(function(event) {
     event.preventDefault();
     const form = $(this).closest("form");
-    const value = form.find('input').val();
+    const scheme = form.find('input#scheme').val();
+    const token = form.find('input#token').val();
     window.auth = {
         'type': 'token',
-        'value': value,
+        'scheme': scheme,
+        'token': token
     };
     $('#selected-authentication').text('header');
     $('#auth-control').children().removeClass('active');
@@ -222,7 +210,7 @@ $('form.authentication-basic-form').submit(function(event) {
     window.auth = {
         'type': 'basic',
         'username': username,
-        'password': password,
+        'password': password
     };
     $('#selected-authentication').text('basic');
     $('#auth-control').children().removeClass('active');

rest_framework/templates/rest_framework/docs/auth/token.html

@@ -5,24 +5,29 @@
 <div class="modal-dialog modal-md" role="document">
   <div class="modal-content">
     <div class="modal-header">
-      <h3 class="modal-title"><i class="fa fa-key"></i> Authentication Header</h3>
+      <h3 class="modal-title"><i class="fa fa-key"></i> Token Authentication</h3>
     </div>
 
     <form class="form-horizontal authentication-token-form">
     <div class="modal-body">
       <div class="form-group">
-        <label for="authorization" class="col-sm-2 control-label">Authorization:</label>
-
+        <label for="prefix" class="col-sm-2 control-label">Scheme:</label>
         <div class="col-sm-10">
-          <input type="text" class="form-control" id="authorization" placeholder="Bearer XXXX-XXXX-XXXX-XXXX" aria-describedby="helpBlock" required>
-          <span id="helpBlock" class="help-block">The value to include for the <code>Authorization</code> header in outgoing HTTP requests.</span>
+          <input type="text" class="form-control" id="scheme" placeholder="Bearer" aria-describedby="schemeHelpBlock" required>
+          <span id="schemeHelpBlock" class="help-block">Either a registered authentication scheme such as <code>Bearer</code>, or a custom schema such as <code>Token</code> or <code>JWT</code>.</span>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="token" class="col-sm-2 control-label">Token:</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="token" placeholder="XXXX-XXXX-XXXX-XXXX" aria-describedby="helpBlock" required>
+          <span id="tokenHelpBlock" class="help-block">A valid API token.</span>
         </div>
       </div>
     </div>
-
     <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-      <button type="submit" class="btn btn-primary">Use Authentication Header</button>
+      <button type="submit" class="btn btn-primary">Use Token Authentication</button>
     </div>
     </form>
 

rest_framework/templates/rest_framework/docs/index.html

@@ -17,7 +17,7 @@
         <link href="{% static 'rest_framework/docs/img/favicon.ico' %}" rel="shortcut icon">
 
         {% if code_style %}<style>{{ code_style }}</style>{% endif %}
-        <script src="{% static 'rest_framework/js/coreapi-0.0.20.js' %}"></script>
+        <script src="{% static 'rest_framework/js/coreapi-0.1.0.js' %}"></script>
         <script src="{% url 'api-docs:schema-js' %}"></script>
 
     </head>

rest_framework/templates/rest_framework/docs/sidebar.html

@@ -22,7 +22,7 @@
             </li>
             <ul class="sub-menu collapse out" id="auth-control">
                 <li data-auth="none" {% if not user.is_authenticated %}class="active"{% endif %}><a href="#" data-language="none">none</a></li>
-                <li data-auth="token" data-toggle="modal" data-target="#auth_token_modal"><a href="#">header</a></li>
+                <li data-auth="token" data-toggle="modal" data-target="#auth_token_modal"><a href="#">token</a></li>
                 <li data-auth="basic" data-toggle="modal" data-target="#auth_basic_modal"><a href="#">basic</a></li>
                 <li data-auth="session"  data-toggle="modal" data-target="#auth_session_modal" {% if user.is_authenticated %}class="active"{% endif %}><a href="#">session</a></li>
             </ul>