connect-js
connect-js copied to clipboard
Anvil Connect JavaScript client for web browsers
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
}
)
}
}
})
// ...
})