📌  相关文章
📜  vue google 登录 github - Shell-Bash (1)

📅  最后修改于: 2023-12-03 15:05:52.626000             🧑  作者: Mango

Vue 中使用 Google 登录和 GitHub 登录

在 Web 开发中，用户登录授权是很常见的一项功能。Google 登录和 GitHub 登录都是很流行的第三方登录方式。在 Vue.js 中，我们可以使用各自提供的 API 实现这两种登录方式。

Google 登录

Google 登录需要访问 Google API，使用 vue-google-oauth2 插件可以方便地实现 Google 登录。

安装
npm install vue-google-oauth2 --save
使用
<template>
  <button @click="login">Google 登录</button>
</template>

<script>
import Vue from 'vue';
import {GoogleAuth} from 'vue-google-oauth2';

const gauthOption = {
  clientId: 'YOUR GOOGLE CLIENT ID',
  scope: 'email profile openid',
  prompt: 'select_account'
};

Vue.use(GoogleAuth, gauthOption);

export default {
  methods: {
    async login() {
      try {
        const tokenInfo = await Vue.$gAuth.signIn();
        console.log(tokenInfo);
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>
配置

gauthOption 常用配置项如下：

  • clientId，必需，为 Google API Console 中的客户端 ID
  • scope，可选，授权范围，多个值用空格隔开，默认为 'email profile openid'
  • prompt，可选，提示用户选择账户，默认为 'select_account'

详见 vue-google-oauth2 文档。

GitHub 登录

GitHub 登录需要访问 GitHub API，使用 vue-github-login 插件可以方便地实现 GitHub 登录。

安装
npm install vue-github-login --save
使用
<template>
  <button @click="login">GitHub 登录</button>
</template>

<script>
import GitHubLogin from 'vue-github-login';

export default {
  components: {
    GitHubLogin
  },
  data() {
    return {
      accessToken: ''
    };
  },
  methods: {
    async login(response) {
      try {
        this.accessToken = response.access_token;
        console.log(this.accessToken);
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>
配置

在 GitHub API Settings 中创建 OAuth App，获取 Client ID 和 Client Secret，然后在 Vue 中使用如下配置：

<template>
  <GitHubLogin
    :clientId="'YOUR GITHUB CLIENT ID'"
    :clientSecret="'YOUR GITHUB CLIENT SECRET'"
    @response="login"
  />
</template>

详见 vue-github-login 文档。

总结

以上是 Vue 中使用 Google 登录和 GitHub 登录的简单介绍和示例。这两个插件可以方便地完成第三方登录授权的功能，开发者可以根据实际需求进行使用和定制。

参考