javascript - Vue.js'e TypeScript ve bileşen tarzı sözdizimi kullanarak Google kimlik doğrulaması nasıl eklenir

Vue.js ön ucuma Google kimlik doğrulamasını eklemeye çalışıyorum. Bu, CLI aracılığıyla oluşturulmuş, TypeScript ve bileşen stili sözdizimi etkin (ve diğerleri) yeni bir proje ve ayrıca ilgili bir arka uç web sunucusu var. Google'ın bu rehberini takip ediyordum ama Vue ve gapi konusunda çok yeniyim. <script src="https://apis.google.com/js/platform.js" async defer></script> öğesini uygulamama nasıl yükleyeceğimi veya yüklendikten sonra nasıl kullanacağımı bilmiyorum. jsfiddle'da ve stack overflow ile diğer forumlarda buna benzer örnekler buldum, ama hiçbiri TypeScript ve bileşen stili sözdizimini kullanmıyor ya da eksik durumdalar.

App.vue

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

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

Main.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 (Görünüm)

<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 (Bileşen)

<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>

Cevap #1

Eh, Google ile giriş betiğini public klasöründeki index.html dosyasının içine eklemeniz gerekiyor.

Bunu head bölümüne eklediğinizden ve async ve defer modunu kullanmadığınızdan emin olun.

<!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>

Şimdi login.vue dosyanızda

<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>

Çünkü gapi pencere seviyesinde yüklüdür ve TypeScript'i desteklemek için tipler için harici npm paketlerinin yüklenmesi gerekmektedir

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

Ve bunu tsconfig.json içindeki types anahtarına ekleyin

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

Umarım bu yardımcı olur!