¶ Authing MFA 多因素认证组件

// main.js
// 代码示例：https://github.com/Authing/authing-mfa-component/blob/master/examples/mfa-component-vue2/src/main.js
import Vue from 'vue'
import { AuthingMFAPlugin } from '@authing/mfa-component-vue2'
import '@authing/mfa-component-vue2/dist/index.min.css'

Vue.use(AuthingMFAPlugin, {
  appId: "AUTHING_APP_ID",

  // 可选值：normal 或 modal，对应普通模式和模态框模式
  // mode: "modal"

  // 如果你使用的是私有化部署的 Authing 服务，需要传入自定义 host，如:
  // host: 'https://my-authing-app.example.com'
});

// 代码示例：https://github.com/Authing/authing-mfa-component/blob/master/examples/mfa-component-vue2/src/views/MFA.vue
export default {
  created() {
    console.log("authing mfa instance: ", this.$authingMFA);
  },
};

// 代码示例：https://github.com/Authing/authing-mfa-component/blob/master/examples/mfa-component-vue3/src/views/MFA.vue
import { useAuthingMFA } from '@authing/mfa-component-vue3'

const authingMFA = useAuthingMFA()

console.log('authingMFA instance: ', authingMFA)

// 代码示例：https://github.com/Authing/authing-mfa-component/blob/master/examples/mfa-component-native/index.html
const authingMFA = new AuthingMFAFactory.AuthingMFA({
  appId: 'AUTHING_APP_ID'
})

console.log("authing mfa instance: ", authingMFA)

// 代码示例：https://github.com/Authing/authing-mfa-component/blob/master/examples/mfa-component-vue2/src/views/MFA.vue
export default {
  mounted() {
    this.$authingMFA.start({
      el: document.querySelector('#authing-mfa-container'),
      mfaTriggerData: {}
    })

    // 监听 MFA 认证成功的事件
    // 认证成功后，执行自定义操作
    this.$authingMFA.on('success', function (code, data) {
      console.log('Authing MFA success: ', code, data)
      // ..... more actions
    })
  },
};

// 代码示例：https://github.com/Authing/authing-mfa-component/blob/master/examples/mfa-component-vue3/src/views/MFA.vue
import { onMounted } from 'vue'
import { useAuthingMFA } from '@authing/mfa-component-vue3'

const authingMFA = useAuthingMFA()

onMounted(() => {
  authingMFA.start({
    el: document.querySelector('#authing-mfa-container'),
    mfaTriggerData: {}
  })

  // 监听 MFA 认证成功的事件
  // 认证成功后，执行自定义操作
  authingMFA.on('success', function (code, data) {
    console.log('Authing MFA success: ', code, data)
    // ..... more actions
  })
})

// 代码示例：https://github.com/Authing/authing-mfa-component/blob/master/examples/mfa-component-native/index.html
const authingMFA = new AuthingMFAFactory.AuthingMFA({
  appId: 'AUTHING_APP_ID'
})

authingMFA.start({
  el: document.querySelector('#authing-mfa-container'),
  mfaTriggerData: {}
})

// 代码示例：https://github.com/Authing/authing-mfa-component/blob/master/examples/mfa-component-vue2/src/views/MFA.vue
export default {
  mounted() {
    this.$authingMFA.start({
      el: document.querySelector('#authing-mfa-container'),
      mfaTriggerData: {}
    })

    // 监听 MFA 认证成功的事件
    // 认证成功后，执行自定义操作
    this.$authingMFA.on('success', function (code, data) {
      console.log('Authing MFA success: ', code, data)
      // ..... more actions
    })
  },

  methods: {
    showModal () {
      this.$authingMFA.show()
    },
    hideModal () {
      this.$authingMFA.hide()
    }
  }
};

// 代码示例：https://github.com/Authing/authing-mfa-component/blob/master/examples/mfa-component-vue3/src/views/MFA.vue
import { onMounted } from 'vue'
import { useAuthingMFA } from '@authing/mfa-component-vue3'

const authingMFA = useAuthingMFA()

onMounted(() => {
  authingMFA.start({
    el: document.querySelector('#authing-mfa-container'),
    mfaTriggerData: {}
  })

  // 监听 MFA 认证成功的事件
  // 认证成功后，执行自定义操作
  authingMFA.on('success', function (code, data) {
    console.log('Authing MFA success: ', code, data)
    // ..... more actions
  })
})

const showModal = () => authingMFA.show()
const hideModal = () => authingMFA.hide()

// 代码示例：https://github.com/Authing/authing-mfa-component/blob/master/examples/mfa-component-native/index.html
const authingMFA = new AuthingMFAFactory.AuthingMFA({
  appId: 'AUTHING_APP_ID'
})

authingMFA.start({
  el: document.querySelector('#authing-mfa-container'),
  mfaTriggerData: {}
})

document.querySelector('#show-modal').onclick = function () {
  authingMFA.show()
}

document.querySelector('#hide-modal').onclick = function () {
  authingMFA.hide()
}