marketplays-sdk-js
The Marketplays SDK for Vue.js provides a rich set of client-side functionality that:
- Enables you to use Marketplays Login to lower the barrier for people to sign up on your site.
- Makes it easy to call into Marketplays Rest API
Install
Install using npm:
npm install marketplays-sdk-js --save
Table of contents
Setup
The following snippet of code will load and initialize the SDK. You must replace the values with the your own Marketplays client details.
For more client options see Client Options
main.js
import mp from 'marketplays-sdk-js'
Vue.use(mp);
Vue.mp.client.init({
clientId: 'YOUR_CLIENT_ID',
secret: 'YOUR_SECRET_ID',
redirectUri: 'YOUR_REDIRECT_URI' // https://www.example.com/user/marketplays-callback
})
Client Options
Option Name | Type | Default | Description |
---|---|---|---|
clientId | String | - | The client id |
clientSecret | String | - | The Secret string |
redirectUri | String | - | url of callback after login |
prod | Boolen | false | Which server to call. true = com. false = xyz |
locale | String | en | user text language response supported languages |
Marketplays Login
Marketplays Login allows users to register or sign in to your app with their Marketplays identity.
Step - 1
Generate url for opening marleplays login page into iframe
Login.vue
<template>
<iframe id="frame1" name="frame1"
:src="url" style="width: 100%; min-height: 100%" frameborder="0"></iframe>
</template>
<style scoed>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
iframe {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
</style>
<script>
export default {
data () {
return {
url: ''
}
},
created () {
this.url = this.$mp.auth.getAuthorizationCodeUrl(
[
// you can use scopes from 'scope' object
this.$mp.scope.SCOPE_AUTH_USER // auth.user
]
)
}
}
</script>
Step - 2
create your redirect page, and create access token from authorization code. ( Need to match to your redirect client setup )
Callback.vue
<script>
export default {
created () {
let error = this.$route.query.error
if (error) {
// error
}
// authorization code for create token
let code = this.$route.query.code
if (code) {
this.$mp.auth.createTokenFromAuthCode(code)
.then(() => {
// redirect to your home page
window.top.location.href = '/your-route'
})
.catch(error => {
// error
})
}
}
}
</script>
Step - 3
Once you are create token from authorization code, you can call api methods
Home.vue
this.$mp.api.user().me()
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
API Model Methods
user()
Additional api methods:
- me() - Get current authenticate user data
apps()
Additional api methods:
- me() Get current app data
appsPlan(appId)
organization()
organizationRole(organizationId)
organizationUser(organizationId)
organizationLicense(organizationId)
Additional api methods:
- validate () - validate current app if license exist
organizationInvitation(organizationId)
Additional api methods:
- resendInvitation (invitationId)
- acceptInvitation(invitationIdentifier)
genericCountries()
genericLanguages()
genericCurrencies()
genericStatuses()
API CRUD Methods
The API CRUD Methods is the primary way to get data out of, and put data into, Marketplays platform (Based Promise).
you can use to programmatically query data, post new users, manage organizations, and perform a variety of other tasks that an app might implement.
If you do not have the organization number, you can get it from user data
getSingleRecord (recordId)
-
recordId:
- Type:
Number
- Requested record id.
- Type:
Example:
let orgId = 1
this.$mp.api.organizationUser(orgId).getSingleRecord (userId)
.then(result => {
// success
})
.catch(error => {
// error
})
getRecordsList (params)
-
params:
- Type:
Object
- Sort results with params.
- Type:
Example:
For more information about search and filters #search-and-filters
let orgId = 1
const params = {
firstName: 'ron'
}
this.$mp.api.organizationUser(orgId).getRecordsList (params)
.then(result => {
// success
})
.catch(error => {
// error
})
createRecord (data)
-
params:
- Type:
Object
- Data to create record.
- Type:
Example:
let orgId = 1
const params = {
name: 'Shay Altman',
email: 'shay@genie-shop.com'
}
this.$mp.api.organizationInvitation(orgId).createRecord (params)
.then(result => {
// success
})
.catch(error => {
// error
})
updateRecord (recordId, data)
-
recordId:
- Type:
Number
- Requested record id for update.
- Type:
-
params:
- Type:
Object
- Data to update record.
- Type:
Example:
let orgId = 1
const params = {
taxId: '123456',
website: 'www.example.com',
}
this.$mp.api.organization().updateRecord (orgId, params)
.then(result => {
// success
})
.catch(error => {
// error
})
deleteRecord (recordId)
-
recordId:
- Type:
Number
- Requested record id to delete.
- Type:
Example:
let orgId = 1
let invitationId = 20 // invitation id
this.$mp.api.organizationInvitation(orgId).deleteRecord (invitationId)
.then(result => {
// success
})
.catch(error => {
// error
})
Auth Methods
logout()
When you want create logout from marketplays client
this.$mp.auth.logout()
isAuthenticated()
Return true if user is authenticated
this.$mp.auth.isAuthenticated()
getAuthorizationCodeUrl([scope], state) // state is optional
Get url for requesting the resource owner for authorization code
Scope list
You can use scope from scope object
this.$mp.scope.SCOPE_AUTH_USER
- SCOPE_AUTH_USER ('auth.user')
- SCOPE_AUTH_OTP_VALIDATE ('auth.otp.validate')
- SCOPE_AUTH_USER_CREATE ('auth.user.create')
- SCOPE_AUTH_ORGANIZATION ('auth.organization')
- SCOPE_AUTH_GENERICS ('auth.generics')
- SCOPE_AUTH_APPS ('auth.apps')
- SCOPE_AUTH_LICENSE ('auth.license')