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)