[英]How to integrate authentication and database in Firebase for Flutter App?
[英]Integrate Firebase authentication in an AngularDart app
我找不到關於如何將Firebase身份驗證(Google,電子郵件,電話等)集成到AngularDart (版本5)應用程序中的清晰完整的解釋。
你能把那玩意兒給我么? 或者,您能告訴我在哪里找到它嗎?
謝謝!
firebase_dart_ui為我工作。 該存儲庫也包含一個示例 。
同樣。 我花了很長時間試圖找到一些東西。 盡管對Angular Dart來說是新的,但這些示例在找到好的地方確實有效。 該倉庫有簡單的身份驗證+電話和存儲等示例。
md簡要介紹了您需要在Firebase控制台中進行設置的內容,還需要允許主機訪問Cloud Console中由Firebase生成的密鑰。
正如Gazihan所述,firebase_dart_ui軟件包將在您要使用Firebase UI的情況下通過Google等登錄,並同意,在查找步驟方面很難遵循。 我必須更改開發人員依賴項才能使其正常工作,但確實做到了:
dev_dependencies:
build_runner: ^1.7.0
build_test: ^0.10.8
build_web_compilers: ^2.4.0
FirebaseDart存儲庫中的以下user / pwd登錄示例更直接,可能會有所幫助。
首先,從您的項目Firebase設置頁面獲取您的App詳細信息。
索引鏢
import 'dart:convert';
import 'dart:html';
import 'package:firebase/firebase.dart' as fb;
main() async {
try {
fb.initializeApp(
apiKey: "your api key",
authDomain: "your auth domain",
databaseURL: "your database url",
storageBucket: "your storage bucket");
AuthApp();
} on fb.FirebaseJsNotLoadedException catch (e) {
print(e);
}
}
class AuthApp {
final fb.Auth auth;
final FormElement registerForm;
final InputElement email, password;
final AnchorElement logout;
final TableElement authInfo;
final ParagraphElement error;
final SelectElement persistenceState, verifyEmailLanguage;
final ButtonElement verifyEmail;
final DivElement registeredUser, verifyEmailContainer;
AuthApp()
: this.auth = fb.auth(),
this.email = querySelector("#email"),
this.password = querySelector("#password"),
this.authInfo = querySelector("#auth_info"),
this.error = querySelector("#register_form p"),
this.logout = querySelector("#logout_btn"),
this.registerForm = querySelector("#register_form"),
this.persistenceState = querySelector("#persistent_state"),
this.verifyEmail = querySelector('#verify_email'),
this.verifyEmailLanguage = querySelector('#verify_email_language'),
this.registeredUser = querySelector("#registered_user"),
this.verifyEmailContainer = querySelector("#verify_email_container") {
logout.onClick.listen((e) {
e.preventDefault();
auth.signOut();
});
this.registerForm.onSubmit.listen((e) {
e.preventDefault();
var emailValue = email.value.trim();
var passwordvalue = password.value.trim();
_registerUser(emailValue, passwordvalue);
});
// After opening
if (auth.currentUser != null) {
_setLayout(auth.currentUser);
}
// When auth state changes
auth.onAuthStateChanged.listen(_setLayout);
verifyEmail.onClick.listen((e) async {
verifyEmail.disabled = true;
verifyEmail.text = 'Sending verification email...';
try {
// you will get the verification email in selected language
auth.languageCode = _getSelectedValue(verifyEmailLanguage);
// url should be any authorized domain in your console - we use here,
// for this example, authDomain because it is whitelisted by default
// More info: https://firebase.google.com/docs/auth/web/passing-state-in-email-actions
await auth.currentUser.sendEmailVerification(
fb.ActionCodeSettings(url: "followmyvoyage.firebaseapp.com"));
verifyEmail.text = 'Verification email sent!';
} catch (e) {
verifyEmail
..text = e.toString()
..style.color = 'red';
}
});
}
_registerUser(String email, String password) async {
if (email.isNotEmpty && password.isNotEmpty) {
var trySignin = false;
try {
// Modifies persistence state. More info: https://firebase.google.com/docs/auth/web/auth-state-persistence
var selectedPersistence = _getSelectedValue(persistenceState);
await auth.setPersistence(selectedPersistence);
await auth.createUserWithEmailAndPassword(email, password);
} on fb.FirebaseError catch (e) {
if (e.code == "auth/email-already-in-use") {
trySignin = true;
}
} catch (e) {
error.text = e.toString();
}
if (trySignin) {
try {
await auth.signInWithEmailAndPassword(email, password);
} catch (e) {
error.text = e.toString();
}
}
} else {
error.text = "Please fill correct e-mail and password.";
}
}
String _getSelectedValue(SelectElement element) =>
element.options[element.selectedIndex].value;
void _setLayout(fb.User user) {
if (user != null) {
registerForm.style.display = "none";
registeredUser.style.display = "block";
email.value = "";
password.value = "";
error.text = "";
var data = <String, dynamic>{
'email': user.email,
'emailVerified': user.emailVerified,
'isAnonymous': user.isAnonymous,
'metadata.creationTime': user.metadata.creationTime,
'metadata.lastSignInTime': user.metadata.lastSignInTime
};
data.forEach((k, v) {
if (v != null) {
var row = authInfo.addRow();
row.addCell()
..text = k
..classes.add('header');
row.addCell().text = "$v";
}
});
print('User.toJson:');
print(const JsonEncoder.withIndent(' ').convert(user));
verifyEmailContainer.style.display =
user.emailVerified ? "none" : "block";
} else {
registerForm.style.display = "block";
registeredUser.style.display = "none";
authInfo.children.clear();
}
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Auth demo</title>
<style type="text/css">
#register_form p {
color: red;
}
#auth_info td {
padding: 1px;
}
#auth_info td.header {
font-weight: bold;
text-align: right;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Auth demo</h1>
<form id="register_form" style="display: none">
<h2>Register</h2>
<p></p>
<label for="persistent_state">State persistence type</label>
<select id="persistent_state">
<option value="local">LOCAL</option>
<option value="session">SESSION</option>
<option value="none">NONE</option>
</select>
<br>
<input type="email" placeholder="Your E-mail" id="email">
<input type="password" placeholder="Your Password" id="password">
<input type="submit" value="Register me">
</form>
<div id="registered_user" style="display: none">
<table id="auth_info">
</table>
<div id="verify_email_container">
<h2>Send verify email</h2>
<label for="verify_email_language">Email language</label>
<select id="verify_email_language">
<option value="en">English</option>
<option value="cs">Czech</option>
<option value="de">German</option>
<option value="fr">French</option>
</select>
<button id="verify_email">Verify email</button>
</div>
<a href="#" id="logout_btn">Log out</a>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js"></script>
<script defer src="index.dart.js" type="application/javascript"></script>
</body>
</html>
pubspec.yaml
dependencies:
firebase: ^5.0.0
http: '>=0.11.3 <0.13.0'
js: ^0.6.0
這個答案到處都是,希望在兩個例子之間討論它是有用的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.