Shopify UPBOND認証導入

head内に下記スクリプトを追加

<!-- /layout/theme.liquid -->
<head>
<!-- 以下一行追加 -->
<script src="<https://cdn.auth0.com/js/auth0-spa-js/1.20/auth0-spa-js.production.js>"></script>
<head>

ログイン、ログアウトボタンを追加したい箇所に以下のコードを追加する(デザインなどはそれぞれで変えてください)

<button id="auth0-login" onClick="login();">
  login
</button>

<button id="auth0-logout" onClick="logout();">
  Logout
</button>

<script>
  const config = {
    domain: '***',
    clientId: '***',
    redirectUri: '***',
  };
  let auth0 = null;

  const login = async () => {
    localStorage.setItem(
      auth0.options.client_id + "::preLoginHref",
      window.location.href
    );
    await auth0.loginWithRedirect();
  }

  const logout = () => {
    auth0.logout();
  }

  /**
  * 現在のログイン状況に応じてUIを変更する
  */
  const updateUI = async () => {
    const isAuthenticated = await auth0.isAuthenticated();

    const loginButton = document.getElementById("auth0-login");
    const logoutButton = document.getElementById("auth0-logout");
  
    if (!isAuthenticated) {
      // ログインしてない
      loginButton.style.display = "block";
      logoutButton.style.display = "none";
    } else {
      // ログインしている
      loginButton.style.display = "none";
      logoutButton.style.display = "block";
      const token = await auth0.getTokenSilently(); // localstorageからaccesstokenを取得
      console.log(token);
      const user = await auth0.getUser();
      console.log(user);
      return;
    }
  };

  /**
  * auth0clientを作成する
  */
  const configureClient = async () => {
    try {
      auth0 = await createAuth0Client({
        domain: config.domain,
        client_id: config.clientId,
        redirect_uri: config.redirectUri,
        useFormData: true,
        cacheLocation: "localstorage",
      });
    } catch (e) {
      console.error(e);
    }
  };

  /**
  * パラメータにcode, stateが含まれている場合、ログイン後なのでpreLoginHrefに飛ばす
  */
  const checkForParameters = async () => {
    const query = window.location.search;

    if (query.includes("code=") && query.includes("state=")) {
      await auth0.handleRedirectCallback();

      const preLoginHref = localStorage.getItem(
        auth0.options.client_id + "::preLoginHref"
      );

      if (preLoginHref) {
        localStorage.removeItem(config.client_id + "::preLoginHref");
        window.location.href = preLoginHref;
      }
    }
  }
  
  const handleAuth0 = async () => {
    await configureClient();
    await checkForParameters();
    updateUI();
  };
  
  handleAuth0();
</script>

導入後のログイン挙動

ログインボタン押下

ログイン画面が表示される

スクリーンショット 2022-03-07 18.03.00.png

参考

const config = {
  domain: "mqlrd1vy.upbond.io",
  clientId: "VuaTMwl01aVi-5Wk1a9gO",
};

// const attachListeners = () => {
//   const loginButton = document.getElementById("auth0-login");
//   if (loginButton) {
//     loginButton.addEventListener("click", login);
//   }

//   const logoutButton = document.querySelector("[auth0-logout]");
//   if (logoutButton) {
//     logoutButton.addEventListener("click", () => logout());
//   }
// };

let auth0 = null;
const configureClient = async () => {
  // attachListeners();
  try {
    auth0 = await createAuth0Client({
      domain: config.domain,
      client_id: config.clientId,
      useFormData: true,
      cacheLocation: "localstorage",
    });
    window.checkitout = auth0;
  } catch (e) {
    console.error("FUCK", e);
  }
};

const login = async () => {
  localStorage.setItem(
    auth0.options.client_id + "::preLoginHref",
    window.location.href
  );
  await auth0.loginWithRedirect({
    redirect_uri: window.location.origin,
  });
};

const formatWildcard = (valueToFmt) => valueToFmt.replace(/\\*/g, "[^ ]*");

const isLoggedOut = () => {
  const validLogoutPaths = [
    "/",
    "/access-denied",
    "/public",
    "/landing",
    "/pubwild/*",
  ];

  return validLogoutPaths.map(formatWildcard).reduce((valid, lPath) => {
    if (valid === true) return true;
    const currentLocation = window.location.pathname;

    const result = currentLocation.match(lPath);
    return !!result;
  }, false);
};

const logout = () => {
  auth0.logout({
    returnTo: window.location.origin,
  });
};

const populateAuth0Element = (data, key, domAttribute = "innerText") => {
  const elements = document.body.querySelectorAll(`[data-auth0="${key}"]`);
  const elementsArray = Array.from(elements);
  elementsArray.map((element) => {
    if (element) {
      element[domAttribute] = data[key];
    }
  });
};

const updateUI = async () => {
  const isAuthenticated = await auth0.isAuthenticated();

  const loginButton = document.getElementById("auth0-login");
  const profileButton = document.getElementById("profile-button");
  const profileEmail = document.getElementById("profile-email");

  if (!isAuthenticated) {
    profileButton.style.display = "none";
    loginButton.style.display = "block";
  } else {
    profileButton.style.display = "block";
    loginButton.style.display = "none";

    // use full if you need to make requests using an auth0 token

    //const token = await auth0.getTokenSilently({
    //	ignoreCache: true
    //});
    const token = await auth0.getTokenSilently(); // localstorageからaccesstokenを取得

    console.log(token);
    const user = await auth0.getUser();
    console.log(user);

    return;
  }
};

const handleAuth0 = async () => {
  await configureClient();

  // check for the code and state parameters
  const query = window.location.search;

  if (query.includes("code=") && query.includes("state=")) {
    // Process the login state
    const redirect_url = await auth0.handleRedirectCallback();
    console.log(111, redirect_url);

    // Use replaceState to redirect the user away and remove the querystring parameters
    window.history.replaceState({}, document.title, window.location.pathname); //　para消してる

    const preLoginHref = localStorage.getItem(
      auth0.options.client_id + "::preLoginHref"
    );
    if (preLoginHref) {
      localStorage.removeItem(config.client_id + "::preLoginHref");
      window.location.href = preLoginHref;
    }
  }

  updateUI();
};

handleAuth0();