Как добавить аутентификацию Google в vue. js с использованием машинописного текста и синтаксиса в стиле компонентов - PullRequest
Новая
       38

Как добавить аутентификацию Google в vue. js с использованием машинописного текста и синтаксиса в стиле компонентов

2 голосов
/ 24 февраля 2020

Я пытаюсь добавить аутентификацию Google в мой vue. js интерфейс. Это новый проект, созданный через CLI с включенным синтаксисом машинописного текста и стиля компонента (наряду с другими), а также с соответствующим внутренним веб-сервером. Я следовал этому руководству от Google, но я очень плохо знаком с vue и gapi. Я не знаю, как загрузить <script src="https://apis.google.com/js/platform.js" async defer></script> в мое приложение или как использовать его после загрузки. Я нашел примеры типа this в jsfiddle и несколько других примеров переполнения стека и других форумов, но ни один из них, похоже, не использует синтаксис машинного текста и стиля компонента или не является полным.

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");

Вход. vue (Просмотр) 

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

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

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

Вход. 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>

1 Ответ

1 голос
/ 27 февраля 2020

Ну, вам нужно добавить скрипт входа в Google внутри index.html папки public.

Убедитесь, что вы добавили его в разделе заголовка и без асин c и отложенного режима. 

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

Теперь в вашем логине. vue file 

<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 устанавливается на уровне окна и для поддержки машинописи, необходимо установить пакеты externam npm для типов 

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

и добавить чтобы набрать ключ внутри tsconfig.json

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

Надеюсь, это поможет!

...