@mbizmarket/login-button-mbizmarket v1.0.4

Mbizmarket Login Button

A button that simplifies the Connect to Mbizmarket flow on your website

Prerequisites

Make sure you already have a Client ID from Mbizmarket and a configured callback URL to ensure the smoothest installation flow. Please contact us for detail how to get clientId

Installation

Here's some ways you can install Mbizmarket Login Button

With NPM

Use this method if you're using NPM or other package manager.

Run this command on your project folder

  npm i @mbizmarket/login-button-mbizmarket

or the equivalent command in your preferred package manager

After installation, you can import the package with this line:

import MBIZMARKET from "@mbizmarket/login-button-mbizmarket"

or, if your project didn't support ESM yet:

const MBIZMARKET = require("@mbizmarket/login-button-mbizmarket").default

And now the library is ready to use

Via CDN

Use this method if you don't use NPM or other similar package managers.

Add this line to your HTML file, preferrably below your UI markup

with unpkg

use latest version

<script src="https://www.unpkg.com/@mbizmarket/login-button-mbizmarket/dist/index.global.js"></script>

or using specific version:

<script src="https://www.unpkg.com/@mbizmarket/login-button-mbizmarket@1.0.4/dist/index.global.js"></script>

with jsdelivr

<script src="https://cdn.jsdelivr.net/npm/@mbizmarket/login-button-mbizmarket/dist/index.global.js"></script>

or using specific version:

<script src="https://cdn.jsdelivr.net/npm/@mbizmarket/login-button-mbizmarket@1.0.4/dist/index.global.js"></script>

After that, now the namespace MBIZMARKET is available globally and ready to use

Usage

To create the button, just create a div like this: (Please make sure that the redirectUrl and your domain url is same.)

<div
  data-mbizmarket-login
  data-mbizmarket-client-id="<YOUR-CLIENT-ID>"
  data-mbizmarket-redirect-url="<YOUR-CALLBACK-URL>"
></div>

And add this line to your script:

MBIZMARKET.init()

And the button should show up with the default configuration.

After button clicked and successfully redirect back to your redirectUrl, you will get string code in query string, and use the given code to save to your user session.

Example in PHP:

// in your callback php-controller
<?php

$code = $this->request->getQuery('code');
if (!empty($code)) {
  $this->session->set('codeMbizmarket', $code);
}

?>

// in view
<script src="https://cdn.jsdelivr.net/npm/@mbizmarket/login-button-mbizmarket@1.0.4/dist/index.global.js"></script>

{% if ($session->get('codeMbizmarket')) %}

  <p>Connected to Mbizmarket</p>
  <a href="https://www.mbizmarket.co.id/sso/authenticate?authKey={$session->get('codeMbizmarket')}&clientId=<YOUR-CLIENT-ID>" target="_blank">Go to Mbizmarket</a>

{% else %}

  <div
    data-mbizmarket-login
    data-mbizmarket-client-id="<YOUR-CLIENT-ID>"
    data-mbizmarket-redirect-url="<YOUR-CALLBACK-URL>"
  ></div>

{% endif %}

<script>

  MBIZMARKET.init()
</script>

Customization

Currently, you can only customize the text of the login button by adding data attributes to the div. Here's the available customization configuration:

• data-text-connect: Change the text on default state (i.e. the initial state)
• data-text-connecting: Change the text when clicked and loading