如何在 Rails 中使用 Hotwire/Stimulus 实现 OAuth_2？

Question

Google 和 Facebook 的 Oauth 按钮似乎与 Turbo 配合不佳。它们最初会加载，但 Turbo 实施的任何更改似乎都会删除这些按钮。我想使用 Stimulus 在网站上需要的地方注入按钮，但我没有找到任何如何执行此操作的示例。

Answer 1

我的 Facebook Oauth 解决方案：

html

<div class='mb-1' data-controller="facebook-api">
    <div class="fb-login-button" data-width="" data-size="large" data-button-type="" data-layout="" data-auto-logout-link="false" data-use-continue-as="true"></div>
</div>
<div id="fb-root"></div>

facebook_api_controller.js

export default class extends Controller {
  connect() {

    // Insert script tag in header
    if (!document.getElementById('facebook-jssdk')) {
      const fjs = document.getElementsByTagName('script')[0];
      const js = document.createElement('script');
      js.id = 'facebook-jssdk';
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      js.crossOrigin = "anonymous"
      fjs.parentNode.insertBefore(js, fjs);
    }

    window.fbAsyncInit = function() {
      FB.init({
        appId: '1XXXXXXXXXXXXXXX0',
        xfbml: true,
        version: 'v19.0',
      });
    };

    // repaint button on turbo load
    document.addEventListener("turbo:load", () => {
      FB.XFBML.parse();
    });

  }
};