rdp-sso

SSO package for RDP products

Install

npm install @reddotpay/rdp-sso

Requirements

To be used with Vue 2.x and Vue-Router 3.x

Environment variables (build/buildenv.sh)

#!/bin/sh

PARENT_DIR=$( pwd -P )
PATH="${PARENT_DIR}/.env.development.local"
if [ "$1" == "prod" ]; then
	PATH="${CI_PROJECT_DIR}/frontend/.env.production"
fi

echo "VUE_APP_RDP_SSO_ENDPOINT=\"$RDP_SSO_ENDPOINT\"" >> $PATH
echo "VUE_APP_RDP_SSO_PAGE=\"$RDP_SSO_PAGE\"" >> $PATH
echo "VUE_APP_RDP_SSO_PUB=\"$RDP_SSO_PUBLIC_KEY\"" >> $PATH
echo "VUE_APP_RDP_SSO_ISS=\"$RDP_SSO_ISS\"" >> $PATH
echo "VUE_APP_RDP_SSO_SHORTKEY_TIMEOUT=\"$RDP_SSO_SHORTLIVE_TIMEOUT\"" >> $PATH

CSP

Allow $RDP_SSO_CSP in connect-src CSP

Create a few files below to use

auth.vue

Page to perform SSO token verification/exchange

<template>
</template>

<script>

export default {
	name: 'auth',
	mounted() {
		const vue = this;
		vue.$sso.checkSSO(vue.$router);
	}
}
</script>

login.vue

Page for callback URL from SSO after logging in

<template>
</template>

<script>

export default {
	name: 'login',
	mounted() {
		const vue = this;
		// omit vue.$router to use window.location for redirection
		vue.$sso.doLogin(vue.$route, vue.$router);
	}
}
</script>

Modify Router.js and add entry to routes

import Login from './views/login.vue'; // path to login.vue
import Auth from './views/auth.vue'; // path to auth.vue
routes: [
	{	// callback URL from SSO after logging in
		path: '/login',
		component: Login,
		name: 'login',
	},
	{	// URL to perform SSO token verification/exchange
		path: '/auth',
		component: Auth,
		name: 'auth',
	},
]

Usage

main.js

import Vue from 'vue';
import SSO from '@reddotpay/rdp-sso';

Object.defineProperty(Vue.prototype, '$sso', { value: SSO });

router.beforeEach((to, from, next) => {
	// this line of code is to handle the hashed url properly, since we are not using history mode
	if (window.location.pathname.length >= 2) {
		window.location = `${window.location.origin}/#${window.location.pathname}${window.location.search}`;
	}

	// the entry point for SSO
	// SSO will redirect to optionalDefaultPath after login (/some-path)
	SSO.init(to, from, router, optionalDefaultPath);
	next();
});

To logout

const vue = this;
// supply a callback function to doLogout for redirect
vue.$sso.doLogout(function() {
	// vue.$router.push({ name: 'home' });
	// vue.$router.push({ path: '/' });
});

To get user's data

export default {
	mounted() {
		const vue = this;
		const userDataObj = vue.$sso.getSSOData();
	}
}

sample userDataObj

{
	"rdp_username": "[email protected]", // email address of the user when signing up
	"rdp_firstname": "test", // first name of the user when
	"rdp_lastname": "test", // last name of the user
	"rdp_company": "test", // companyID used to log in
	"rdp_companyName": "test", // company name entered when user signs up
	"rdp_groupID": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // company UUID (used for MAM)
	"rdp_role": "merchant-admin"|"merchant-staff" // role of user
	"rdp_uuid": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // UUID of user (used for permissions etc)
	"rdp_auth": "auth", // sso variables
	"rdp_merchantID": "{ Staging: [merchantID1, merchantID2, ...] | '*',
						Production: [merchantID1, merchantID2, ...] | '*'
						}", "// array of MerchantID | or '*' ('*' represents all MerchantID) that this user has permission
	"iat": xxxxxxxx, // sso variables
	"iss": "xxxxx" // sso variables
}

To retrieve user data

const vue = this;

const userID = vue.$sso.getUserID(); // user unique identifier within the system
const userName = vue.$sso.getUserName(); // user email
const userFirstName = vue.$sso.getUserFirstName(); // user first name
const userLastName = vue.$sso.getUserLastName(); // user last name
const companyID = vue.$sso.getCompanyID(); // company ID used to log in to SSO
const companyName = vue.$sso.getCompanyName(); // company name entered by user when signing up
const companyGroupID = vue.$sso.getCompanyGroupID(); // company group ID tied to MAM and other services
const merchantID = vue.$sso.getMerchantID(); // Object of Staging & Production array of merchantIDs or *
const stagingMerchantID = vue.$sso.getMerchantIDStaging(); // array of staging merchantIDs
const productionMerchantID = vue.$sso.getMerchantIDProd(); // array of production merchantIDs
const userRole = vue.$sso.getUserRole(); // role of user

To get userToken

export default {
	mounted() {
		const vue = this;
		const userDataObj = vue.$sso.getSSOToken();
	}
}

To read permissions

export default {
	mounted() {
		const vue = this;
		const permissionsObj = vue.$sso.getPermissions();
	}
}