谷歌第三方登录，使用全新的，旧版的启用

Question

web端使用第三方谷歌登录，搜出来的都是旧版的，新版有没有人写过，主要是用在vue里面

Answer 1

【以下回答由 GPT 生成】

答案

很高兴看到你有兴趣在Vue.js中实现全新的谷歌第三方登录功能。在接下来的解答中，我将向你展示一个适用于Vue.js的解决方案。

首先，你需要了解一下谷歌提供的OAuth2.0认证流程。在这个过程中，你需要使用谷歌提供的API来获取授权码，然后使用这个授权码来交换访问令牌和刷新令牌。这些令牌将允许你访问用户的谷歌帐户信息。你可以参考谷歌开发者文档以了解详细的流程：https://developers.google.com/identity/protocols/oauth2/web-server

下面是在Vue.js中实现谷歌登录的步骤：

步骤 1：创建谷歌开发者帐户

首先，你需要创建一个新的谷歌开发者帐户。你可以登录到谷歌开发者控制台，然后创建一个新的项目。在项目中，你需要启用谷歌登录API并获取你的客户端ID和客户端密钥。你将需要这些凭据来进行用户认证。

步骤 2：安装所需的依赖项

在Vue.js项目的根目录下，打开命令行终端并运行以下命令来安装所需的依赖项：

npm install vue-google-oauth2

这样将会安装一个名为vue-google-oauth2的包，它将用于在Vue.js中实现谷歌登录功能。

步骤 3：配置谷歌登录凭据

在Vue.js项目中，创建一个名为.env的文件，并将谷歌登录凭据添加到该文件中：

VUE_APP_GOOGLE_CLIENT_ID=your_client_id
VUE_APP_GOOGLE_CLIENT_SECRET=your_client_secret
VUE_APP_GOOGLE_REDIRECT_URI=your_redirect_uri
VUE_APP_GOOGLE_SCOPE=profile email

请将your_client_id，your_client_secret和your_redirect_uri替换为你在第一步中获得的谷歌登录凭据。你可以使用谷歌开发者控制台中的授权回调URL来作为your_redirect_uri。VUE_APP_GOOGLE_SCOPE指定了你要请求的授权范围，可以根据自己的需求进行更改。

步骤 4：创建谷歌登录组件

在Vue.js项目中，创建一个名为GoogleLogin.vue的组件，并在该组件中编写以下代码：

<template>
  <div>
    <button @click="login">Google登录</button>
  </div>
</template>

<script>
import { createApp } from 'vue'
import { useGoogleOAuth2 } from 'vue-google-oauth2'

export default {
  setup() {
    const { signIn } = useGoogleOAuth2()

    const login = () => {
      signIn()
        .then(response => {
          // 在这里处理成功登录后的逻辑
          console.log(response)
        })
        .catch(error => {
          // 在这里处理登录失败的逻辑
          console.error(error)
        })
    }

    return {
      login
    }
  }
}
</script>

上述代码将在Vue.js项目中创建一个按钮，当点击该按钮时，将触发谷歌登录流程。

步骤 5：使用谷歌登录组件

在Vue.js项目的其他组件中，你可以简单地使用GoogleLogin组件来实现谷歌登录功能。在你的模板中添加以下代码：

<template>
  <div>
    <GoogleLogin />
  </div>
</template>

<script>
import GoogleLogin from './GoogleLogin.vue'

export default {
  components: {
    GoogleLogin
  }
}
</script>

你可以根据自己的需求来自定义登录按钮的样式和文本。

步骤 6：处理登录成功的逻辑

在GoogleLogin.vue组件的登录成功回调函数中，你可以通过谷歌提供的API来获取用户的谷歌帐户信息。你可以使用Vue.js中的全局状态管理来存储这些信息，以便在整个应用程序中共享。以下是一个示例代码：

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({
      name: '',
      email: '',
      picture: ''
    })

    const login = () => {
      // 谨记将你的授权范围添加到此处
      gapi.auth2.getAuthInstance().grantOfflineAccess({ scope: 'your_scope' })
        .then(authResult => {
          // 通过授权码交换访问令牌和刷新令牌
          return fetch('your_token_exchange_endpoint', {
            method: 'POST',
            body: JSON.stringify({
              code: authResult.code,
              client_id: process.env.VUE_APP_GOOGLE_CLIENT_ID,
              client_secret: process.env.VUE_APP_GOOGLE_CLIENT_SECRET,
              redirect_uri: process.env.VUE_APP_GOOGLE_REDIRECT_URI,
              grant_type: 'authorization_code'
            }),
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
            }
          })
        })
        .then(response => {
          // 处理交换令牌的响应
          return response.json()
        })
        .then(tokenResponse => {
          // 使用访问令牌来获取用户的谷歌帐户信息
          return fetch('https://www.googleapis.com/oauth2/v1/userinfo', {
            headers: {
              'Authorization': `Bearer ${tokenResponse.access_token}`
            }
          })
        })
        .then(userInfoResponse => {
          // 处理用户信息的响应
          return userInfoResponse.json()
        })
        .then(userInfo => {
          // 存储用户信息到全局状态
          user.name = userInfo.name
          user.email = userInfo.email
          user.picture = userInfo.picture

          // 在这里处理成功登录后的逻辑
          console.log('登录成功', user)
        })
        .catch(error => {
          // 在这里处理登录失败的逻辑
          console.error('登录失败', error)
        })
    }

    return {
      user,
      login
    }
  }
}
</script>

上述代码将使用谷歌提供的API来获取用户的谷歌帐户信息，并将其存储在全局状态中。

希望上述解决方案对你有所帮助。请尽快检查代码中的占位符，并根据你的需要进行修改。如果你有任何疑问或需要进一步的帮助，请随时向我提问。

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/249959
• 你也可以参考下这篇文章：谷歌翻译web页面
• 您还可以看一下 张添翔老师的Web安全攻防课程中的 信息收集：使用谷歌语法搜集信息小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 用Vue实现音乐播放器案例中的 歌曲播放地址 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^