当前位置：首页 > VUE

vue实现抖音登录

2026-01-20 16:19:48VUE

Vue 实现抖音登录功能

抖音登录功能可以通过抖音开放平台的 OAuth2.0 授权流程实现。以下是详细步骤：

准备工作 在抖音开放平台注册开发者账号，创建应用并获取 AppID 和 AppSecret。确保应用已通过审核并配置正确的回调域名。

安装依赖 需要安装 axios 或其他 HTTP 客户端库用于后端通信：

npm install axios

前端实现 在 Vue 项目中创建登录按钮组件，处理授权跳转：

vue实现抖音登录

<template>
  <button @click="handleTikTokLogin">抖音登录</button>
</template>

<script>
export default {
  methods: {
    handleTikTokLogin() {
      const client_id = '你的AppID';
      const redirect_uri = encodeURIComponent('你的回调地址');
      const state = '随机状态参数';
      const scope = 'user_info';

      window.location.href = `https://open.douyin.com/platform/oauth/connect/?client_key=${client_id}&response_type=code&scope=${scope}&redirect_uri=${redirect_uri}&state=${state}`;
    }
  }
}
</script>

后端接口 需要实现以下两个接口：

接收前端返回的授权码
与抖音服务器交换access_token

Node.js 示例代码：

vue实现抖音登录

const axios = require('axios');
const express = require('express');
const app = express();

app.get('/api/tiktok/callback', async (req, res) => {
  const { code } = req.query;
  const client_key = '你的AppID';
  const client_secret = '你的AppSecret';

  try {
    const tokenResponse = await axios.post(
      'https://open.douyin.com/oauth/access_token/',
      {
        client_key,
        client_secret,
        code,
        grant_type: 'authorization_code'
      }
    );

    const { access_token, open_id } = tokenResponse.data.data;
    // 保存用户信息或创建会话
    res.redirect('/?login_success=1');
  } catch (error) {
    console.error(error);
    res.redirect('/?login_error=1');
  }
});

获取用户信息 获取access_token后可以调用抖音API获取用户基本信息：

async function getUserInfo(access_token, open_id) {
  const response = await axios.get(
    `https://open.douyin.com/oauth/userinfo/`,
    {
      params: {
        access_token,
        open_id
      }
    }
  );
  return response.data;
}

安全注意事项