Skip to content

AngularJS

Jump to bottom Edit New page
Wim Vandenhaute edited this page Aug 8, 2016 · 21 revisions

linkID AngularJS directive

What it does:

The directive handles the role of 'browser, app' in this sequence diagram. More info about the diagram can be found here: linkID sdk / Authentication

Example demo

An online demo can be found here. In this example, the client side is handled by this angularJS example, the back-end is a REST project in java. The project can be found on this github page

Integration

dependencies

This angularJS directive requires 4 resources to work:

  • First of all, AngularJS (duh), the lowest version on which it is tested is v1.2.9, the highest 1.5.0.
  • angular-resource
  • The linkIDQR directive js file
  • The linkIDQR styling file
	<head>
		<link rel="stylesheet" href="//linkid.be/modules/angular/1-x/linkid-qr-1.0.0.css">
	<head>
	<body>
		...
		<script src="angular.js"></script>
		<script src="angular-resource.js"></script>
		<script src="//linkid.be/modules/angular/1-x/ng-linkid-qr-1.0.0.js"></script>

Don't forget to add the linkIDQR module dependency to your app.js.

angular.module('app', ['ng-linkIDQR']);

Required Arguments

The directive requires 3 arguments

  • the first is the initHref which is a String containing the REST url to start a new linkID authentication/payment and which returns a JSON object containing the sessionId and qrCodeInfo returned by the linkID servers.
  • The pollHref is a String containing the REST url to poll an existing linkID authentication/payment and returning its current state, the directive automatically adds a query parameter with the sessionId returned by the initHref call. The query parameter is called sessionId. The state should be a JSON object containing the fields of a LinkIDAuthPollResponse object.
  • You can pass a function as argument to the onSuccess which will be executed upon a successful authentication/payment.
    <div linkid-qr 
         init-href="${restPath}/linkid/start"
         poll-href="${restPath}/linkid/poll"
         on-success="loginSucceeded()"></div>

optional parameters

other linkID authentication states:

  • onFailed | function | This function will be executed when the authentication/payment failed
  • onExpired | function | This function will be executed when the authentication/payment expires(default 15min)
  • onRetrieved | function | This function will be executed when the user has scanned the linkID QR-code and the session is retrieved
  • onPayment | function | This function will be executed when the linkID payment is payed
  • onPaymentFailed | function | This function will be executed when the linkID payment has failed

All of the authentication state functions have an optional parameter called state
eg. on-success="loginSucceeded(state)", in which the returned authentication/payment object is passed through. This could be useful for custom error messages if the authentication/payment failed. Using this object to pass other authentication/payment information is not recommended.

other optional attributes include:

  • displayDownloadButtons | boolean | displays download buttons for the linkID app
  • initData | object | The object's fields and values will be appended to the initHref URL as a series of additional query parameters. This way you can give more context to your server when starting an authentication session.
  • onQR | function | This function will be executed when the linkID QR-code is retrieved
  • loadText | String | When the session is retrieved, this text will appear
  • autoLoad | boolean | Start the linkID authentication/payment on pageLoad
  • startQr | boolean | Use QR-code as authentication, even on mobile
Add a custom footer
Add a custom sidebar

Clone this wiki locally