Appmixer
Search…
v4.1
Component Definition
Customizing UI
Appmixer Self-Managed
API
Appmixer SDK
Appmixer Backoffice
Tutorials
Appmixer CLI
App Registration
Authentication
Components that require authentication from the user must implement an authentication module for the service/module they belong to. The authentication module must be named
auth.js and must be stored under either the service or module directory (i.e. [vendor]/[service]/auth.js or [vendor/[service]/[module]/auth.js. Appmixer currently supports three types of authentication mechanisms that are common for today's APIs: API key, OAuth 1 and OAuth 2.Appmixer provides an easy way to configure authentication modules. Most of the time, it's just about configuring a 3rd party service provider URLs for authentication, requesting access tokens and token validation.
Authentication Module Structure
Each authentication module is a NodeJS module that returns an object with
type and definition properties. type can be either apiKey, oauth (for OAuth 1) and oauth2 (for OAuth 2). definition is either an object or a function (useful in cases where there's a code that you need to run dynamically).type
The type of the authentication mechanism. Any of
apiKey, oauth and oauth2.definition
The definition of the authentication mechanism specific to the API service provider. An object or a function. This differs significantly between authentication mechanisms.
If the definition property is specified as a function, it that case it has one argument context. It is an object that contains either consumerKey, consumerSecret (OAuth 1) or clientId, clientSecret (OAuth 2) and it always contains callbackUrl property. This will be shown later in the examples.
Authentication mechanisms
As it was mentioned in the beginning, Appmixer authentication supports three mechanisms: API Key, OAuth 1 and OAuth 2. Each of them has a different definition.
function, object or a URL string
In the following examples we will show how a particular property of the definition object can be specified as a function, object or string. Let's demonstrate that on a requestProfileInfo property, that one is common for all authentication mechanisms.
1
// or any library you want to perform API requests
2
const request = require('request-promise');
3
​
4
module.exports = {
5
​
6
// there will be some other properties based on authenication mechanism
7
// defined prior requestProfileInfo
8
9
definition: {
10
11
// requestProfileInfo can be defined as a function. In this case, you
12
// can do whatever you need in here and return object with user's
13
// profile information (in promise)
14
requestProfileInfo: async context => {
15
16
// curl https://mydomain.freshdesk.com/api/v2/agents/me \
17
// -u myApiKey:X'
18
return request({
19
method: 'GET',
20
url: `https://${context.domain}.acme.com/api/v2/agents/me`,
21
auth: {
22
user: context.apiKey // 'context' will be explained later
23
},
24
json: true
25
});
26
},
27
28
// or you can specify it as an object. In this case, the object follows
29
// the 'request' javascript library options.
30
requestProfileInfo: {
31
method: 'GET',
32
url: 'https://acme.com/get-some-records/app_id={{appId}}',
33
headers: {
34
'Authorization': 'Basic {{apiKey}}' // {{apiKey}} explained later
35
}
36
},
37
38
// the last way is to specify just the URI. In this case Appmixer
39
// will perform GET request to that URI.
40
requestProfileInfo: 'https://acme.com/get-profile-info?apiKey={{apiKey}}'
41
}
42
}
43
​
Copied!
API key
This is the most basic type of third party authentication, since you only need to provide a sort of ID and a key provided by the app in concern. In order to use this mechanism,
type property must be set to apiKey. Here is an example from Freshdesk components:1
module.exports = {
2
​
3
type: 'apiKey',
4
​
5
definition: {
6
​
7
tokenType: 'authentication-token',
8
​
9
auth: {
10
domain: {
11
type: 'text',
12
name: 'Domain',
13
tooltip: 'Your Freshdesk subdomain - e.g. if the domain is <i>https://example.freshdesk.com</i> just type <b>example</b> inside this field'
14
},
15
apiKey: {
16
type: 'text',
17
name: 'API Key',
18
tooltip: 'Log into your Freshdesk account and find <i>Your API Key</i> in Profile settings page.'
19
}
20
},
21
​
22
accountNameFromProfileInfo: 'contact.email',
23
​
24
requestProfileInfo: async context => {
25
​
26
// curl https://mydomain.freshdesk.com/api/v2/agents/me \
27
// -u myApiKey:X'
28
return request({
29
method: 'GET',
30
url: `https://${context.domain}.freshdesk.com/api/v2/agents/me`,
31
auth: {
32
user: context.apiKey,
33
password: 'X'
34
},
35
json: true
36
});
37
},
38
​
39
validate: async context => {
40
​
41
// curl https://mydomain.freshdesk.com/api/v2/agents/me \
42
// -u myApiKey:X'
43
const credentials = `${context.apiKey}:X`;
44
const encoded = (new Buffer(credentials)).toString('base64');
45
await request({
46
method: 'GET',
47
url: `https://${context.domain}.freshdesk.com/api/v2/agents/me`,
48
headers: {
49
'Authorization': `Basic ${encoded}`
50
}
51
});
52
// if the request doesn't fail, return true (exception will be captured in caller)
53
return true;
54
}
55
}
56
};
Copied!
Now we explain the fields inside the definition object:
auth (object)
This is basically the definition for the form that will be displayed to the user to collect the data required by the third party application. Freshdesk requires the domain name and the API key in order to authenticate Appmixer. So we define two fields representing those items and we define the label and tooltip that will appear in the form for each field. In this case, the auth definition will make Appmixer to render a form like this:
Authentication form for Freshdesk, defined by auth object
The values introduced by the user will be exposed in the
context object with the same keys as in the auth object. In this case we will be able to access the values as context.domain and context.apiKey.While this field is optional, is recommended for a better UX. This field can be a function which returns a promise, object or a string. It is about calling an endpoint from the third party app which returns the current user info. This will be used to display a name for this account in Appmixer.
This field is the path in the object returned by
requestProfileInfo that points to the value that will be used as account name. Following the example, the object returned by requestProfileInfo would have an structure like this:1
{
2
contact: {
3
email: '[email protected]',
4
name: 'Appmixer example',
5
// More properties here...
6
}
7
// There can be more properties here as well...
8
}
Copied!
We want to use the email to identify the Freshdesk accounts in Apmmixer, so we set
accountNameFromProfileInfo as contact.email.If
requestProfileInfo is not defined, the auth object will be used instead. The account name will be the resolved value for the property specified by accountNameFromProfileInfo.Similar to
requestProfileInfo. This is used to validate if the authentication data entered by the user is correct. For this purpose you can call any endpoint that requires authentication, you can even use the same endpoint as requestProfileInfo. If the data is correct, this function should resolve to any non-false value. Otherwise throw an error or resolve to false. You can define validate as an object. In that case, that object has the same structure as object passed into request library. In that case it will look like this:1
'use strict';
2
​
3
module.exports = {
4
​
5
type: 'apiKey',
6
​
7
definition: {
8
​
9
tokenType: 'apiKey',
10
​
11
accountNameFromProfileInfo: 'appId',
12
​
13
auth: {
14
appId: {
15
type: 'text',
16
name: ' APP ID',
17
tooltip: 'Log into your account and find Api key.'
18
},
19
apiKey: {
20
type: 'text',
21
name: 'REST API Key',
22
tooltip: 'Found directly next to your App ID.'
23
}
24
},
25
​
26
// In the validate request we neet the appId and apiKey specified by user.
27
// All properties defined in the previous 'auth' object will be
28
// available in the validate call. Just use {{whatever-key-from-auth-object}}
29
// anywhere in the next object. Appmixer will replace these with the
30
// correct values.
31
validate: {
32
method: 'GET',
33
url: 'https://acme.com/get-some-records/app_id={{appId}}',
34
headers: {
35
'Authorization': 'Basic {{apiKey}}'
36
}
37
}
38
}
39
};
40
​
Copied!
OAuth 1
In order to use this mechanism,
type property must be set to oauth. Here is an example from Trello components:1
'use strict';
2
const OAuth = require('oauth').OAuth;
3
const Promise = require('bluebird');
4
​
5
module.exports = {
6
​
7
type: 'oauth',
8
​
9
// In this example, 'definition' property is defined as a function.
10
definition: context => {
11
​
12
let trelloOauth = Promise.promisifyAll(new OAuth(
13
'https://trello.com/1/OAuthGetRequestToken',
14
'https://trello.com/1/OAuthGetAccessToken',
15
context.consumerKey,
16
context.consumerSecret,
17
'1.0',
18
context.callbackUrl,
19
'HMAC-SHA1'
20
), { multiArgs: true });
21
​
22
return {
23
​
24
accountNameFromProfileInfo: 'id',
25
​
26
authUrl: context => {
27
​
28
return 'https://trello.com/1/OAuthAuthorizeToken' +
29
'?oauth_token=' + context.requestToken +
30
'&name=AppMixer' +
31
'&scope=read,write,account' +
32
'&expiration=never';
33
},
34
​
35
requestRequestToken: () => {
36
​
37
return trelloOauth.getOAuthRequestTokenAsync()
38
.then(result => {
39
return {
40
requestToken: result[0],
41
requestTokenSecret: result[1]
42
};
43
});
44
},
45
​
46
requestAccessToken: context => {
47
​
48
return trelloOauth.getOAuthAccessTokenAsync(
49
context.requestToken,
50
context.requestTokenSecret,
51
context.oauthVerifier
52
).then(result => {
53
return {
54
accessToken: result[0],
55
accessTokenSecret: result[1]
56
};
57
});
58
},
59
​
60
requestProfileInfo: context => {
61
​
62
return trelloOauth.getProtectedResourceAsync(
63
'https://api.trello.com/1/members/me',
64
'GET',
65
context.accessToken,
66
context.accessTokenSecret
67
).then(result => {
68
if (result[1].statusCode !== 200) {
69
throw new Error(result[1].statusMessage);
70
}
71
result = JSON.parse(result[0]);
72
// get rid of limits for now
73
// may and will contain keys with dots - mongo doesn't like it
74
delete result.limits;
75
return result;
76
});
77
},
78
​
79
validateAccessToken: context => {
80
​
81
return trelloOauth.getProtectedResourceAsync(
82
'https://api.trello.com/1/tokens/' + context.accessToken,
83
'GET',
84
context.accessToken,
85
context.accessTokenSecret
86
).then(result => {
87
if (result[1].statusCode === 401) {
88
throw new context.InvalidTokenError(result[1].statusMessage);
89
}
90
if (result[1].statusCode !== 200) {
91
throw new Error(result[1].statusMessage);
92
}
93
​
94
result = JSON.parse(result[0]);
95
if (result['dateExpires'] === null) {
96
return;
97
}
98
throw new context.InvalidTokenError('Invalid token.');
99
});
100
}
101
};
102
}
103
};
104
​
Copied!
Note that in this case the definition is a function instead of an object, but it still returns an object with the items needed for OAuth 1 authentication, similar to API key authentication. Now we explain the fields from definition object:
This must be a function (or an object, or just a string URL as explained here) that returns a promise which must resolve to an object containing
requestToken and requestTokenSecret the same way that is showed on the example. Those are needed to get the access token and become exposed by the context - context.requestToken and context.requestTokenSecret.This must be a function (or an object, or just a string URL as explained here) that returns a promise which must resolve to an object containing
accessToken and accessTokenSecret the same way that is showed on the example. Usually you will be using the requestToken and requestTokenSecret inside this function as they are required by the OAuth 1 flow in this step. Similarly to requestRequestToken function, accessToken and accessTokenSecret will become exposed by the context - context.accessToken and context.accessTokenSecret.​Function, object or a string URL returning auth URL. Appmixer will then use this URL to redirect the user to proper login page. The
requestToken is available in the context. The example shows the authUrl declaration using the token provided by the context.This property serves the same purpose as validate property in the API Key mechanism. This is used by Appmixer to test if the access token is valid and accepted by the third party app. You have access to
context.accessToken and context.accessTokenSecret to make authenticated requests. If the token is valid, this function should resolve to any non-false value. Otherwise throw an error or resolve to false.OAuth 2
The latest OAuth protocol and industry-standard, OAuth 2.0 improved many things from the first version in terms on usability and implementation, while maintaining a high degree of security. It is easier to implement in Appmixer as well. In order to use this mechanism,
type property must be set to oauth2. Here is an example from Asana auth.js:1
'use strict';
2
const request = require('request-promise');
3
​
4
module.exports = {
5
​
6
type: 'oauth2',
7
​
8
// function definition is used in this case because of the 'profileInfo'
9
// property. It is set in the 'requestAccessToken' function and then
10
// later returned in 'requestProfileInfo' function.
11
definition: () => {
12
​
13
let profileInfo;
14
​
15
return {
16
​
17
accountNameFromProfileInfo: context => {
18
​
19
return context.profileInfo['email'] || context.profileInfo['id'].toString();
20
},
21
​
22
authUrl: 'https://app.asana.com/-/oauth_authorize',
23
​
24
requestAccessToken: context => {
25
​
26
// don't put params into post body, won't work, have to be in query
27
let tokenUrl = 'https://app.asana.com/-/oauth_token?' +
28
'grant_type=authorization_code&code=' + context.authorizationCode +
29
'&redirect_uri=' + context.callbackUrl +
30
'&client_id=' + context.clientId +
31
'&client_secret=' + context.clientSecret;
32
​
33
return request({
34
method: 'POST',
35
url: tokenUrl,
36
json: true
37
}).then(result => {
38
profileInfo = result['data'];
39
let newDate = new Date();
40
newDate.setTime(newDate.getTime() + (result['expires_in'] * 1000));
41
return {
42
accessToken: result['access_token'],
43
refreshToken: result['refresh_token'],
44
accessTokenExpDate: newDate
45
};
46
});
47
},
48
​
49
requestProfileInfo: () => {
50
​
51
return profileInfo;
52
},
53
​
54
refreshAccessToken: context => {
55
​
56
// don't put params into post body, won't work, have to be in query
57
let tokenUrl = 'https://app.asana.com/-/oauth_token?' +
58
'grant_type=refresh_token&refresh_token=' + context.refreshToken +
59
'&redirect_uri=' + context.callbackUrl +
60
'&client_id=' + context.clientId +
61
'&client_secret=' + context.clientSecret;
62
​
63
return request({
64
method: 'POST',
65
url: tokenUrl,
66
json: true
67
}).then(result => {
68
profileInfo = result['data'];
69
let newDate = new Date();
70
newDate.setTime(newDate.getTime() + (result['expires_in'] * 1000));
71
return {
72
accessToken: result['access_token'],
73
accessTokenExpDate: newDate
74
};
75
});
76
},
77
​
78
validateAccessToken: {
79
method: 'GET',
80
url: 'https://app.asana.com/api/1.0/users/me',
81
auth: {
82
bearer: '{{accessToken}}'
83
}
84
}
85
};
86
}
87
};
88
​
Copied!
Notice that there is no
requestRequestToken method in OAuth 2, but we there is the requestAccessToken used to get the token and refreshAccessToken method, which is used by Appmixer to refresh the access tokens. Now we explain the definition object properties:Similar to OAuth 1, we should provide the authentication url for the third party app. However, due to the different authentication flows supported by OAuth 2, the way this is defined may vary according to the third party implementation. If the OAuth 2 implementation is standard, you can define the authUrl with just a string like:
1
authUrl: 'https://www.dropbox.com/oauth2/authorize'
Copied!
Standard means, there is a
response_type parameter set to code, then there is the client_id, redirect_uri, state and scope parameter. If the OAuth 2 implementation requires any other parameters (or the standard ones use different names), then you have to define this property as a function and provide all the additional parameters. The same logic applies to the following property requestAccessToken.This function should return a promise with an object which contains
accessToken, refreshToken (optional, some OAuth 2 implementations do not have refresh tokens) and accessTokenExpDate or expires_in (also options if the implementation does not have tokens that expire). Inside this function we call the endpoint which handles out the access tokens for the application. Inside this function you have access to context properties you need: clientId, clientSecret, callbackUrl and authorizationCode.Part of the OAuth 2 specification is the ability to refresh short lived tokens via a refresh token that is issued along with the access token. This function should call the refresh token endpoint on the third party app and resolve to an object with
accessToken and accessTokenExpDate properties, as shown in the example. You have access to context properties clientId, clientSecret, callbackUrl and refreshToken.There are more ways the OAuth 2 can be implemented. It always depends on the third party server and its OAuth 2 implementation.
This is an example of Dropbox auth.js module:
1
'use strict';
2
​
3
module.exports = {
4
​
5
type: 'oauth2',
6
​
7
definition: {
8
​
9
accountNameFromProfileInfo: 'email',
10
​
11
authUrl: 'https://www.dropbox.com/oauth2/authorize',
12
​
13
requestAccessToken: 'https://api.dropbox.com/oauth2/token',
14
​
15
requestProfileInfo: {
16
'method': 'POST',
17
'uri': 'https://api.dropboxapi.com/2/users/get_current_account',
18
'headers': {
19
'authorization': 'Bearer {{accessToken}}'
20
}
21
}
22
}
23
};
24
​
Copied!
It can be that simple, if the third party API implements OAuth 2 according to standards. And in this Dropbox case, their OAuth 2 implementation does not contain refresh tokens.
Sometimes the OAuth 2 needs a scope or a different scope delimiter. Here is a full example of Microsoft authentication module with such features:
1
'use strict';
2
const TENANT = 'common';
3
​
4
module.exports = {
5
​
6
type: 'oauth2',
7
​
8
definition: {
9
​
10
scope: ['offline_access', 'user.read'],
11
​
12
scopeDelimiter: ' ',
13
​
14
authUrl: `https://login.microsoftonline.com/${TENANT}/oauth2/v2.0/authorize`,
15
​
16
requestAccessToken: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
17
​
18
refreshAccessToken: 'https://login.microsoftonline.com/common/oauth2/v2.0/token',
19
​
20
accountNameFromProfileInfo: 'displayName',
21
​
22
emailFromProfileInfo: 'mail',
23
​
24
requestProfileInfo: 'https://graph.microsoft.com/v1.0/me',
25
​
26
validateAccessToken: {
27
method: 'GET',
28
url: 'https://graph.microsoft.com/v1.0/me',
29
auth: {
30
bearer: '{{accessToken}}'
31
}
32
}
33
}
34
};
35
​
Copied!
scope
String or an array of strings.
scopeDelimiter
String. The default one is
, and you can change it to ' ' for example.Setting OAuth 1,2 secrets
The OAuth applications need some secrets: consumerKey, consumerSecret (OAuth 1) or clientId, clientSecret (OAuth 2). If you are developing a new application you have to have a way to given these values to Appmixer engine. That way is called credentials.json file and has to be located where your auth.js file is.
credentials.json
Then when you pack and publish your component archive, Appmixer will read the file and store the values into mongo DB. Later it will use them to create context for your auth.js module.
Last modified 1yr ago