[![Build Status](https://travis-ci.org/shay1989/vue-marketplays.svg?branch=master)](https://travis-ci.org/shay1989/vue-marketplays)


Keywords
vue-marketplays, vue, sdk, marketplays
License
MIT
Install
npm install vue-marketplays@1.0.21

Documentation

marketplays-sdk-js

Build Status

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

Put this code into your main.js file.

This code will load and initialize the SDK. You must replace the values with the your own Marketplays client details.

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'
})

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
                ],
                '/your-state'
            )
        }
    }
</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().getData()
    .then(response => {
        console.log(response)
    })
    .catch(error => {
        console.log(error)
    })

API Model Methods

user()

Get user data

apps()

Get apps data

appsPlan(appId)

Get appsPlan data

organization()

Get organization data

organizationRole(organizationId)

Get organizationRole data

organizationUser(organizationId)

Get organizationUser data

organizationLicense(organizationId)

Get organizationLicense data

organizationInvitation(organizationId)

Get organizationInvitation data

genericCountries()

Get genericCountries data

genericLanguages()

Get genericLanguages data

genericCurrencies()

Get genericCurrencies data

genericStatuses()

Get genericStatuses data

API CRUD Methods

The API Core 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.

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.

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.

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.
  • params:

    • Type: Object
    • Data to update record.

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.

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)

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')