@jarvis.oddle.me/oddle.pass v1.0.7

Oddle Pass

Oddle Pass allows end customers to login to multiple platforms with a single login and password - When visiting a platform, a user just needs to key in his Oddle Pass credentials and does not need to create a new account.

Table of contents

• Changelog
• Flows are supported
• Integrating Oddle Pass
• Initialize Oddle Pass App
• Handling result for signing in with Oddle Pass
• Signing in
  • Iframe flow
  • Redirect flow
  • Callback flow
• Signing out
  • On Iframe flow
  • On Redirect flow
  • On Callback flow
• Get customer details
• Change password
• Update customer details
• Get all addresses of customer
• Get address of customer by id
• Update address
• Delete address
• Set preferred delivery address for customer
• Create new address for customer

Changelog

Oddle Pass V5 - CHANGELOGS

Flows are supported

Iframe flow:

With browser has support 3rd party cookies, all methods about signIn of Oddle Pass will show on iframe tag which has been embedded into your site.

On the contrary, if browser hasn’t support, Oddle Pass will auto apply redirect flow.

Access Token will be automatic handle and store into localStorage of browser.

Redirect flow:

This flow just could be apply automatic by Oddle Pass

When you call signIn method from Oddle Pass, your site will be redirect to Oddle Pass site. When customer finish their sign in, Oddle Pass site will automatic redirect back to your site.

With this flow, when you have multiple listeners in many places in your code (ex: one at Header - which will be fired after Header mounted, one at Login button - which will be fired when customer click), after signing in success, just one listener which at Header will be fired because your site will be reload after redirecting.

Access Token will be automatic handle and store into localStorage of browser.

Callback flow:

With configure useIframe: false when initialize Oddle Pass you can apply this flow for Oddle Pass.

When you call signIn method from Oddle Pass, your site will be redirect to Oddle Pass site. When customer finish their sign in, Oddle Pass site will automatic redirect back to your site.

Access Token will be send to the redirectUrl which you have configured when initialize Oddle Pass.

Integrating Oddle Pass

Into Browser

You must include the JS library on your web pages by using:

<script src="https://accounts.oddle.me/cdn/lib/prod/oddle-pass-wrapper@1.0.0.min.js" />

Into WebApp

You can also integrate the library into the web application through the npm library:

npm i @jarvis.oddle.me/oddle.pass

Initialize Oddle Pass App

You just need to initialize Oddle Pass only one time

If you want to add more data into state at different places in your code, you can call initializeApp at anywhere you want, and Oddle Pass just affected by latest calling initializeApp

Parameters

clientId: string, // This properties will be sent to you after registering our service success
redirectUrl: string, // This properties will be sent to you after registering our service success
lang: string, // This property will be used to set localization message for content at Oddle Pass. It will follow the syntax xx_XX
payload: Payload

Payload = {
  menuName: string, // this value will be set into message that will response back to your side, and it will be used at some content text inside Oddle Pass
  disableMarketingMenu: boolean, // if the value of it is true, the Oddle Pass will not show the checkbox for customer subscription your marketing information. Default is false
  state: object, // this properties will contain everything you wanna get back from inside of accessToken
  useIframe: boolean // this properties is a flag for Oddle Pass know run on Iframe mode or Callback mode. OddlePass will run on redirect mode if this key have false value. Default is true
  redirectOriginalUrl: boolean // this property is flag for Oddle Pass know what redirectUrl will be used, home page of site or latest url which customer has accessed. Default is true
}

Usage

At browser

window.opw.initializeApp(
  clientId: string,
  redirectUrl: string,
  lang: string,
  {
     menuName: string,
     disableMarketingMenu: boolean,
     state: object,
     useIframe: boolean,
     redirectOriginalUrl: boolean
  }
)

window.opw.addListener((action) => {
  console.log({ action })
  // { action: 'initialized' }
})

At WebApp

import { addListener, initializeApp } from '@jarvis.oddle.me/oddle.pass'

initializeApp(
  clientId: string,
  redirectUrl: string,
  lang: string,
  {
     menuName: string,
     disableMarketingMenu: boolean,
     state: object,
     useIframe: boolean,
     redirectOriginalUrl: boolean
  }
)

addListener((action) => {
  console.log({ action })
  // { action: 'initialized' }
})

Handling result for signing in with Oddle Pass

Response

This method will create the listener at js lib side, and then when signing in from Oddle Pass success, the result of signing in will be passed into listener.

{
  action: string // signin_success, facebook_signin_success, signup_success, signout_success, verification_success
  message: string // the message of Oddle Pass, you can use it for toaster
}

Usage

At browser

window.opw.addListener((action, message) => {
  console.log({ action, message })
})

At WebApp

import { addListener } from '@jarvis.oddle.me/oddle.pass'

addListener((action, message) => {
  console.log({ action, message })
})

Signing in

On Iframe flow

After signing in success, Oddle Pass will auto store Access Token into localStorage of your browser.

When you call any method of Oddle Pass, they will be auto retrieve Access Token from localStorage and set it into request headers by field Authorization

The Access Token is required for almost methods of Oddle Pass about sign out, changing Oddle Pass’s account, retrieving information of Oddle Pass’s account.

Parameters

```bash
menuId: string //This id is used to uniquely identify each of your sites
```

Response

This method will return a Promise, so you need handle it to getting data from response.

{
  success: boolean
  type: string
  message: string
  data: {
    action: string('signin', 'signup'),
    id: string,
    phone: string,
    email: string,
    lastName: string,
    firstName: string,
    acceptMarketing: boolean, // this value is true when customer want to recieve promotions from Oddle Pass
    acceptMarketingMenu: boolean // this value is true when customer want to recieve promotions from your site (just response when action is signup)
  }
}

Usage

• At browser

  const signIn = async (menuId) => {
    const { success, data, message } = await window.opw.signIn(menuId)
    if (success) {
      const { action, id: oddlePassId, email, acceptMarketingMenu } = data
  
      switch(action) {
        case 'signup':
          // this case will have value of acceptMarketingMenu if you haven't enable disableMarketingMenu
          break
        case 'signin':
          // this case just response Oddle Pass account and don't have acceptMarketingMenu
          break
        default: break
      }
    } else {
      // handle for error case
    }
  }

• At WebApp

  import { signIn } from '@jarvis.oddle.me/oddle.pass'
  
  const signIn = async (menuId) => {
    const { success, message, data } = await signIn(menuId)
    if (success) {
      const { id: oddlePassId, email, action } = data
  
      switch(action) {
        case 'signup':
          // this case will have value of acceptMarketingMenu if you haven't enable disableMarketingMenu
          break
        case 'signin':
          // this case just response Oddle Pass account and don't have acceptMarketingMenu
          break
        default: break
      }
    } else {
      // handle for error case
    }
  }

On Redirect flow

This flow just can be used direct by Oddle Pass.

When you initialize Oddle Pass from you site, Oddle Pass will check the browser to know has the browser support 3rd party cookies. If not support, Oddle Pass will auto apply Redirect flow for signing in.

The Access Token still will be store into localStorage of browser after signing in success.

When you call any method of Oddle Pass, they will be auto retrieve Access Token from localStorage and set it into request headers by field Authorization

The Access Token is required for almost methods of Oddle Pass about sign out, changing Oddle Pass account, retrieving information of Oddle Pass account.

Parameters

menuId: string //This id is used to uniquely identify each of your sites

Response

This method will return a Promise, so you need handle it to getting data from response.

{
  action: string // signin_success, facebook_signin_success, signup_success
}

Usage

• At browser

  const signIn = (menuId) => window.opw.signIn(menuId)
  
  // should using addListener method at header or the component which will be mounted first
  window.opw.addListener((action) => {
    switch (action) {
      case 'signin_success':
      case 'facebook_signin_success':
      case 'signup_success':
        // fetch customer info
        break
      default: break
    }
  })

• At WebApp

  import { addListener, signIn } from '@jarvis.oddle.me/oddle.pass'
  
  const signIn = (menuId) => signIn(menuId)
  
  // should using addListener method at header or the component which will be mounted first
  addListener((action) => {
    switch (action) {
      case 'signin_success':
      case 'facebook_signin_success':
      case 'signup_success':
        // fetch customer info
        break
      default: break
    }
  })

On Callback flow

After signing in success, Oddle Pass will auto redirect to to your site. At the same time, the Access Token will be sent to redirectUrl which has been register Oddle Pass’s client

Parameters

menuId: string //This id is used to uniquely identify each of your sites

Callback params

`${redirectUrl}?accessToken=${accessToken}&expiresIn=${expiresIn}&tokenType=Bearer`

Usage

• At browser

  const signIn = (menuId) => window.opw.signIn(menuId)

At WebApp

import { signIn } from '@jarvis.oddle.me/oddle.pass'

const signIn = (menuId) => signIn(menuId)

Signing out

This method will clear all data about cookie and Access Token. So customer will be logged out all of your sites and Oddle Pass site

On Iframe flow

Parameters

oddlePassId: string // the id of customer after they sign in success

Response

{
  success: boolean,
  message: string,
}

Usage

• At browser

  const { success, message } = await window.opw.signOut(oddlePassId)

• At WebApp

    import { signOut } from '@jarvis.oddle.me/oddle.pass'
  
    const { success, message } = await signOut(oddlePassId)

On Redirect flow

This flow just can be used direct by Oddle Pass.

When you initialize Oddle Pass from you site, Oddle Pass will check the browser to know has the browser support 3rd party cookies. If not support, Oddle Pass will auto apply Redirect flow for signing out.

Parameters

oddlePassId: string // the id of customer after they sign in success

Response

{
  action: string // signout_success
}

Usage

• At browser

  await window.opw.signOut(oddlePassId)
  
  // should using addListener method at header or the component which will be mounted first
  addListener((action) => {
    switch (action) {
      case 'signout_success':
        window.location.reload()
        break
      default: break
    }
  })

• At WebApp

  import { addListener, signOut } from '@jarvis.oddle.me/oddle.pass'
  
  await signOut(oddlePassId)
  
  // should using addListener method at header or the component which will be mounted first
  addListener((action) => {
    switch (action) {
      case 'signout_success':
        window.location.reload()
        break
      default: break
    }
  })

On Callback flow

After signing out success, customer will be logged out from Oddle Pass site. At the same time, a announce will be sent to redirectUrl which has been register Oddle Pass’s client

Parameters

oddlePassId: string // the id of customer after they sign in success

Callback params

`${redirectUrl}?signoutSuccess=true`

Usage

• At browser

  const signOut = (oddlePassId) => window.opw.signOut(menuId)

• At WebApp

  import { signOut } from '@jarvis.oddle.me/oddle.pass'
  
  const signOut = (oddlePassId) => signOut(oddlePassId)

Get customer details

##Response

{
  success: boolean,
  message: string,
  data: {
    id: string,
    phone: string,
    email: string,
    gender: string,
    lastName: string,
    firstName: string,
    accountId: string,
    resetPasswordKey: string,
    accountActivated: boolean,
    resetPasswordExpiryDate: string,
    preferredDeliveryAddressId: string,
    registeredForLoyalty: boolean,
    additionalPhone: string,
    salutation: string,
    facebookId: string,
    source: string,
    dob: string,
    code: string,
    acceptMarketing: boolean, // this value is true when customer want to recieve promotions from Oddle Pass
    acceptMarketingMenu: boolean // this value is true when customer want to recieve promotions from your site
  }
}

Usage

At browser

const { success, message } = await window.opw.getCustomerInfo()

At WebApp

import { getCustomerInfo } from '@jarvis.oddle.me/oddle.pass'

const { success, message } = await getCustomerInfo()

Change password

This method will be used to update password for customer. It just can use after customer sign in success

Parameters

email: string // the email has been used to signup Oddle Pass
oddlePassId: string // this is id of customer that has responsed after signup Oddle Pass

Response

{
  success: boolean,
  message: string,
}

Usage

At browser

const { success, message } = await window.opw.changePassword(email, oddlePassId)

At WebApp

import { changePassword } from '@jarvis.oddle.me/oddle.pass'

const { success, message } = await changePassword(email, oddlePassId)

#Update customer details This method will be used to update information of customer on Oddle Pass

Parameters

oddlePassId: string // this is id of customer that has responsed after signup Oddle Pass
details: {
  lastName: string,
  firstName: string,
  phone: string,
  email: string,
  acceptMarketing: boolean
}

Response

{
  success: boolean,
  message: string,
  data: {
    id: string,
    phone: string,
    email: string,
    gender: string,
    lastName: string,
    firstName: string,
    accountId: string,
    resetPasswordKey: string,
    accountActivated: boolean,
    resetPasswordExpiryDate: string,
    preferredDeliveryAddressId: string,
    registeredForLoyalty: boolean,
    additionalPhone: string,
    salutation: string,
    facebookId: string,
    source: string,
    dob: string,
    code: string,
    acceptMarketing: boolean, // this value is true when customer want to recieve promotions from Oddle Pass
    acceptMarketingMenu: boolean // this value is true when customer want to recieve promotions from your site
  }
}

Usage

At Browser

const { success, message, data } = await window.opw.updateCustomerDetails(oddlePassId, details)

At WebApp

import { updateCustomerDetails } from '@jarvis.oddle.me/oddle.pass';

const { success, message, data } = await updateCustomerDetails(customerId, details);

Get all addresses of customer

Response

{
  success: boolean
  message: string
  data: {
    id: string,
    customerId: string,
    autoCompleteAddress: boolean,
    address: string,
    addressTwo: string,
    city: string,
    state: string,
    postal: string,
    country: string,
    latitude: number,
    longitude: number,
    newAddress: boolean
  }
}

Usage

At browser

const { success, message, data } = await window.opw.getAllAddress()

At WebApp

import { getAllAddress } from '@jarvis.oddle.me/oddle.pass';

const { success, message, data } = await getAllAddress();

Get address of customer by id

Parameters

addressId: string

Response

{
  success: boolean
  message: string
  data: {
    id: string,
    customerId: string,
    autoCompleteAddress: boolean,
    address: string,
    addressTwo: string,
    city: string,
    state: string,
    postal: string,
    country: string,
    latitude: number,
    longitude: number,
    newAddress: boolean
  }
}

Usage

At browser

const { success, message, data } = await window.opw.getAddressById(addressId)

At WebApp

import { getAddressById } from '@jarvis.oddle.me/oddle.pass';

const { success, message, data } = await getAddressById(addressId);

Update address

Parameters

addressId: string
addressDetails: {
  autoCompleteAddress: boolean,
  address: string,
  addressTwo: string,
  city: string,
  state: string,
  postal: string,
  country: string,
  latitude: number,
  longitude: number
}

Response

{
  success: boolean
  message: string
  data: {
    id: string,
    customerId: string,
    autoCompleteAddress: boolean,
    address: string,
    addressTwo: string,
    city: string,
    state: string,
    postal: string,
    country: string,
    latitude: number,
    longitude: number,
    newAddress: boolean
  }
}

Usage

At browser

const { success, message, data } = await window.opw.updateAddress(addressId, addressDetails)

At WebApp

import { updateAddress } from '@jarvis.oddle.me/oddle.pass';

const { success, message, data } = await updateAddress(addressId, addressDetails);

Delete address

##Parameters

addressId: string

Response

{
  success: boolean
  message: string
}

##Usage ###At browser

const { success, message, data } = await window.opw.updateAddress(addressId)

###At WebApp

import { updateAddress } from '@jarvis.oddle.me/oddle.pass';

const { success, message, data } = await updateAddress(addressId);

Set preferred delivery address for customer

Parameters

addressId: string
oddlePassId: string // this is id of customer that has responsed after signup Oddle Pass

Response

{
  success: boolean
  message: string
  data: {
    id: string,
    customerId: string,
    autoCompleteAddress: boolean,
    address: string,
    addressTwo: string,
    city: string,
    state: string,
    postal: string,
    country: string,
    latitude: number,
    longitude: number,
    newAddress: boolean
  }
}

Usage

At browser

const { success, message, data } = await window.opw.setReferredDeliveryAddress(addressId, oddlePassId)

At WebApp

import { setReferredDeliveryAddress } from '@jarvis.oddle.me/oddle.pass';

const { success, message, data } = await setReferredDeliveryAddress(addressId, oddlePassId);

Create new address for customer

Parameters

oddlePassId: string // this is id of customer that has responsed after signup Oddle Pass
addressInfo: {
  customerId: string,
  autoCompleteAddress: boolean,
  address: string,
  addressTwo: string,
  city: string,
  state: string,
  postal: string,
  country: string,
  latitude: number,
  longitude: number
}

Response

{
  success: boolean
  message: string
  data: {
    id: string,
    customerId: string,
    autoCompleteAddress: boolean,
    address: string,
    addressTwo: string,
    city: string,
    state: string,
    postal: string,
    country: string,
    latitude: number,
    longitude: number,
    newAddress: boolean
  }
}

Usage

At browser

const { success, message, data } = await window.opw.createNewAddress(oddlePassId, addressInfo)

At WebApp

import { createNewAddress } from '@jarvis.oddle.me/oddle.pass';

const { success, message, data } = await createNewAddress(oddlePassId, addressInfo);