index.vue

<template>
  <div>
    <div>Login Page</div>
    <div ref="ndi"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      authParam: {}
    };
  },
  methods: {
    onError(errorId, message) {
      console.log(`onError. errorId:${errorId} message:${message}`);
    },
    getData(ajaxurl) {
      return $.ajax({
        url: ajaxurl,
        type: "GET"
      });
    },
    authParamsSupplier() {
      return { state: "dummySessionState", nonce: "dummySessionNonce" };
    },
    async callParam() {
      var self = this;
      console.log("call params...");
      await this.$nextTick();
      window.NDI.initAuthSession(
        self.$refs.ndi,
        {
          clientId: "abcd1234", // Replace with your client ID
          redirectUri: "https://primuslogin.firebaseapp.com/callback/", // Replace with a registered redirect URI
          scope: "openid",
          responseType: "code"
        },
        this.authParam,
        this.onError
      );
      //   console.log("initAuthSession: ", initAuthSessionResponse);
    }
  },
  mounted() {
    this.authParam = this.authParamsSupplier();
    let embededScript = document.createElement("script");
    embededScript.setAttribute(
      "src",
      "https://stg-id.singpass.gov.sg/static/ndi_embedded_auth.js"
    );
    embededScript.async = true;
    document.head.appendChild(embededScript);
    console.log("mounted...");
    console.log(this.$refs.ndi);
    var self = this;
    setTimeout(function() {
      self.callParam();
    }, 3000);
  }
};
</script>

<style scoped></style>