尝试使用Facebook在Firebase上(从网页上)注册

时间:2019-08-09 10:05:34

标签: facebook firebase firebase-authentication facebook-authentication

我有一个小型网站,用户可以在其中使用电子邮件和密码在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>

但是它几乎什么都不做。

准确地说,这是加载页面时浏览器中显示的内容:

enter image description here

很明显,正如人们所看到的那样,它还没有完全起作用。 但是我想知道我需要更改(或检查)什么,以便有提示让我有机会注册Facebook。

1 个答案:

答案 0 :(得分:0)

要注意的是

  1. 创建一个新的Firebase项目(或使用现有的项目)并导航至项目概述,您将在其中获得firebase配置对象(即 firebaseConfig )复制该文件(CDN或配置文件)并将其粘贴到为您的网站供电的脚本中。

  2. 要使用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>
  1. 转到“身份验证”选项卡,然后登录方法并查找“ 授权域” 。请确保用于测试此网站的 URL 在那里,如果没有,请添加。例如: 127.0.0.1 用于本地主机。

  2. 最后通过将其状态从禁用(即默认)更改为启用并使用相应的 provider 对象来最终启用您想要或尝试进行的任何登录方法。 p>

注意:对于FB选项,您需要提供AppID和App Secret,可以从here轻松获取。

但是,如果您只是尝试尝试而没有AppID和密码,则只需按照前两个步骤,然后跳过其他步骤即可。这样做将导致一个弹出窗口,该弹出窗口将自行关闭(在禁用fb选项的情况下才有意义)