Блог

Я пытаюсь реализовать пользовательский пример кнопки входа в Google в руководстве Google, но он даже не вызывает обратный вызов. Если я использую обычный HTML и Javascript, это работает, но не в Svelte:

CustomGoogleSignInButton.svelte

 <script>
  function onSuccess(googleUser) {
    console.log("Logged in as: "   googleUser.getBasicProfile().getName());
  }
  function onFailure(error) {
    console.log(error);
  }
  function renderButton() {
    gapi.signin2.render("my-signin2", {
      scope: "profile email",
      width: 240,
      height: 50,
      longtitle: true,
      theme: "dark",
      onsuccess: onSuccess,
      onfailure: onFailure
    });
  }
</script>

<svelte:head>
  <script
    src="https://apis.google.com/js/platform.js?onload=renderButton"
    async
    defer>

  </script>
</svelte:head>

<div id="my-signin2" />
  

У меня также есть мета в теге head.

onload=renderButton означает «при загрузке этого скрипта вызовите глобальную функцию с именем renderButton . Функции, объявленные в вашем <script> блоке, являются локальными для компонента, поэтому глобальных нет renderButton .

Вы могли бы решить эту проблему, добавив функцию к объекту window…

 window.renderButton = function() {
  gapi.signin2.render("my-signin2", {
    scope: "profile email",
    width: 240,
    height: 50,
    longtitle: true,
    theme: "dark",
    onsuccess: onSuccess,
    onfailure: onFailure
  });
}
  

…но вы также можете использовать локальную функцию вместо этого, например:

 <svelte:head>
  <script
    src="https://apis.google.com/js/platform.js"
    on:load={renderButton}
    async
    defer>

  </script>
</svelte:head>
  

Если это работает, это предпочтительнее, чем загрязнять window объект.