个人中心
gpt4 book ai didi

javascript - Aurelia Google 登录按钮

转载 作者：行者123 更新时间：2023-11-29 17:53:13 24 4
gpt4 key购买 nike

我刚开始使用 Aurelia，我在使用 Google 登录时遇到问题。看起来我可以创建自己的 Google 按钮，但如果可能的话，我宁愿让它以这种方式工作。这是我的代码:

<script src="https://apis.google.com/js/platform.js" async defer></script>
...
<body aurelia-app="src/main">
...
<span id="googleButtonPlaceholder" class="g-signin2" data-onsuccess="onSignIn"></span>

我在我的 Aurelia 类中设置了函数，但我不知道是否/如何调用它。我试过 ${onSignIn()}，它在加载时调用函数，${onSignIn}，onSignIn()，onSignIn、data-onsuccess.bind="onSignin()" 但似乎没有任何效果。有没有办法将 Aurelia 函数传递给 Google data-onsuccess 属性？

请注意，我正在从以前工作的 Angular 1.5.8 切换。

最佳答案

这是一个例子:https://gist.run?id=5da90f48b43b9c5867c8d2ace0f6371f

app.html

<template>
  <require from="google-signin-button"></require>

  <google-signin-button success.call="signinSuccess(googleUser)"
                        error.call="signinError(error)">
  </google-signin-button>

  <h1>${message}</h1>
</template>

app.js

export class App {
  message = 'Not signed in.';

  signinSuccess(googleUser) {
    const name = googleUser.getBasicProfile().getName();
    this.message = `Signed in: ${name}`;
  }

  signinError(error) {
    this.message = `Error: ${error}`;
  }
}

google-signin-button.js

import {inject, noView, bindable} from 'aurelia-framework';

const googleSigninClientID = '927519533400-mfupo3lq9cjd67fmmvtth7lg7d8l50q9.apps.googleusercontent.com';

function preparePlatform() {
  // https://developers.google.com/identity/sign-in/web/build-button

  // The name of the global function the platform API will call when
  // it's ready.
  const platformCallbackName = 'setGooglePlatformReady';

  // An "API ready" promise that will be resolved when the platform API 
  // is ready.
  const ready = new Promise(  
    resolve => window[platformCallbackName] = resolve);

  // Inject the client id meta tag
  const meta = document.createElement('meta');
  meta.name = 'google-signin-client_id';
  meta.content = googleSigninClientID;
  document.head.appendChild(meta);

  // Inject an async script element to load the google platform API.
  // Notice the callback name is passed as an argument on the query string.
  const script = document.createElement('script');  
  script.src = `https://apis.google.com/js/platform.js?onload=${platformCallbackName}`;  
  script.async = true;  
  script.defer = true;  
  document.head.appendChild(script);

  return ready;
}

const platformReady = preparePlatform();

@noView()
@inject(Element)
export class GoogleSigninButton {  
  @bindable success = googleUser => { };
  @bindable error = error => { };
  @bindable scope = 'profile email';
  @bindable theme = 'dark';
  @bindable width = 240;
  @bindable height = 50;

  constructor(element) {
    this.element = element;
  }

  attached() {
    platformReady.then(this.renderButton);
  }

  renderButton = () => {
    gapi.signin2.render(this.element, {
      scope: this.scope,
      width: this.width,
      height: this.height,
      longtitle: true,
      theme: this.theme,
      onsuccess: googleUser => {
        console.info(googleUser);
        this.success({ googleUser });
      },
      onfailure: error => {
        console.error(error);
        this.failure({ error });
      }
    });
  }
}

关于javascript - Aurelia Google 登录按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41456403/

24 4 0
文章推荐： javascript - 匹配多个辅音-元音序列
文章推荐： android - 在 ImageView 上调整色温
文章推荐： mysql - 显示多对多关系结果并按相同 ID 对它们进行分组
文章推荐： Android sdk 管理器打不开
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com