Oxi Social Login Nacelle Component

README.md

Oxi Social Login Nacelle Component

This gist describes how to create a component that will embed Oxi Social Login iframe. That iframe will display social login buttons. Clicking those buttons will open a popup where after a user has logged in to the provider, they will be redirected to the Shopify account page.

Setup

Add the Oxi Social Login App to your Shopify store. After setting it up in your dashboard go to the apps settings page. Toggle the switch for "Automatic Installation". Configure which providers you want to display. Finally enable multipass by adding your store's multipass secret. Directions for setting up multipass and getting the secret in the Shopify dashboard are here.

login.vue

<template>
  <div class="login-page">
    <!-- This is any Nuxt template or Component -->
    <oxi-social-login
      shopify-domain="starship-furniture.myshopify.com"
      shopify-account-page="https://shopdemo.getnacelle.com/account/"
    />
  </div>
</template>

<script>
import OxiSocialLogin from '~/components/OxiSocialLogin.vue'

export default {
  components: {
    OxiSocialLogin
  }
}
</script>

OxiSocialLogin.vue

<template>
  <div class="login">
    <div 
      v-if="showIframe"
      class="oxi_social_wrapper"
    >
      <iframe
        id="social_login_frame"
        :src="iframeSrc"
        style="width:100%;max-width:100%;padding-top:0px;margin-bottom:5px;border:0px;height:240px;"
        scrolling=no
      ></iframe>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // The original iframe `src` has the query parameter `vt`. I don't believe this is actually needed
    // however to make this work.
    // oxiAccountId: {
    //   type: String,
    //   default: ''
    // },
    shopifyDomain: {
      type: String,
      default: ''
    },
    shopifyAccountPage: {
      type: String,
      default: ''
    }
  },
  computed: {
    showIframe() {
      return (
        // this.oxiAccountId.length > 0 &&
        this.shopifyDomain.length > 0 &&
        this.shopifyAccountPage.length > 0
      )
    },
    iframeSrc() {
      const endpoint = 'https://social-login.oxiapps.com/widget'
      const params = `site=${this.shopifyDomain}&parenturl=${this.shopifyAccountPage}`
      
      // params with `vt` parameter
      // const params = `site=${this.shopifyDomain}&vt=${this.oxiAccountId}&parenturl=${this.shopifyAccountPage}`
      
      return `${endpoint}?${params}`
    }
  }
}
</script>

<style>
  .login {
    margin: 0 auto;
    padding: 3rem 1rem;
    max-width: 400px;
  }
</style>