This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
web-integration:client-side [2019/08/01 09:56] tjotov |
web-integration:client-side [2019/08/05 12:44] tjotov [Communication] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ====== Client API for Web Integration |
Web Integration API is an essential part of ADUCID for all web browser scenarios. It connects PEIG, AIM and the browser. Integration API is an essential component of [[components: | Web Integration API is an essential part of ADUCID for all web browser scenarios. It connects PEIG, AIM and the browser. Integration API is an essential component of [[components: | ||
Line 10: | Line 10: | ||
</ | </ | ||
- | ===== Basic usage with AAA ===== | + | ===== Basic usage with No-Code |
Create instance of ADUCID object: | Create instance of ADUCID object: | ||
<sxh java> | <sxh java> | ||
Line 50: | Line 50: | ||
</ | </ | ||
- | advanced method to pass more parameters like transaction amount, description, | + | ===== Web Integration API - Example ===== |
- | aducid.setInitParams | + | |
- | initParams | + | |
- | } | + | |
- | tell server to generate QR / or not to reduce payload | + | <code html> |
- | aducid.setGenerateQr = function(param) { | + | |
- | generateQr = param; | + | |
- | } | + | |
- | QR code and animation location jQuery | + | <html xmlns=" |
- | aducid.setQrCode | + | |
- | qrCode = param; | + | |
- | } | + | |
- | + | ||
- | QR code hint jQuery | + | |
- | aducid.setQrHint = function(param) { | + | |
- | qrHint | + | |
- | } | + | |
- | Embedded timer location | + | < |
- | aducid.setQrTimer = function(param) { | + | <script type=" |
- | | + | <script type=" |
- | } | + | |
- | debug DOM to display internal messages | + | <script type=" |
- | aducid.setDebug | + | |
- | | + | $(document).ready(function() { |
- | } | + | |
+ | aducid.setStartOperationUrl("/ | ||
+ | aducid.setResultOperationUrl("/ | ||
+ | aducid.setProxyUrl("/ | ||
+ | aducid.setRedirectUrl("/ | ||
+ | aucid.setRedirectUrl("/ | ||
+ | aducid.setErrorPage("/ | ||
+ | |||
+ | aducid.processResult | ||
+ | if (result.status == " | ||
+ | alert(" | ||
+ | | ||
+ | } | ||
+ | else { | ||
+ | alert(" | ||
+ | location.href = result.redirect; | ||
+ | } | ||
+ | | ||
- | server | + | //handle PEIG not installed error |
+ | aducid.showPeigError = function() { | ||
+ | alert(" | ||
+ | } | ||
+ | |||
+ | //handle communication or other error | ||
+ | aducid.handleError = function(e) { | ||
+ | alert(e.data.message); | ||
+ | } | ||
+ | |||
+ | aducid.showQRHint = function(param) { | ||
+ | $('# | ||
+ | } | ||
+ | |||
+ | aducid.showRunningHint = function(param) { | ||
+ | $('# | ||
+ | }; | ||
+ | |||
+ | //GUI mapping | ||
+ | aducid.setButton($("# | ||
+ | aducid.setQrCode($("# | ||
+ | aducid.setQrHint($("# | ||
+ | |||
+ | //start | ||
+ | aducid.init(); | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | <img id=" | ||
+ | <div id=" | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== Detailed description ===== | ||
+ | See also source file "/ | ||
+ | |||
+ | ==== Communication ==== | ||
+ | === Start operation | ||
+ | Tell Web API where your start operation is. | ||
+ | <sxh java> | ||
aducid.setStartOperationUrl = function(param) { | aducid.setStartOperationUrl = function(param) { | ||
startOperationUrl = param; | startOperationUrl = param; | ||
} | } | ||
+ | </ | ||
- | check method location provided by server side controller | + | === Check method location provided by server side controller |
+ | <sxh java> | ||
aducid.setResultOperationUrl = function(param) { | aducid.setResultOperationUrl = function(param) { | ||
resultOperationUrl = param; | resultOperationUrl = param; | ||
} | } | ||
+ | </ | ||
- | //URL with proxy method | + | === Proxy method |
- | // | + | <sxh java> |
aducid.setProxyUrl = function(param) { | aducid.setProxyUrl = function(param) { | ||
proxyUrl = param; | proxyUrl = param; | ||
} | } | ||
- | Tell AJAX to use GET or POST | + | </ |
+ | |||
+ | === Tell AJAX to use GET or POST === | ||
POST is used to deliver more data like transaction parameters | POST is used to deliver more data like transaction parameters | ||
+ | <sxh java> | ||
aducid.setAjaxMethod = function(param) { | aducid.setAjaxMethod = function(param) { | ||
ajaxMethod = param; | ajaxMethod = param; | ||
} | } | ||
+ | </ | ||
- | Redirect URL for iOS typically provided by server side controler | + | === Redirect URL for iOS typically provided by server side controler |
+ | <sxh java> | ||
aducid.setRedirectUrl = function(param) { | aducid.setRedirectUrl = function(param) { | ||
redirectUrl = param; | redirectUrl = param; | ||
} | } | ||
+ | </ | ||
- | Button with bound operation | + | === Final action === |
- | aducid.setButton | + | What API should do when operation |
- | | + | <sxh java> |
- | param.click(function() { | + | aducid.processResult |
- | if (currentRequest != null) instance.startOperation(); | + | |
- | else instance.init(true); | + | |
- | }); | + | |
} | } | ||
+ | </ | ||
- | Internal logic to evaluate | + | === Use push === |
- | | + | Tell Web API if it should use push (QR code was used previously). |
- | | + | <sxh java> |
- | } | + | |
- | else param = ""; | + | |
- | localStorage[' | + | |
} | } | ||
- | + | </ | |
- | Get last binding mode | + | ==== UI methods ==== |
- | aducid.getSessionBinding | + | === Tell server to generate QR / or not to reduce payload === |
- | | + | <sxh java> |
+ | aducid.setGenerateQr | ||
+ | | ||
} | } | ||
+ | </ | ||
- | Is binding URI? | + | === QR code targeting using jQuery === |
- | aducid.isURI | + | <sxh java> |
- | return instance.getSessionBinding() | + | aducid.setQrCode |
- | } | + | |
- | + | ||
- | Is binding QR? | + | |
- | aducid.isQR = function() { | + | |
- | | + | |
} | } | ||
+ | </ | ||
- | Is this operation going to be authentication (i.e. first operation in chain)? | + | === QR code text hint jQuery === |
- | aducid.setAuthentication | + | <sxh java> |
- | | + | aducid.setQrHint |
+ | | ||
} | } | ||
+ | </ | ||
- | Text hint shown before operation started | + | === Button bound operation === |
+ | <sxh java> | ||
+ | aducid.setButton = function(param) { | ||
+ | aducidButton = param; | ||
+ | param.click(function() { | ||
+ | if (currentRequest != null) instance.startOperation(); | ||
+ | else instance.init(true); | ||
+ | }); | ||
+ | } | ||
+ | </ | ||
+ | === Text hint shown before operation started | ||
+ | <sxh java> | ||
aducid.showQRHint = function(param) { | aducid.showQRHint = function(param) { | ||
if (qrHint != null) qrHint.html(localize(" | if (qrHint != null) qrHint.html(localize(" | ||
} | } | ||
+ | </ | ||
- | How API can hide text hint | + | === How API can hide text hint === |
+ | <sxh java> | ||
aducid.hideQRHint = function(param) { | aducid.hideQRHint = function(param) { | ||
if (qrHint != null) qrHint.html("" | if (qrHint != null) qrHint.html("" | ||
} | } | ||
- | Text hint shown after operation started | + | === Text hint shown after operation started |
+ | <sxh java> | ||
aducid.showRunningHint = function(param) { | aducid.showRunningHint = function(param) { | ||
if (qrHint != null) qrHint.html(localize(" | if (qrHint != null) qrHint.html(localize(" | ||
} | } | ||
+ | </ | ||
- | How API can hide text hint | + | === How API can hide text hint === |
+ | <sxh java> | ||
aducid.hideRunningHint = function(param) { | aducid.hideRunningHint = function(param) { | ||
if (qrHint != null) qrHint.html("" | if (qrHint != null) qrHint.html("" | ||
} | } | ||
- | + | </ | |
- | The most important method - what API should do when operation finishes (not processed on iOS as we use returnUrl directly there) | + | === Auxiliary method to animate operation in progress |
- | aducid.processResult | + | <sxh java> |
- | alert(result); | + | |
- | } | + | |
- | + | ||
- | How PEIG not installed is treated, marketplace redirect can be used here | + | |
- | aducid.showPeigError | + | |
- | alert(" | + | |
- | } | + | |
- | + | ||
- | + | ||
- | Auxiliary method to animate operation in progress | + | |
aducid.startAnimation = function() { | aducid.startAnimation = function() { | ||
if (qrCode != null) { | if (qrCode != null) { | ||
Line 182: | Line 249: | ||
} | } | ||
} | } | ||
+ | </ | ||
| | ||
- | Stop animation | + | === Stop animation |
+ | <sxh java> | ||
aducid.stopRunningAnimation = function() { | aducid.stopRunningAnimation = function() { | ||
if (qrCode == null) return; | if (qrCode == null) return; | ||
qrCode.hide(); | qrCode.hide(); | ||
} | } | ||
+ | </ | ||
+ | ==== Advanced methods ==== | ||
+ | === Init Params === | ||
+ | Method to pass more parameters like transaction amount, description, | ||
+ | <sxh java> | ||
+ | aducid.setInitParams = function(param) { | ||
+ | initParams = param; | ||
+ | } | ||
+ | </ | ||
+ | === Debug DOM to display internal messages === | ||
+ | <sxh java> | ||
+ | aducid.setDebug = function(param) { | ||
+ | aducidDebug = param; | ||
+ | } | ||
+ | </ | ||
- | This method controll progress bar animation. See aducid-api.js | + | === Is binding URI? === |
- | this.startProgressBar | + | <sxh java> |
- | | + | |
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | === Is binding QR? === | ||
+ | <sxh java> | ||
+ | aducid.isQR | ||
+ | | ||
+ | | ||
+ | === Is this operation going to be authentication (i.e. first operation in chain)? === | ||
+ | <sxh java> | ||
+ | aducid.setAuthentication = function() { | ||
+ | instance.setSessionBinding(null); | ||
+ | } | ||
+ | </ | ||
- | Hide QR timer progress bar | + | === Get last binding mode === |
- | aducid.hideProgressBar | + | <sxh java> |
- | | + | aducid.getSessionBinding |
- | qrTimer.hide(); | + | return |
- | qrTimer.html("" | + | |
} | } | ||
+ | </ | ||
- | How errors are treated - use nice dialogues here | + | === How PEIG not installed is treated, marketplace redirect can be used here === |
+ | <sxh java> | ||
+ | aducid.showPeigError = function() { | ||
+ | alert(" | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | === How errors are treated - use nice dialogues here === | ||
+ | <sxh java> | ||
aducid.handleError = function(e) { | aducid.handleError = function(e) { | ||
alert(e); | alert(e); | ||
} | } | ||
- | + | </ | |
- | + |