Xing login button plugin with vuejs

Question

I am new to forntend development in general and Vuejs specifically i am trying to add Xing login button plugin to my website which is build with Vuejs but the code provided from Xing is to be used in just Java script how can use these code in vuejs:

<script type="xing/login">
{
  "consumer_key": "random key"
}
</script>

<script>(function(d) {
   var js, id='lwx';
   if (d.getElementById(id)) return;
   js = d.createElement('script'); js.id = id; js.src = "https://www.xing- 
   share.com/plugins/login_plugin.js";
   d.getElementsByTagName('head')[0].appendChild(js)
   }(document));
</script>

i have tried to put it in the created function and directly in the html part of the page but did not work.

Thank you very much in advanced.

Update 1 : this is a full example how it should work when using only js:

<!DOCTYPE html>
<html>
<head>
  <title>Login with XING plugin Example</title>
  <meta charset="UTF-8">
  <script>
    // This function is called by the plugin after
    // the login flow is completed.
    function onXingAuthLogin(response) {
      var output;
 
      console.log(response);
 
      if (response.user) {
        output = 'Successful login for ' + response.user.display_name;
      } else if (response.error) {
        output = 'Error: ' + response.error;
      }
 
      document.getElementById('output').innerHTML = output;
    }
  </script>
</head>
<body>
 
  <!-- Place the plugin script -->
  <script type="xing/login">
    {
      "consumer_key": "[YOUR_CONSUMER_KEY]"
    }
  </script>
 
  <p id="output">No user logged in.</p>
 
  <!-- Include the plugin library -->
  <script>(function(d) {
    var js, id='lwx';
    if (d.getElementById(id)) return;
    js = d.createElement('script'); js.id = id; js.src = "https://www.xing-share.com/plugins/login_plugin.js";
    d.getElementsByTagName('head')[0].appendChild(js)
  }(document));</script>
 
</body>
</html>

i managed to render the button by injecting the elements to the head in mounted function:

mounted() {
    const onXingAuthLogin = document.createElement('script');
    onXingAuthLogin.innerText = ' function onXingAuthLogin(response) { ' +
      'if (response.user) {  ' +
        'console.log(response.user) ' +
      '} else if (response.error) { ' +
        'console.log(response.error); response.error; ' +
      ' } ' +
      '};'
    document.head.appendChild(onXingAuthLogin);
    const scriptTag = document.createElement('script');
    scriptTag.setAttribute('type', 'xing/login')
    scriptTag.innerText = '{"consumer_key": "Your Key"}';
    document.getElementById('xing').appendChild(scriptTag);

    const scriptFunction = document.createElement('script');
    scriptFunction.innerText = '(function(d) {' +
      '   var js, id=\'lwx\';' +
      '   if (d.getElementById(id)) return;' +
      '   js = d.createElement(\'script\'); js.id = id; js.src = "https://www.xing-share.com/plugins/login_plugin.js";' +
      '   d.getElementsByTagName(\'head\')[0].appendChild(js)' +
      '   }(document));';
    document.getElementById('xing').appendChild(scriptFunction);
  },

i am not sure if this approach is good in vuejs, i am trying now to retrive the response in vuejs

score 0 · Answer 1 · answered Nov 04 '22 at 14:18

Today I encountered the same problem as you, below you will find my solution:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
    <script>
      function onXingAuthLogin(response) {
        const xingResponseEvent = new CustomEvent("xingResponseEvent", {detail: response});
        window.dispatchEvent(xingResponseEvent)
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script src="https://www.xing-share.com/plugins/login_plugin.js"></script>
  </body>
</html>

When you log in via the Xing button, the function onXingAuthLogin is executed. In this function I created a CustomEvent and dispached it. The payload is the response from Xing.

App.vue

<script setup lang="ts">
import { ref } from 'vue';
const user = ref(null);

window.addEventListener('xingResponseEvent', ((event: CustomEvent) => {
  user.value = event.detail;
}) as EventListener);
</script>

<template>
  <component v-if="!user" is="script" type="xing/login">
      {
        "consumer_key": "72be9bbb4ba8fcb5af86"
      }
  </component>
  <pre v-else><code>{{user}}</code></pre>
</template>

<style scoped></style>

In App.vue I have attached an eventListener to the window, which listens for the new event. When the event is recognized, the user variable is filled based on the event payload and displayed in the template.

Xing login button plugin with vuejs

1 Answers1