如何从JS到Flask获取数据以使用FIREBASE PHONE AUTH

编程问答 2022-06-20

问题描述

我想使用flask-login和Firebase来使用，可以通过电话通过接收令牌登录。 我找到了模块firebase_admin。 是否需要使用firebase_admin？ 我可以仅通过一个像波纹管这样的html来通过电话通讯代码进行登录，并将JS形式的数据发送到Flask吗？ 我的HTML代码

{% extends "base.html" %}
{% block content %}
<body>
<!-- Add two inputs for "phoneNumber" and "code" -->
<div class="row">
    <div class="col">
        <div class="p-3 mb-10 ">
            <label class="label-input-group">Put your phone </label>
        <input type="tel" id="phoneNumber" name="phoneNumber" class="next-input" placeholder="+84xxxxx"/>
    </div>
    </div>
</div>
<div class="row">
    <div class="col text-center">
        <div class="p-3 mb-10 ">
        <button class="btn btn-primary btn-lg btn-block" id="sign-in-button" onclick="submitPhoneNumberAuth()">
    Sumibt to recieve token code via phone
</button>
        </div></div>
</div>
<br>
<div class="row">
    <div class="col">
        <div class="p-3 mb-10 ">
            <label class="label-input-group">Token code</label>
            <input type="text" id="code" class="next-input"/></div></div>
</div>
<div class="row text-center">
    <div class="col">
        <div class="p-3 mb-10 ">
        <button class="btn btn-primary btn-lg btn-block"  id="confirm-code" onclick="submitPhoneNumberAuthCode()">
    Login with token code
</button>
        </div>
    </div>
</div>

<div id="recaptcha-container"></div>

<!-- Add the latest firebase dependecies from CDN -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-auth.js"></script>

<script>
    // Paste the config your copied earlier
    // Your web app's Firebase configuration
    var firebaseConfig = {
        apiKey: "AIzaSafasfasfasf7P1-CLE",authDomain: "quicksafasfsafeapp.com",databaseURL: "https://quicksasfafasfasf.com",projectId: "quickstart-1597757947735",storageBucket: "quickstart-xafasfsfsfcom",messagingSenderId: "880adfasfsf0",appId: "1:8802987asdfasfsfaseb83",measurementId: "G-XasdfasfdfF"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();

    // Create a Recaptcha verifier instance globally
    // Calls submitPhoneNumberAuth() when the captcha is verified
    window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
        "recaptcha-container",{
            size: "normal",callback: function (response) {
                submitPhoneNumberAuth();
            }
        }
    );

    // This function runs when the 'sign-in-button' is clicked
    // Takes the value from the 'phoneNumber' input and sends SMS to that phone number
    function submitPhoneNumberAuth() {
        var phoneNumber = document.getElementById("phoneNumber").value;
        var appVerifier = window.recaptchaVerifier;
        firebase
            .auth()
            .signInWithPhoneNumber(phoneNumber,appVerifier)
            .then(function (confirmationResult) {
                window.confirmationResult = confirmationResult;
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    // This function runs when the 'confirm-code' button is clicked
    // Takes the value from the 'code' input and submits the code to verify the phone number
    // Return a user object if the authentication was successful,and auth is complete
    function submitPhoneNumberAuthCode() {
        var code = document.getElementById("code").value;
        confirmationResult
            .confirm(code)
            .then(function (result) {
                var user = result.user;
                console.log(user);
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    //This function runs everytime the auth state changes. Use to verify if the user is logged in
    firebase.auth().onAuthStateChanged(function (user) {
        if (user) {
            console.log("USER LOGGED IN");
        } else {
            // No user is signed in.
            console.log("USER NOT LOGGED IN");
        }
    });
</script>
</body>
{% endblock %}

那么如何烧瓶可以从JS接收数据？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

firebasefirebasefirebaseflaskflask-loginjavascriptjinja2