openid.html

<!--
  Copyright 2017 Nicolas Carlier.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<script type="text/x-red" data-template-name="openid-credentials">
  <div id="node-config-openid-client-keys">
    <div class="form-row">
      <p><b><span data-i18n="openid.label.config"></span>:</p>
    </div>
    <div class="form-row">
      <label for="node-config-input-discovery">
        <i class="fa fa-globe"></i> <span data-i18n="openid.label.discovery_url"></span>
      </label>
      <input type="text" id="node-config-input-discovery">
    </div>
    <div class="form-row">
      <label for="node-config-input-redirect">
        <i class="fa fa-turn-down-left"></i> <span data-i18n="openid.label.redirect_uri"></span>
      </label>
      <input type="text" id="node-config-input-redirect">
    </div>
    <div class="form-row">
      <label for="node-config-input-clientId">
        <i class="fa fa-user"></i> <span data-i18n="openid.label.client_id"></span>
      </label>
      <input type="text" id="node-config-input-clientId">
    </div>
    <div class="form-row">
      <label for="node-config-input-clientSecret">
        <i class="fa fa-key"></i> <span data-i18n="openid.label.client_secret"></span>
      </label>
      <input type="password" id="node-config-input-clientSecret">
    </div>
    <div class="form-row">
      <label for="node-config-input-scopes">
        <i class="fa fa-crosshairs"></i> <span data-i18n="openid.label.scopes"></span>
      </label>
      <input type="text" placeholder="openid email offline_access" id="node-config-input-scopes">
    </div>
    <div class="form-row">
      <label for="node-config-input-challenge">
        <i class="fa fa-key"></i> <span data-i18n="openid.label.challenge"></span>
      </label>
      <input type="checkbox" id="node-config-input-challenge">
    </div>
    <div class="form-row">
      <label>&nbsp;</label>
      <a class="btn" id="node-config-start-auth" href="#" target="_blank"><span data-i18n="openid.label.authenticate"></span></a>
    </div>
    <div class="form-tips" id="node-config-openid-tooltip">
    </div>
  </div>
  <div id="node-config-openid">
    <div class="form-row">
      <label><i class="fa fa-user"></i> <span data-i18n="openid.label.id"></span></label>
      <span id="node-config-openid-displayName" class="input-xlarge uneditable-input"></span>
    </div>
    <input type="hidden" id="node-config-input-displayName">
  </div>
</script>

<script type="text/javascript">
  (function () {
    RED.nodes.registerType('openid-credentials', {
      category: 'config',
      defaults: {
        displayName: { value: '' }
      },
      credentials: {
        display_name: { type: 'text' },
        discovery_url: { type: 'text' },
        redirect_uri: { type: 'text' },
        client_id: { type: 'text' },
        client_secret: { type: 'password' },
        scopes: { type: 'text' }
      },
      label: function () {
        return this.displayName || 'OpenID';
      },
      exportable: false,
      oneditprepare: function () {
        var id = this.id;
        var pathname = document.location.pathname;
        if (pathname.slice(-1) != '/') {
          pathname += '/';
        }
        var callback =
          location.protocol +
          '//' +
          location.hostname +
          (location.port ? ':' + location.port : '') +
          pathname +
          'openid-credentials/auth/callback';
        var tip = this._('openid.tip.redirect', { callback: callback });
        $('#node-config-openid-tooltip').html(tip);

        function updateOpenIDAuthButton() {
          var v1 = $('#node-config-input-discovery').val();
          var v2 = $('#node-config-input-clientId').val();
          var v3 = $('#node-config-input-clientSecret').val();
          $('#node-config-start-auth').toggleClass(
            'disabled',
            v1.length === 0 || v2.length === 0 || v3.length === 0
          );
        }
        $('#node-config-input-discovery').on(
          'change keydown paste input',
          updateOpenIDAuthButton
        );
        $('#node-config-input-redirect').on(
          'change keydown paste input',
          updateOpenIDAuthButton
        );
        $('#node-config-input-clientId').on(
          'change keydown paste input',
          updateOpenIDAuthButton
        );
        $('#node-config-input-clientSecret').on(
          'change keydown paste input',
          updateOpenIDAuthButton
        );
        $('#node-config-input-scopes').on(
          'change keydown paste input',
          updateOpenIDAuthButton
        );
        $('#node-config-input-challenge').on(
          'change keydown paste input',
          updateOpenIDAuthButton
        );

        function updateOpenIDDisplayName(dn) {
          $('#node-config-openid-client-keys').hide();
          $('#node-config-openid').show();
          $('#node-config-input-displayName').val(dn);
          $('#node-config-openid-displayName').html(dn);
        }

        function pollOpenIDCredentials() {
          $.getJSON('credentials/openid-credentials/' + id, function (data) {
            if (data.display_name) {
              $('#node-config-dialog-ok').button('enable');
              updateOpenIDDisplayName(data.display_name);
              delete window.openidConfigNodeIntervalId;
            } else {
              window.openidConfigNodeIntervalId = window.setTimeout(
                pollOpenIDCredentials,
                2000
              );
            }
          });
        }

        updateOpenIDAuthButton();

        if (this.displayName) {
          updateOpenIDDisplayName(this.displayName);
        } else {
          $('#node-config-openid-client-keys').show();
          $('#node-config-openid').hide();
          $('#node-config-dialog-ok').button('disable');
        }

        $('#node-config-start-auth').mousedown(function () {
          var discovery = $('#node-config-input-discovery').val();
          var redirect = $('#node-config-input-redirect').val();
          var clientId = $('#node-config-input-clientId').val();
          var clientSecret = $('#node-config-input-clientSecret').val();
          var scopes = $('#node-config-input-scopes').val();
          var challenge = $('#node-config-input-challenge').val();
          var url =
            'openid-credentials/auth?id=' +
            id +
            '&discovery=' +
            encodeURIComponent(discovery) +
            '&clientId=' +
            clientId +
            '&clientSecret=' +
            clientSecret +
            '&scopes=' +
            scopes +
            '&callback=' +
            encodeURIComponent(redirect || callback) +
            '&challenge=' +
            challenge;
          $(this).attr('href', url);
          window.openidConfigNodeIntervalId = window.setTimeout(
            pollOpenIDCredentials,
            2000
          );
        });
        $('#node-config-start-auth').click(function (e) {
          var discovery = $('#node-config-input-discovery').val();
          var clientId = $('#node-config-input-clientId').val();
          var clientSecret = $('#node-config-input-clientSecret').val();
          var scopes = $('#node-config-input-scopes').val();
          if (discovery === '' || clientId === '' || clientSecret === '') {
            e.preventDefault();
          }
        });
      },
      oneditsave: function () {
        if (window.openidConfigNodeIntervalId) {
          window.clearTimeout(window.openidConfigNodeIntervalId);
          delete window.openidConfigNodeIntervalId;
        }
      },
      oneditcancel: function () {
        if (window.openidConfigNodeIntervalId) {
          window.clearTimeout(window.openidConfigNodeIntervalId);
          delete window.openidConfigNodeIntervalId;
        }
      }
    });
  })();
</script>

<script type="text/x-red" data-template-name="openid">
  <div class="form-row">
    <label for="node-input-openid"><i class="fa fa-user"></i> <span data-i18n="openid.label.id"></span></label>
    <input type="text" id="node-input-openid">
  </div>
  <hr align="middle"/>
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="openid.label.name"></span></label>
    <input type="text" id="node-input-name" data-i18n="[placeholder]openid.label.openid">
  </div>
</script>

<script type="text/x-red" data-help-name="openid">
  <p>
  Once authenticated with the OpenID provider, each message passing thru this
  node, obtains a fresh access token.
  </p>
  <p>
  This access token is stored into this message property:
  <code>msg.access_token</code>
  </p>
  <p>

  In order to be usable with the HTTP node, the access token is also added to HTTP headers:
  <code>msg.headers['Authorization']</code>
  </p>
</script>

<script type="text/javascript">
  RED.nodes.registerType('openid', {
    category: 'function',
    color: '#e7e7ae',
    defaults: {
      name: { value: '' },
      openid: { type: 'openid-credentials', required: true }
    },
    inputs: 1,
    outputs: 1,
    icon: 'openid.png',
    label: function () {
      return this.name || 'OpenID';
    },
    labelStyle: function () {
      return this.name ? 'node_label_italic' : '';
    }
  });
</script>