javascript - 如何使用 typescript 和组件式语法将 google 身份验证添加到 vue.js-6ren

javascript - 如何使用 typescript 和组件式语法将 google 身份验证添加到 vue.js

转载作者：行者123 更新时间：2023-12-03 06:48:12

25

4

我正在尝试将 google 身份验证添加到我的 vue.js 前端。这是一个通过 CLI 创建的新项目，启用了 typescript 和组件样式语法(以及其他)，并且还有一个相应的后端 Web 服务器。我一直在关注这个guide来自谷歌，但我对 vue 和 gapi 很陌生。我不知道如何加载<script src="https://apis.google.com/js/platform.js" async defer></script>进入我的应用程序或加载后如何使用它。我找到了像 this 这样的例子在 jsfiddle 上以及堆栈溢出和其他论坛上的一些其他示例，但似乎没有一个使用 typescript 和组件样式语法或不完整。

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Login</router-link>
    </div>
    <router-view />
  </div>
</template>

<style lang="scss">
</style>

主要.ts

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Login.vue( View )

<template>
  <div>
    <Login />
  </div>
</template>

<script>
// @ is an alias to /src
import Login from "@/components/Login.vue";

export default {
  name: "login",
  components: {
    Login
  }
};
</script>

Login.vue(组件)

<template>
  <div>
    <button>Sign in with Google</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class Login extends Vue {}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

最佳答案

那么，您需要在 public 文件夹的 index.html 中添加 google 登录脚本。

Make sure you add it in the head section and without async and defer mode.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="https://apis.google.com/js/api:client.js"></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

现在在你的 login.vue 文件中

<template>
  <div>
    <button class="g-signin-button">Sign in with Google</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class Login extends Vue {
  clientId = "AIzaSyBRxykObiOjM7VsY_lyGcRU27q8aFeAagk";
  mounted() {
    if (!window.gapi) {
      throw new Error(
        '"https://apis.google.com/js/api:client.js" needs to be included as a <script>.'
      );
    }

    if (!this.clientId) {
      throw new Error("Client Id must be specified.");
    }

    window.gapi.load("auth2", () => {
      const auth2 = window.gapi.auth2.init({ client_id: this.clientId });
      auth2.attachClickHandler(
        this.$refs.signinBtn,
        {},
        googleUser => {
          this.$emit("success", googleUser);
        },
        error => {
          this.$emit("error", error);
          this.$emit("failure", error); // an alias
        }
      );
    });
  }
  methods() {
    function err(msg: string) {
      typeof console !== "undefined" &&
        console.error(`[g-signin-button] ${msg}`);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.g-signin-button {
  box-sizing: border-box;
  position: relative;
  /* width: 13em;  - apply for fixed size */
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: left;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  color: #fff;
  background: #dd4b39;
}
.g-signin-button:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;

  border-right: #bb3f30 1px solid;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png")
    6px 6px no-repeat;
}

.g-signin-button:hover,
.g-signin-button:focus {
  cursor: pointer;
  background: #e74b37;
}
</style>

由于 gapi 安装在窗口级别并且支持 typescript，因此需要为类型安装外部 npm 包

npm i -D @types/gapi @types/gapi.auth2

并将其添加到 tsconfig.json 中的 types 键中

"types": ["webpack-env", "gapi", "gapi.auth2"],

希望这对您有所帮助!

关于javascript - 如何使用 typescript 和组件式语法将 google 身份验证添加到 vue.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60367946/

25

4

0

文章推荐： html - 将插槽传递到 Vue.js 中的插槽

文章推荐： javascript - 从 vue 导入 {ref} 时出错？

文章推荐： laravel - 如何在 vuejs 中使用多选？

typescript - 从另一个 TypeScript 包导入 TypeScript 类型
我已经写了并且 npm 发布了这个:https://github.com/justin-calleja/pkg-dependents 现在我正在用 Typescript 编写这个包:https://g
typescript - 如何在模拟函数时允许部分 TypeScript 类型 - Jest、TypeScript
我有一个函数，我想在 TypeScript 中模拟它以进行测试。在我的测试中，我只关心 json和 status .但是，当使用 Jest 的 jest.spyOn 时我的模拟函数的类型设置为返回 h
typescript - 如何在 Typescript 中声明一个从支持 Typescript 的库返回类型的函数
我正在使用一个库 (Axios)，它的包中包含 Typescript 声明。我想声明一个将 AxiosResponse(在库的 .d.ts 文件中声明)作为参数的函数。我有以下内容: functio
typescript - 使用引用将一个 typescript 文件加载到另一个 typescript 文件中
我是 Typescript 的新手。我想使用将一个 Typescript 文件加载到另一个 Typescript 文件中标签。我做了一些事情，但它不起作用!请帮助我。 first.ts: imp
typescript - atom-typescript - 为什么无法识别这些 Typescript 配置选项？
为什么我会收到下面屏幕截图中显示的错误？ Atom 说我的 tsconfig.json“项目文件包含无效选项”用于 allowJs、buildOnSave 和 compileOnSave。但是应该允
typescript - 将所有 TypeScript 文件编译成单个 TypeScript 文件
所以我正在创建一个 TypeScript 库，我可以轻松地将所有生成的 JS 文件编译成一个文件。有没有办法将所有 .ts 和 .d.ts 编译成一个 .ts 文件？除了支持 JS 的版本(较少的智
typescript - 更安全的 TypeScript - 与普通 TypeScript 有什么区别
Microsoft Research 提供了一种名为Safer TypeScript 的新 TypeScript 编译器变体: http://research.microsoft.com/en-us/
typescript - 将多个 typescript 文件合并为一个 typescript 定义文件
我需要这个来在单个文件中分发 TypeScript 中的库。有没有办法将多个 typescript 文件合并到(一个js文件+一个 typescript 定义)文件中？最佳答案要创建一个库，您可以
typescript - typescript 中的装饰器返回函数的时间
用例:我想知道一个函数在 typescript 中执行需要多少时间。我想为此目的使用装饰器。我希望装饰器应该返回时间以便(我可以进一步使用它)，而不仅仅是打印它。例如: export functio
typescript - Typescript 中可空的条件类型
我想检查一个类型是否可以为 null，以及它是否具有值的条件类型。我尝试实现 type IsNullable = T extends null ? true : false; 但是好像不行 type
typescript - TypeScript 如何推断回调参数类型
我的问题是基于这个 question and answer 假设我们有下一个代码: const myFn = (p: { a: (n: number) => T, b: (o: T) => v
typescript - TypeScript 中的后缀双感叹号
我知道双重否定前缀，我知道 TypeScript 的单后缀(非空断言)。但是这个双后缀感叹号是什么？ /.*验证码为(\d{6}).*/.exec(email.body!!)!![1] 取自here
typescript - typescript 的全局模块定义
我正在使用以下文件结构在 Webstorm 中开发一个项目 | src | ... | many files | types | SomeInterface |
typescript - TypeScript 对象字面量中的类型定义
在 TypeScript 类中，可以为属性声明类型，例如: class className { property: string; }; 如何在对象字面量中声明属性的类型？我试过下面的代码，但它
typescript - TypeScript 中的非破坏性类型断言
我正在寻找一种在不丢失推断类型信息的情况下将 TypeScript 中的文字值限制为特定类型的好方法。让我们考虑一个类型Named，它保证有一个名字。 type Named = { name:
typescript - TypeScript 中任意数量类型的非析取联合
在 TypeScript 中，我想创建一个联合类型来表示属于一个或多个不同类型的值，类似于 oneOf在 OpenAPI或 JSON Schema .根据a previous answer on a
typescript - Typescript 中函数声明的可重用类型注释？
type Func = (foo:string) => void // function expression const myFunctionExpression:Func = function(f
typescript - TypeScript 中联合类型的相应子类型的泛型
假设我有一个联合类型，我正在使用类似 reducer 的 API 调用模式，看起来像这样: type Action = { request: { action: "create
typescript - typescript 中的安全类型去抖功能
我在 typescript 中有以下去抖功能: export function debounce( callback: (...args: any[]) => void, wait: numb
typescript - vue3中props的定义方式是什么(Typescript)
在 Vue3 的 defineComponent 函数中，第一个泛型参数是 Props，所以我在这里使用 Typescript 接口(interface)提供我的 props 类型。喜欢: expor

首页

博学

6Ren·AI

商城

javascript - 如何使用 typescript 和组件式语法将 google 身份验证添加到 vue.js