5.12 VUE项目实现Google 第三方登录

最新推荐文章于 2024-05-22 10:26:00 发布

ibun.song

最新推荐文章于 2024-05-22 10:26:00 发布

阅读量1.4k

点赞数

分类专栏： Vue 环境搭建文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40805441/article/details/138530361

版权

环境搭建同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

Vue

11 篇文章 4 订阅

订阅专栏

VUE项目实现Google 第三方登录

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
        data-client_id="YOUR_GOOGLE_CLIENT_ID"
        data-login_uri="https://your.domain/your_login_endpoint"
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
  <body>
</html>

使用 JavaScript 呈现登录按钮，并将 JWT 返回给浏览器的 JavaScript 回调处理程序。

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID"
          callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      }
    </script>
    <div id="buttonDiv"></div>
  </body>
</html>

2. Google官网代码生成器

生成HTML代码: https://developers.google.com/identity/gsi/web/tools/configurator?hl=zh-cn

在这里插入图片描述

<div id="g_id_onload"
     data-client_id="xxxx"
     data-context="signin"
     data-ux_mode="popup"
     data-login_uri="http://localhost:9011"
     data-auto_prompt="false">
</div>

<div class="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     data-theme="filled_blue"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left">
</div>

3. 项目中实装

在这里插入图片描述

        <v-row>
          <v-col>
            <div class="g-signin-button" style="height: 50px; width: 30%">
              <component
                :is="'script'"
                src="https://accounts.google.com/gsi/client"
                ansyc
              />
              <div
                id="g_id_onload"
                data-client_id="换成你自己的Client_ID.apps.googleusercontent.com"
                data-context="signin"
                data-ux_mode="popup"
                data-callback="googleSignCallBack"
                data-auto_prompt="false"
              ></div>
              <div
                class="g_id_signin"
                data-type="standard"
                data-shape="rectangular"
                data-theme="filled_blue"
                data-text="signin_with"
                data-size="large"
                data-locale="ja"
                data-logo_alignment="left"
              ></div>
            </div>
          </v-col>
        </v-row>

在这里插入图片描述

  mounted: function () {
    window.googleSignCallBack = this.googleSignCallBack;
  },

  methods: {
    googleSignCallBack(googleUser) {
      console.log("googleUser", googleUser);
    },
  },

在这里插入图片描述

ibun.song

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
4
评论
5.12 VUE项目实现Google 第三方登录

这篇文章介绍了如何在Vue.js项目中实现Google第三方登录功能。它涵盖了使用Google开发者控制台创建OAuth 2.0凭证、安装必要的依赖库、设置前端路由和组件，以及在后端处理用户认证的过程。通过详细的步骤和示例代码，读者可以轻松地将Google登录集成到他们的Vue.js应用程序中。
复制链接

扫一扫