首页 > 解决方案 > 使用 asyc 和 Vue 登录 Twitch API

问题描述

嗨,我正在使用Nuxt创建一个带有 Twitch 的应用程序,我希望用户能够使用 Twitch 登录。

我在 Twitch 设置中有应用程序并且我有密钥,但是,我不确定如何实现一个按钮,所以一旦点击它就会触发,因此用户可以登录。

这就是我所拥有的

<button class="twitch flex justify-center absolute pin-l items-center p-8 uppercase text-white font-semibold tracking-wide w-full" @submit.prevent="twitch">
  <i class="fab fa-twitch pr-2 text-xl"></i> Sign in with Twitch
</button>

我有这样定义的方法

  methods: {
    twitch () {
      async twitch () {
        let { data } = await axios.get(`https://id.twitch.tv/oauth2/authorize?response_type=code&client_id=<key>&redirect_uri=http://localhost:3000&scope=chat_login`)
        this.twitch = data
      }
    }
  },

用户登录后,我想访问 API,这样我就可以为我的应用程序构建我想要构建的东西,所以我想提取 API 提供的所有数据。

这可能是完全错误的,因此非常欢迎任何有助于推动我走向正确方向的帮助。

标签: vue.jstwitchnuxt.js

解决方案


您可以使用@nuxtjs/auth模块

虽然它没有 twitch 提供程序,但它很容易添加,例如参见google 提供程序

或者至少你会明白的。并阅读oauth2 如何工作


推荐阅读