尝试使用 Facebook 在 Firebase 上注册(从网页)
Trying to sign up (from a web page) on Firebase, using Facebook
我有一个小型网站,用户可以在其中使用电子邮件和密码登录 Firebase。
我使用这个代码:
<script>
function SignUpWithMailPSW(email,pswRdmSeq) {
....
firebase.auth().createUserWithEmailAndPassword(email, pswRdmSeq).then(function(user) {
....
}
... useful things irrelevant to the question.
}
</script>
而且效果很好。
现在我想为用户提供使用 Facebook 登录的选项。
首先我找到了 this document。为了进行实验,我根据阅读的内容做了一些事情,只是一个小测试页。这是代码:
<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=UTF-8">
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-auth.js"></script>
</HEAD>
<BODY>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "ABCDEF-APIKEY-12345",
authDomain: "myapp.firebaseapp.com",
databaseURL: "https://myapp.firebaseio.com",
projectId: "myapp",
storageBucket: "myapp.appspot.com",
messagingSenderId: "123456789",
appId: "1:987654321:web:xy2122k98xyxy8988"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<b>TEST ONLY PAGE !!!</b>
<script>
var provider = new firebase.auth.FacebookAuthProvider();
function SignUpWithFB() {
// var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
// ...
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
}
SignUpWithFB();
</script>
<b>TEST ONLY PAGE !!!</b>
</BODY>
</HTML>
但它几乎什么都不做。
准确地说,这是加载页面时浏览器中显示的内容:
很明显,正如人们所见,它还没有完全发挥作用。
但我想知道我需要更改(或检查)哪些内容才能获得提示,让我有机会注册 Facebook。
需要注意的是
创建一个新的 Firebase 项目(或使用现有项目)并导航至 项目概览,您将在其中获得 Firebase 配置对象(即 firebaseConfig ) 复制(CDN 或配置)并将其粘贴到为您的站点提供支持的脚本中。
使用firebase的认证功能添加firebase的Auth-SDK
在主 firebase 脚本下方(按以下顺序)
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-auth.js"></script>
转到“身份验证”选项卡,然后转到“登录方法”并查找授权域。确保URL 您正在测试的网站是否存在,如果没有,请添加。例如:127.0.0.1 对于本地主机。
最终启用您想要或尝试测试的任何登录方法,方法是将其状态从禁用(即默认)更改为启用并使用相应的 provider对象.
注意:对于 FB 选项,您需要提供 AppID 和 App Secret,您可以从 here 中轻松获取。
但是,如果您只是尝试一些事情并且没有 AppID 和密码,只需执行前 2 个步骤并跳过其他步骤。这样做会导致弹出窗口自行关闭(这很有意义,因为 fb 选项被禁用)
我有一个小型网站,用户可以在其中使用电子邮件和密码登录 Firebase。
我使用这个代码:
<script>
function SignUpWithMailPSW(email,pswRdmSeq) {
....
firebase.auth().createUserWithEmailAndPassword(email, pswRdmSeq).then(function(user) {
....
}
... useful things irrelevant to the question.
}
</script>
而且效果很好。
现在我想为用户提供使用 Facebook 登录的选项。
首先我找到了 this document。为了进行实验,我根据阅读的内容做了一些事情,只是一个小测试页。这是代码:
<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=UTF-8">
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-auth.js"></script>
</HEAD>
<BODY>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "ABCDEF-APIKEY-12345",
authDomain: "myapp.firebaseapp.com",
databaseURL: "https://myapp.firebaseio.com",
projectId: "myapp",
storageBucket: "myapp.appspot.com",
messagingSenderId: "123456789",
appId: "1:987654321:web:xy2122k98xyxy8988"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<b>TEST ONLY PAGE !!!</b>
<script>
var provider = new firebase.auth.FacebookAuthProvider();
function SignUpWithFB() {
// var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
// ...
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
}
SignUpWithFB();
</script>
<b>TEST ONLY PAGE !!!</b>
</BODY>
</HTML>
但它几乎什么都不做。
准确地说,这是加载页面时浏览器中显示的内容:
很明显,正如人们所见,它还没有完全发挥作用。 但我想知道我需要更改(或检查)哪些内容才能获得提示,让我有机会注册 Facebook。
需要注意的是
创建一个新的 Firebase 项目(或使用现有项目)并导航至 项目概览,您将在其中获得 Firebase 配置对象(即 firebaseConfig ) 复制(CDN 或配置)并将其粘贴到为您的站点提供支持的脚本中。
使用firebase的认证功能添加firebase的Auth-SDK 在主 firebase 脚本下方(按以下顺序)
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-auth.js"></script>
转到“身份验证”选项卡,然后转到“登录方法”并查找授权域。确保URL 您正在测试的网站是否存在,如果没有,请添加。例如:127.0.0.1 对于本地主机。
最终启用您想要或尝试测试的任何登录方法,方法是将其状态从禁用(即默认)更改为启用并使用相应的 provider对象.
注意:对于 FB 选项,您需要提供 AppID 和 App Secret,您可以从 here 中轻松获取。
但是,如果您只是尝试一些事情并且没有 AppID 和密码,只需执行前 2 个步骤并跳过其他步骤。这样做会导致弹出窗口自行关闭(这很有意义,因为 fb 选项被禁用)