1. Copy and paste the next scripts before you ending body tag (</body>)

<script src="https://sso.tapit.com.co/v3/tapit.sso.main.js"></script> <script> function configTapitSso() { // ssoApp defined! ssoApp.configApp(CONFIG_OBJECT); } </script>

2. Create a configuration object like the next one and save it in a CONFIG_OBJECT=

3. Configure the sso through the api exposed via the ssoApp global object

<script> function configTapitSso() { ssoApp.configApp(CONFIG_OBJECT); } </script>

4. Show the sso calling the ssoApp.showApp('PAGE_NAME') method

<button onclick="ssoApp.showApp('sign-up')">SIGN UP</button>

5. See the available pages and the exposed methods

PAGES: ssoApp.showApp('signIn'); ssoApp.showApp('sign-up'); ssoApp.showApp('recover-password'); ssoApp.showApp('phone-verification'); METHODS: ssoApp.configApp(config) ssoApp.showApp('page') ssoApp.hideApp() ssoApp.getCustomToken(userCredential).subscribe(customToken => console.log(customToken)) ssoApp.getTermsAndConditions(userCredential) ssoApp.onFlowCompleted().subscribe(state => console.log(state)) ssoApp.logout() OBJECTS: firestore (See docs here!) auth (See docs here!)

6. SSO Flow completion listener example

<script> function configTapitSso() { ssoApp.onFlowCompleted().subscribe(res => { console.log(res); }); } </script>

7. Authentication listener example

<script> function configTapitSso() { ssoApp.auth.onAuthStateChanged(function (userCredential) { if (userCredential) { console.log(userCredential); document.getElementById('current-user').innerText = JSON.stringify(userCredential); } }); } </script> (See auth docs here!)

8. Logout example

<button onclick="ssoApp.logout()">LOGOUT</button>

9. Firestore collection example

<script> function configTapitSso() { ssoApp.auth.onAuthStateChanged(function (userCredential) { if (userCredential) { ssoApp.firestore.collection('user_account_tap').doc(userCredential.uid).get() .then(function (document) { console.log(document.data()); }).catch(function (error) { console.log(error); }); } }); } </script> (See firestore docs here!)

10. Request phone validation for users trying to refresh or close the page while the user is validating his phone:

Insert this code snippet in app.component where you're using SSO:

openSso(){ const smsStepSSO = window.localStorage.getItem('sms-step'); if (smsStepSSO && smsStepSSO !== 'phone-verified') { window.ssoApp.showApp(smsStepSSO); } } }

This variable is step name saved in localStorage in SSO web component, there are two steps:

* sms-step

There are two steps:

This step is the phone screen when application requests to user enter his phone

* 'phone-verification'

This step is when the user was able to validate his phone successful

* 'phone-verified'

This condition means that the user hasn't validated his phone successful yet.

* (smsStepSSO && smsStepSSO !== 'phone-verified')

It will open ssoApp in the pending step.

* window.ssoApp.showApp(smsStepSSO)