NOTICE

We’re archiving Anvil Connect and all related packages. This code is entirely MIT Licensed. You’re free to do with it what you want. That said, we are recommending against using it, due to the potential for security issues arising from unmaintained software. For more information, see the announcement at anvil.io.

Anvil Connect JavaScript Client

Install

$ bower install anvil-connect --save

API Documentation

Anvil.configure(options)

Anvil.toFormUrlEncoded(obj)

Anvil.parseFormUrlEncoded(str)

Anvil.getUrlFragment(url)

Anvil.popup(popupWidth, popupHeight)

Anvil.session

Anvil.serialize()

Anvil.deserialize()

Anvil.reset()

Anvil.uri()

Anvil.nonce()

Anvil.sha256url()

Anvil.headers()

Anvil.request()

Anvil.userInfo()

Anvil.callback(response)

Anvil.authorize()

Anvil.signout(path)

Anvil.destination(path)

Anvil.checkSession(id)

Anvil.updateSession(event)

Anvil.isAuthenticated()

Anvil.getKeys()

AngularJS Usage

Be sure to register your app as a client with your Anvil Connect provider to obtain credentials.

Authenticate with a popup window

First copy callback.html from this repository into your public assets, and add anvil-connect.angular.js to your index.html file.

<script src="bower_components/angular/angular.js"></script>
<!-- ... -->
<script src="bower_components/sjcl/sjcl.js"></script>
<script src="bower_components/anvil-connect/anvil-connect.angular.js"></script>
<!-- ... -->
<script src="scripts/app.js"></script>
<!-- ... -->

Then you can load the module and configure the provider.

angular.module('App', ['...', 'anvil'])

  .config(function (..., AnvilProvider) {

    AnvilProvider.configure({
      issuer:       'http://localhost:3000',
      client_id:    '<CLIENT_ID>',
      redirect_uri: '<YOUR_APP_HOST>/callback.html',
      display:      'popup'
    });

    // ...

  })

You can inject the Anvil service into your controllers and call Anvil.authorize() wherever you want to initiate an OpenID Connect authentication flow.

  .controller(function ($scope, ..., Anvil) {
    $scope.signin = function () {
      Anvil.authorize();
    };
  })

Authenticate with full page navigation

Configuring the service to use full page navigation is similar to popup configuration, but requires a route definition to handle the authorization response from Anvil Connect:

angular.module('App', ['...', 'anvil'])

  .config(function (..., $routeProvider, AnvilProvider) {

    AnvilProvider.configure({
      issuer:       'http://localhost:3000',
      client_id:    '<CLIENT_ID>',
      redirect_uri: '<YOUR_APP_HOST>/callback',
      // `display` defaults to "page"
    });

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix = '!';

    $routeProvider

      // ...

      .when('/callback', {
        resolve: {
          session: function ($location, Anvil) {
            Anvil.authorize().then(
              function (response) {
                $location.url('/');
              },
              function (fault) {
                // your error handling
              }
            )
          }
        }
      })

      // ...

  })