Javascript 如何从JS获取数据到Flask以使用FIREBASE PHONE AUTH
我想使用flask登录和Firebase通过电话接收令牌使用can登录。 我找到了firebase_admin模块。 我是否需要使用firebase_admin？ 我是否可以通过电话信息代码登录，只需一个html（如bellow）即可，并将数据表单JS发送到Flask？ 我的html代码Javascript 如何从JS获取数据到Flask以使用FIREBASE PHONE AUTH,javascript,firebase,flask,jinja2,flask-login,Javascript,Firebase,Flask,Jinja2,Flask Login,我想使用flask登录和Firebase通过电话接收令牌使用can登录。 我找到了firebase_admin模块。 我是否需要使用firebase_admin？ 我是否可以通过电话信息代码登录，只需一个html（如bellow）即可，并将数据表单JS发送到Flask？ 我的html代码 {% extends "base.html" %} {% block content %} <body> <!-- Add two inputs for "pho
{% 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 %}
{%extends“base.html”%}
{%block content%}
把你的电话放好
Sumibt通过电话接收令牌代码
令牌码
使用令牌代码登录
//粘贴先前复制的配置文件
//您的web应用程序的Firebase配置
var firebaseConfig={
apiKey:“Aizasafasf7p1 CLE”，
authDomain:“quicksafasfsafeapp.com”，
数据库URL:“https://quicksasfafasfasf.com",
projectId:“快速启动-1597757947735”，
storageBucket：“快速启动XAFASFSFCOM”，
messagingSenderId:“880adfasfsf0”，
appId:“1:8802987asdfasfsfaseb83”，
度量标准：“G-XasdfasfdfF”
};
//初始化Firebase
firebase.initializeApp（firebaseConfig）；
firebase.analytics（）；
//全局创建Recaptcha验证程序实例
//验证验证码时调用submitPhoneNumberAuth（）
window.recaptchaVerifier=new firebase.auth.recaptchaVerifier(
“recaptcha容器”，
{
大小：“正常”，
回调：函数（响应）{
submitPhoneNumberAuth（）；
}
}
);
//单击“登录按钮”时，此功能将运行
//从“phoneNumber”输入中获取值，并向该电话号码发送短信
函数submitPhoneNumberAuth（）{
var phoneNumber=document.getElementById（“phoneNumber”）.value；
var-appVerifier=window.recaptchaVerifier；
火基
.auth（）
.signInWithPhoneNumber（phoneNumber，appVerifier）
.然后（函数（确认结果）{
window.confirmationResult=确认结果；
})
.catch（函数（错误）{
console.log（错误）；
});
}
//单击“确认代码”按钮时，此功能将运行
//从“代码”输入中获取值并提交代码以验证电话号码
//如果身份验证成功且身份验证完成，则返回用户对象
函数submitPhoneNumberAuthCode（）{
var代码=document.getElementById（“代码”）.value；
确认结果
.确认（代码）
.然后（函数（结果）{
var user=result.user；
console.log（用户）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
//每次身份验证状态更改时，此函数都会运行。用于验证用户是否已登录
firebase.auth（）.onAuthStateChanged（函数（用户）{
如果（用户）{
console.log（“用户登录”）；
}否则{
//没有用户登录。
console.log（“用户未登录”）；
}
});
{%endblock%}