带vuejs的Xing登录按钮插件
带vuejs的Xing登录按钮插件
提问于 2022-06-23 09:57:51
我对一般的开发和Vuejs来说都是新手，我试图在我的网站上添加to登录按钮插件，这个插件是用Vuejs构建的，但是杏提供的代码仅用于Java脚本，如何在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>我试图将它放在创建的函数中，并直接放在页面的html部分，但是没有工作。
非常感谢你的进步。
更新1:这是一个只使用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>我以已安装的函数将元素注入头部，从而实现了按钮的呈现：
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);
},我不确定这种方法在vuejs中是否好，我现在正尝试用vuejs检索响应。
回答 1
Stack Overflow用户
发布于 2022-11-04 14:18:21
今天我遇到了和你一样的问题，下面你会找到我的解决方案：
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>当您通过行按钮登录时，将执行函数onXingAuthLogin。在这个函数中，我创建了一个CustomEvent并消除了它。有效载荷是星的响应。
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>在App.vue中，我向窗口附加了一个eventListener，该窗口侦听新事件。当事件被识别时，将根据事件有效负载填充用户变量并显示在模板中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72728243
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号