vue.js - 使用 Vue.js 和 Amplify 的 Facebook 登录组件
问题描述
这是 Vue 中一个自包含的 Facebook 登录组件的源代码。我正在尝试将它与 AWS Amplify 一起使用。我成功地让 Facebook 登录屏幕出现,并且能够在 AWS cognito 中获得身份 ID。然而,事情并不完全奏效。
<template>
<div>
<Button
class="FacebookButton"
v-text="buttonText"
@click="handleClick"
:disabled="isLoading"
/>
</div>
</template>
<script>
import Auth from "@aws-amplify/auth";
import { AmplifyEventBus } from "aws-amplify-vue";
export default {
name: "FacebookButton",
components: {
},
data() {
return {
buttonText: "Login to Facebook",
isLoading: true
};
},
computed: {},
async mounted() {
this.loadFacebookSDK();
await this.waitForInit();
this.isLoading = false;
},
beforeCreate() {},
methods: {
waitForInit() {
return new Promise(res => {
const hasFbLoaded = () => {
if (window.FB) {
res();
} else {
setTimeout(hasFbLoaded, 300);
}
};
hasFbLoaded();
});
},
statusChangeCallback(response) {
if (response.status === "connected") {
this.handleResponse(response.authResponse);
} else {
this.handleError(response);
}
},
checkLoginState() {
window.FB.getLoginStatus(this.statusChangeCallback);
},
handleClick() {
window.FB.login(this.checkLoginState, { scope: "public_profile,email" });
},
handleError(error) {
alert(error);
},
async handleResponse(data) {
const { email, accessToken: token, expiresIn } = data;
const expires_at = expiresIn * 1000 + new Date().getTime();
const user = { email };
this.isLoading = true;
try {
//const response = await Auth.federatedSignIn(
await Auth.federatedSignIn("facebook", { token, expires_at }, user);
this.isLoading = false;
AmplifyEventBus.$emit("authState", "signedIn");
//this.props.onLogin(response);
} catch (e) {
this.isLoading = false;
this.handleError(e);
}
},
loadFacebookSDK() {
window.fbAsyncInit = function() {
window.FB.init({
appId: "yourappidhere",
xfbml: true,
version: "v3.2"
});
window.FB.AppEvents.logPageView();
};
(function(d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");
}
}
};
</script>
<style scoped>
</style>
此代码是来自 React 示例的端口:https ://serverless-stack.com/chapters/facebook-login-with-cognito-using-aws-amplify.html
我正在尝试通过将更改发送到 authState 来使此 Facebook 登录与现有的 Amplify 身份验证器状态管理系统一起工作,如下所示:
AmplifyEventBus.$emit("authState", "signedIn");
这会导致 Authenticator 小部件“消失”,但它不会让我进入我的应用程序。我不太确定下一步该去哪里。
解决方案
推荐阅读
- spring-boot - Maven 程序集插件错误:无法找到或加载主类
- arrays - VB Script 嵌套字典
- javascript - expiresIn 即使使用对象文字也不能在 jsonwebtoken.sign() 中工作
- java - 如何使用 swagger 3.0 为 oneof 生成 pojo
- python - While 循环更新并使用更新后的值,Python
- android - 当相机访问被阻止时生物识别提示(面部认证)(Android 12 - Pixel)
- c++ - 来自 fstream 的 C++ 2d 数组未正确存储
- r - SEM 中的回归与提取的潜在因素的回归不匹配
- mysql - 选择语句不适用于可能保留字的列名
- python - 如何将 MultiIndex 行附加到空的熊猫数据框