See the following sections for further information on front-end implementation of the JS Connector:
...
Initialise JS Connector with parameters
You need to provide an object containing key-value pairs of configuration data. See API Reference for doInit parameters.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<html>
<head>
<script src="<connector-baseurl>/connector.bundle.min.js"></script>
<script>
function init() {
OIDC.doInit({
// URL to OIDC service
oauth_url: '<oidc-baseurl>/protocol/openid-connect/auth',
// Merchant given client ID on the OIDC service
// TODO: Replace this with your own!
client_id: 'your_client_id',
// Your callback URL that will receive the Authorization Grant response
// TODO: Replace this with your own!
redirect_uri: 'https://yourdomain.com/oidc/callback',
});
};
init();
</script>
</head>
<body>
</body>
</html> |
...
To start authentication call the window.OIDC.doConnect method. Typically, you do this when the user clicks a button, a link or even on loading of the page.
You need to provide parameters as an object containing key-value pairs. See API Reference for doConnect parameters.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
OIDC.doConnect( {
config: {
login_hint: '',
scope: 'openid profile'
},
} ); |
You can provide a callback method that will be executed if you use method inline or window and follow this example on how to setup your redirect_uri callback page.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
OIDC.doConnect( {
config: {
login_hint: '',
scope: 'openid profile'
},
callback: function (err, data) {
if ( err ) {
console.error( err );
}
else {
console.log( data );
}
}
} ); |
...
This is the most secure and recommended method as the client_secret is not leaked into the client application. It is also the default method used with BankID OIDC Connect.
A time limited one-time code, (short-lived) authorisation code, is granted to redirect_uri which in turn can be used to fetch a long living access tokenan ID Token and Access Token. The access token can then in turn be used to fetch user informationaccess various Value Added services, e.g. the TINFO Userinfo service.
codereturned as parameter in response toredirect_urilike this example:https://example.com/callback?code=oMsCeLvIaQm6bTrgtp7- Exchange code for access token and ID token by sending a HTTP POST request to the OIDC IDP token endpoint as explained hereRetrieve consented user information the Token endpoint
- Access any Value Added Service, e.g. by sending a HTTP GET request to the OIDC IDP userinfo endpoint as explained here TINFO Userinfo endpoint
Note that BankID OIDC Connect automatically handles does not handle the client code for the token exchange and provides API for getting user information for the current session via window.OIDC.doGetUserInfo Neverstep 2 and 3 above. Moreover, never embed or send the client_secret to the client application.
...
response_type: 'token', response_type: 'token id_token'
This flow returns an accessid_token and /or optinally an idaccess_token directly in the response to redirect_uri, bypassing the client_secret/code exchange from the Authorisation code flow.
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
OIDC.doInit({
// URL to OIDC service
oauth_url: '<oidc-baseurl>/protocol/openid-connect/auth',
// Merchant given client ID on the OIDC service
client_id: 'your_client_id',
// Merchant callback URL to receive authentication response
redirect_uri: 'https://yourdomain.com/oidc/callback',
// Activate implicit flow mode by setting response type to id_token token
response_type: 'id_token token',
// Set response mode to form_post
response_mode: 'form_post'
}); |
...
Combination of code grant and implicit flow. Authorisation code and tokens id_token can be delivered to redirect_uri.
Experimental features
Some additional JS Connector endpoints can be defined to let the Connector perform automatic token exchange and userinfo collection:
...
...
...
...
''...
.
...
''