Vue

@orria/tapok/vue реэкспортирует browser-клиенты Tapok и createTapokConnect. SDK не регистрирует Vue plugin и не предоставляет готовые компоненты.

Hosted

<script setup lang="ts">
import { ref } from 'vue'
import { Tapok } from '@orria/tapok/vue'

const tapok = new Tapok()
const pending = ref(false)

async function login() {
  pending.value = true
  try {
    const result = await tapok.login()
    // Псевдокод: backend проверит token и создаст HttpOnly-сессию.
    await api.createSession({ token: result.token })
  } finally {
    pending.value = false
  }
}
</script>

<template>
  <button :disabled="pending" @click="login">Войти через Tapok</button>
</template>

Popup запускается непосредственно из @click.

Connect

<script setup lang="ts">
import { onMounted } from 'vue'
import { createTapokConnect } from '@orria/tapok/vue'

const connect = createTapokConnect({
  clientId: 'tapok_…',
  redirectUri: 'https://app.example/auth/callback',
  scopes: ['session', 'phone'],
})

function login() {
  return connect.startSignIn()
}

onMounted(async () => {
  if (location.pathname !== '/auth/callback') return
  const callback = connect.finishSignIn()
  if (callback) await api.exchangeConnectCode(callback) // собственный backend
})
</script>

<template>
  <button @click="login">Войти</button>
</template>

API key нужен только backend при exchangeConnectCode() и не должен находиться в Vue-коде.