1. 概述
在此 Codelab 中,您将学习如何使用AngularFire通过使用 Firebase 产品和服务实现和部署聊天客户端来创建 Web 应用程序。
你将学到什么
- 使用 Angular 和 Firebase 构建 Web 应用。
- 使用 Cloud Firestore 和 Cloud Storage for Firebase 同步数据。
- 使用 Firebase 身份验证对您的用户进行身份验证。
- 在 Firebase 托管上部署您的 Web 应用。
- 使用 Firebase 云消息传递发送通知。
- 收集您的网络应用程序的性能数据。
你需要什么
2. 获取示例代码
从命令行克隆 Codelab 的GitHub 存储库:
git clone https://github.com/firebase/codelab-friendlychat-web
或者,如果您没有安装 git,则可以将存储库下载为 ZIP 文件。
导入入门应用程序
使用 IDE,从克隆的存储库中打开或导入 📁 angularfire-start
目录。这个 📁 angularfire-start
目录包含 Codelab 的起始代码,它将是一个功能齐全的聊天 Web 应用程序。
3. 创建并设置 Firebase 项目
创建 Firebase 项目
- 登录Firebase 。
- 在 Firebase 控制台中,单击添加项目,然后将您的 Firebase 项目命名为FriendlyChat 。请记住您的 Firebase 项目的项目 ID。
- 取消选中为此项目启用 Google Analytics
- 单击“创建项目” 。
您要构建的应用程序使用可用于网络应用的 Firebase 产品:
- Firebase 身份验证可轻松允许您的用户登录您的应用。
- Cloud Firestore将结构化数据保存在云端,并在数据发生变化时获得即时通知。
- Cloud Storage for Firebase将文件保存在云中。
- Firebase Hosting用于托管和服务您的资产。
- Firebase Cloud Messaging用于发送推送通知并显示浏览器弹出通知。
- Firebase 性能监控,用于收集应用的用户性能数据。
其中一些产品需要特殊配置或需要使用 Firebase 控制台启用。
将 Firebase Web 应用添加到项目中
- 单击网络图标
创建一个新的 Firebase Web 应用。
- 使用昵称“Friendly Chat”注册应用程序,然后选中“同时为此应用程序设置 Firebase 托管”旁边的框。单击注册应用程序。
- 在下一步中,您将看到一个配置对象。仅将 JS 对象(而不是周围的 HTML)复制到firebase-config.js
启用 Google登录以进行 Firebase 身份验证
要允许用户使用其 Google 帐户登录网络应用程序,您将使用Google登录方法。
您需要启用Google登录:
- 在 Firebase 控制台中,找到左侧面板中的“构建”部分。
- 单击“身份验证” ,然后单击“登录方法”选项卡(或单击此处直接转到那里)。
- 启用Google登录提供商,然后单击“保存” 。
- 将应用程序面向公众的名称设置为“友好聊天” ,然后从下拉菜单中选择项目支持电子邮件。
- 在Google Cloud Console中配置 OAuth 同意屏幕并添加徽标:
启用 Cloud Firestore
Web 应用程序使用Cloud Firestore保存聊天消息并接收新的聊天消息。
您需要启用 Cloud Firestore:
- 在 Firebase 控制台的“构建”部分中,单击Firestore 数据库。
- 单击 Cloud Firestore 窗格中的创建数据库。
- 选择“以测试模式启动”选项,然后在阅读有关安全规则的免责声明后单击“下一步” 。
测试模式保证您在开发过程中可以自由地写入数据库。稍后您将在此 Codelab 中使我们的数据库更加安全。
- 设置 Cloud Firestore 数据的存储位置。您可以将其保留为默认值或选择离您较近的区域。单击“完成”以配置 Firestore。
启用云存储
该 Web 应用使用 Cloud Storage for Firebase 来存储、上传和共享图片。
您需要启用云存储:
- 在 Firebase 控制台的“构建”部分中,单击“存储” 。
- 如果没有“开始”按钮,则表示云存储已启用,您无需执行以下步骤。
- 单击开始。
- 阅读有关 Firebase 项目安全规则的免责声明,然后单击“下一步” 。
使用默认安全规则,任何经过身份验证的用户都可以向 Cloud Storage 写入任何内容。稍后,您将在此 Codelab 中使我们的存储更加安全。
- 预先选择的 Cloud Storage 位置与您为 Cloud Firestore 数据库选择的区域相同。单击“完成”完成设置。
4.安装Firebase命令行界面
Firebase 命令行界面 (CLI) 允许您使用 Firebase 托管在本地提供您的 Web 应用程序,以及将您的 Web 应用程序部署到 Firebase 项目。
- 通过运行以下 npm 命令安装 CLI:
npm -g install firebase-tools
- 通过运行以下命令验证 CLI 是否已正确安装:
firebase --version
确保 Firebase CLI 的版本为 v4.1.0 或更高版本。
- 通过运行以下命令授权 Firebase CLI:
firebase login
您已设置 Web 应用模板,以从应用的本地目录(您之前在 Codelab 中克隆的存储库)中提取应用的 Firebase 托管配置。但要提取配置,您需要将应用程序与 Firebase 项目关联。
- 确保您的命令行正在访问应用程序的本地
angularfire-start
目录。 - 通过运行以下命令将您的应用与 Firebase 项目关联:
firebase use --add
- 出现提示时,选择您的项目 ID ,然后为您的 Firebase 项目指定一个别名。
如果您有多个环境(生产、登台等),则别名很有用。但是,对于此 Codelab,我们只使用default
别名。
- 按照命令行上的其余说明进行操作。
5.安装AngularFire
在运行项目之前,请确保已设置 Angular CLI 和 AngularFire。
- 在控制台中,运行以下命令:
npm install -g @angular/cli
- 然后,在
angularfire-start
目录的控制台中,运行以下 Angular CLI 命令:
ng add @angular/fire
这将为您的项目安装所有必需的依赖项。
- 出现提示时,选择在 Firebase 控制台中设置的功能(
ng deploy -- hosting
、Authentication
、Firestore
、Cloud Functions (callable)
、Cloud Messaging
、Cloud Storage
),然后按照控制台上的提示进行操作。
6. 在本地运行入门应用程序
现在您已导入并配置了项目,您已准备好首次运行 Web 应用程序。
- 在
angularfire-start
目录的控制台中,运行以下 Firebase CLI 命令:
firebase emulators:start
- 您的命令行应显示以下响应:
✔ hosting: Local server: http://localhost:5000
您正在使用Firebase 托管模拟器在本地为我们的应用程序提供服务。现在应该可以从http://localhost:5000访问该 Web 应用程序。提供位于src
子目录下的所有文件。
- 使用浏览器,在http://localhost:5000打开您的应用程序。
您应该会看到FriendlyChat应用程序的UI,它(尚未!)运行:
该应用程序现在无法执行任何操作,但在您的帮助下,很快就会!到目前为止,您只为您设计了 UI。
现在让我们建立一个实时聊天!
7. 导入并配置 Firebase
配置 Firebase
您需要配置 Firebase SDK 以告诉它您正在使用哪个 Firebase 项目。
- 转到Firebase 控制台中的项目设置
- 在“您的应用程序”卡中,选择您需要配置对象的应用程序的昵称。
- 从 Firebase SDK 代码段窗格中选择“配置”。
你会发现已经为你生成了一个环境文件/angularfire-start/src/environments/environment.ts
。
- 复制配置对象片段,然后将其添加到
angularfire-start/src/firebase-config.js
。
环境.ts
export const environment = {
firebase: {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
},
};
导入 AngularFire
您会发现您在控制台中选择的功能已自动路由到/angularfire-start/src/app/app.module.ts
文件中。这允许您的应用使用 Firebase 特性和功能。但是,要在本地环境中进行开发,您需要连接它们才能使用模拟器套件。
- 在
/angularfire-start/src/app/app.module.ts
中,找到imports
部分,并修改提供的函数以在非生产环境中连接到模拟器套件。
// ...
import { provideAuth,getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { provideFirestore,getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage, connectStorageEmulator } from '@angular/fire/storage';
// ...
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
const auth = getAuth();
if (location.hostname === 'localhost') {
connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
}
return auth;
}),
provideFirestore(() => {
const firestore = getFirestore();
if (location.hostname === 'localhost') {
connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
}
return firestore;
}),
provideFunctions(() => {
const functions = getFunctions();
if (location.hostname === 'localhost') {
connectFunctionsEmulator(functions, '127.0.0.1', 5001);
}
return functions;
}),
provideStorage(() => {
const storage = getStorage();
if (location.hostname === 'localhost') {
connectStorageEmulator(storage, '127.0.0.1', 5001);
}
return storage;
}),
provideMessaging(() => {
return getMessaging();
}),
// ...
应用程序模块.ts
在此 Codelab 中,您将使用 Firebase 身份验证、Cloud Firestore、云存储、云消息传递和性能监控,因此您将导入它们的所有库。在您未来的应用中,请确保您仅导入所需的 Firebase 部分,以缩短应用的加载时间。
8. 设置用户登录
AngularFire 现在应该可以使用了,因为它是在app.module.ts
中导入并初始化的。您现在将使用Firebase Authentication实现用户登录。
使用 Google 登录对您的用户进行身份验证
在应用程序中,当用户单击“使用 Google 登录”按钮时,就会触发login
功能。 (您已经进行了设置!)对于此 Codelab,您希望授权 Firebase 使用 Google 作为身份提供商。您将使用弹出窗口,但 Firebase 还提供其他几种方法。
- 在
angularfire-start
目录的子目录/src/app/services/
中,打开chat.service.ts
。 - 找到
login
功能。 - 将整个函数替换为以下代码。
聊天服务.ts
// Signs-in Friendly Chat.
login() {
signInWithPopup(this.auth, this.provider).then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
this.router.navigate(['/', 'chat']);
return credential;
})
}
当用户单击“注销”按钮时,会触发logout
功能。
- 返回文件
src/app/services/chat.service.ts
。 - 找到函数
logout
。 - 将整个函数替换为以下代码。
聊天服务.ts
// Logout of Friendly Chat.
logout() {
signOut(this.auth).then(() => {
this.router.navigate(['/', 'login'])
console.log('signed out');
}).catch((error) => {
console.log('sign out error: ' + error);
})
}
跟踪身份验证状态
要相应地更新我们的 UI,您需要一种方法来检查用户是否登录或注销。使用 Firebase 身份验证,您可以检索每次身份验证状态更改时将触发的用户状态的可观察值。
- 返回文件
src/app/services/chat.service.ts
。 - 找到变量赋值
user$
。 - 将整个作业替换为以下代码。
聊天服务.ts
// Observable user
user$ = user(this.auth);
上面的代码调用 AngularFire 函数user
,它返回一个可观察的用户。每次身份验证状态更改时(当用户登录或注销时)都会触发它。此时,您将更新 UI 以进行重定向、在标题导航中显示用户等。所有这些 UI 部分都已实现。
测试登录应用程序
- 如果您的应用程序仍在运行,请在浏览器中刷新您的应用程序。否则,请在命令行上运行
firebase emulators:start
以开始从http://localhost:5000提供应用程序,然后在浏览器中打开它。 - 使用登录按钮和您的 Google 帐户登录该应用程序。如果您看到一条错误消息,指出
auth/operation-not-allowed
,请检查以确保您在 Firebase 控制台中启用了 Google Sign-in 作为身份验证提供程序。 - 登录后,应显示您的个人资料图片和用户名:
9. 将消息写入 Cloud Firestore
在本部分中,您将向 Cloud Firestore 写入一些数据,以便填充应用的 UI。这可以使用Firebase 控制台手动完成,但您将在应用程序本身中执行此操作以演示基本的 Cloud Firestore 写入。
数据模型
Cloud Firestore 数据分为集合、文档、字段和子集合。您将把聊天的每条消息作为文档存储在名为messages
顶级集合中。
将消息添加到 Cloud Firestore
要存储用户编写的聊天消息,您将使用Cloud Firestore 。
在本部分中,您将添加用户向数据库写入新消息的功能。用户单击“发送”按钮将触发下面的代码片段。它将包含消息字段内容的消息对象添加到messages
集合中的 Cloud Firestore 实例。 add()
方法将具有自动生成的 ID 的新文档添加到集合中。
- 返回文件
src/app/services/chat.service.ts
。 - 找到函数
addMessage
。 - 将整个函数替换为以下代码。
聊天服务.ts
// Adds a text or image message to Cloud Firestore.
addMessage = async(textMessage: string | null, imageUrl: string | null): Promise<void | DocumentReference<DocumentData>> => {
let data: any;
try {
this.user$.subscribe(async (user) =>
{
if(textMessage && textMessage.length > 0) {
data = await addDoc(collection(this.firestore, 'messages'), {
name: user?.displayName,
text: textMessage,
profilePicUrl: user?.photoURL,
timestamp: serverTimestamp(),
uid: user?.uid
})}
else if (imageUrl && imageUrl.length > 0) {
data = await addDoc(collection(this.firestore, 'messages'), {
name: user?.displayName,
imageUrl: imageUrl,
profilePicUrl: user?.photoURL,
timestamp: serverTimestamp(),
uid: user?.uid
});
}
return data;
}
);
}
catch(error) {
console.error('Error writing new message to Firebase Database', error);
return;
}
}
测试发送消息
- 如果您的应用程序仍在运行,请在浏览器中刷新您的应用程序。否则,请在命令行上运行
firebase emulators:start
以开始从http://localhost:5000提供应用程序,然后在浏览器中打开它。 - 登录后,输入一条消息,例如“嘿那里!”,然后单击“发送” 。这会将消息写入 Cloud Firestore。但是,您还不会在实际的 Web 应用程序中看到数据,因为您仍然需要实现数据检索(Codelab 的下一部分)。
- 您可以在 Firebase 控制台中看到新添加的消息。打开您的模拟器套件 UI。在“构建”部分下,单击Firestore 数据库(或单击此处,您应该会看到包含新添加消息的消息集合:
10. 阅读消息
同步消息
要读取应用程序中的消息,您需要添加一个在数据更改时触发的可观察对象,然后创建一个显示新消息的 UI 元素。
您将添加代码来侦听来自应用程序的新添加的消息。在此代码中,您将检索messages
集合的快照。您将仅显示聊天的最后 12 条消息,以避免加载时显示很长的历史记录。
- 返回文件
src/app/services/chat.service.ts
。 - 找到函数
loadMessages
。 - 将整个函数替换为以下代码。
聊天服务.ts
// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
// Create the query to load the last 12 messages and listen for new ones.
const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
// Start listening to the query.
return collectionData(recentMessagesQuery);
}
要侦听数据库中的消息,您可以使用collection
函数在集合上创建查询,以指定要侦听的数据位于哪个集合中。在上面的代码中,您正在侦听messages
中的更改集合,这是存储聊天消息的地方。您还可以通过使用limit(12)
仅侦听最后 12 条消息并使用orderBy('timestamp', 'desc')
按日期对消息进行排序来应用限制,以获取 12 条最新消息。
collectionData
函数在底层使用快照。当与查询匹配的文档发生任何更改时,将触发回调函数。这可能是因为消息被删除、修改或添加。您可以在Cloud Firestore 文档中阅读有关此内容的更多信息。
测试同步消息
- 如果您的应用程序仍在运行,请在浏览器中刷新您的应用程序。否则,请在命令行上运行
firebase emulators:start
以开始从http://localhost:5000提供应用程序,然后在浏览器中打开它。 - 您之前在数据库中创建的消息应显示在FriendlyChat UI 中(见下文)。随意写新消息;它们应该立即出现。
- (可选)您可以尝试直接在模拟器套件的Firestore部分中手动删除、修改或添加新消息;任何更改都应反映在 UI 中。
恭喜!您正在应用中阅读 Cloud Firestore 文档!
11.发送图像
您现在将添加共享图像的功能。
虽然 Cloud Firestore 适合存储结构化数据,但 Cloud Storage 更适合存储文件。 Cloud Storage for Firebase是一种文件/blob 存储服务,您将使用它来存储用户使用我们的应用共享的任何图像。
将图像保存到云存储
在此 Codelab 中,您已经添加了一个可触发文件选择器对话框的按钮。选择文件后,将调用saveImageMessage
函数,您可以获得对所选文件的引用。 saveImageMessage
函数完成以下任务:
- 在聊天源中创建“占位符”聊天消息,以便用户在您上传图像时看到“正在加载”动画。
- 将图像文件上传到 Cloud Storage 的以下路径:
/<uid>/<file_name>
- 生成图像文件的公共可读 URL。
- 使用新上传的图像文件的 URL 代替临时加载图像来更新聊天消息。
现在您将添加发送图像的功能:
- 返回文件
src/index.js
。 - 找到函数
saveImageMessage
。 - 将整个函数替换为以下代码。
索引.js
// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
try {
// 1 - You add a message with a loading icon that will get updated with the shared image.
const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);
// 2 - Upload the image to Cloud Storage.
const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
const newImageRef = ref(this.storage, filePath);
const fileSnapshot = await uploadBytesResumable(newImageRef, file);
// 3 - Generate a public URL for the file.
const publicImageUrl = await getDownloadURL(newImageRef);
// 4 - Update the chat message placeholder with the image's URL.
messageRef ?
await updateDoc(messageRef,{
imageUrl: publicImageUrl,
storageUri: fileSnapshot.metadata.fullPath
}): null;
} catch (error) {
console.error('There was an error uploading a file to Cloud Storage:', error);
}
}
测试发送图像
- 如果您的应用程序仍在运行,请在浏览器中刷新您的应用程序。否则,请在命令行上运行
firebase emulators:start
以开始从http://localhost:5000提供应用程序,然后在浏览器中打开它。 - 登录后,点击左下角图片上传按钮
并使用文件选择器选择图像文件。如果您正在寻找图像,请随意使用这张漂亮的咖啡杯图片。
- 应用程序的 UI 中应出现一条新消息,其中包含您选择的图像:
如果您在未登录的情况下尝试添加图像,您应该会看到一条错误消息,告诉您必须登录才能添加图像。
12.显示通知
您现在将添加对浏览器通知的支持。当聊天中发布新消息时,该应用程序将通知用户。 Firebase Cloud Messaging (FCM) 是一种跨平台消息传递解决方案,可让您免费可靠地传递消息和通知。
添加 FCM 服务工作人员
Web 应用程序需要一个Service Worker来接收和显示 Web 通知。
添加 AngularFire 时应该已经设置了消息提供程序,请确保/angularfire-start/src/app/app.module.ts
的导入部分中存在以下代码
provideMessaging(() => {
return getMessaging();
}),
应用程序/应用程序模块.ts
Service Worker 只需加载并初始化 Firebase Cloud Messaging SDK,它将负责显示通知。
获取 FCM 设备令牌
当设备或浏览器上启用通知时,您将获得一个设备令牌。您可以使用此设备令牌向特定设备或特定浏览器发送通知。
当用户登录时,您调用saveMessagingDeviceToken
函数。您可以在此处从浏览器获取FCM 设备令牌并将其保存到 Cloud Firestore。
聊天服务.ts
- 找到函数
saveMessagingDeviceToken
。 - 将整个函数替换为以下代码。
聊天服务.ts
// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
try {
const currentToken = await getToken(this.messaging);
if (currentToken) {
console.log('Got FCM device token:', currentToken);
// Saving the Device Token to Cloud Firestore.
const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
await setDoc(tokenRef, { uid: this.auth.currentUser?.uid });
// This will fire when a message is received while the app is in the foreground.
// When the app is in the background, firebase-messaging-sw.js will receive the message instead.
onMessage(this.messaging, (message) => {
console.log(
'New foreground notification from Firebase Messaging!',
message.notification
);
});
} else {
// Need to request permissions to show notifications.
this.requestNotificationsPermissions();
}
} catch(error) {
console.error('Unable to get messaging token.', error);
};
}
但是,此代码最初不起作用。为了让您的应用能够检索设备令牌,用户需要授予您的应用显示通知的权限(Codelab 的下一步)。
请求显示通知的权限
当用户尚未授予您的应用显示通知的权限时,您将不会获得设备令牌。在这种情况下,您调用requestPermission()
方法,该方法将显示一个浏览器对话框,请求此权限(在支持的浏览器中)。
- 返回文件
src/app/services/chat.service.ts
。 - 找到函数
requestNotificationsPermissions
。 - 将整个函数替换为以下代码。
聊天服务.ts
// Requests permissions to show notifications.
requestNotificationsPermissions = async () => {
console.log('Requesting notifications permission...');
const permission = await Notification.requestPermission();
if (permission === 'granted') {
console.log('Notification permission granted.');
// Notification permission granted.
await this.saveMessagingDeviceToken();
} else {
console.log('Unable to get permission to notify.');
}
}
获取您的设备令牌
- 如果您的应用程序仍在运行,请在浏览器中刷新您的应用程序。否则,请在命令行上运行
firebase emulators:start
以开始从http://localhost:5000提供应用程序,然后在浏览器中打开它。 - 登录后,应出现通知权限对话框:
- 单击“允许” 。
- 打开浏览器的 JavaScript 控制台。您应该看到以下消息:
Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
- 复制您的设备令牌。您将在 Codelab 的下一阶段需要它。
向您的设备发送通知
现在您已拥有设备令牌,您可以发送通知。
- 打开Firebase 控制台的“云消息传递”选项卡。
- 点击“新通知”
- 输入通知标题和通知文本。
- 在屏幕右侧,单击“发送测试消息”
- 输入您从浏览器的 JavaScript 控制台复制的设备令牌,然后单击加号 (“+”)
- 点击“测试”
如果您的应用程序位于前台,您将在 JavaScript 控制台中看到通知。
如果您的应用程序在后台运行,则浏览器中应显示一条通知,如下例所示:
13.Cloud Firestore 安全规则
查看数据库安全规则
Cloud Firestore 使用特定的规则语言来定义访问权限、安全性和数据验证。
在本 Codelab 开始时设置 Firebase 项目时,您选择使用“测试模式”默认安全规则,以便不限制对数据存储区的访问。在Firebase 控制台的“数据库”部分的“规则”选项卡中,您可以查看和修改这些规则。
现在,您应该看到默认规则,这些规则不限制对数据存储的访问。这意味着任何用户都可以读取和写入数据存储中的任何集合。
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
您将使用以下规则更新规则以限制事物:
firestore.规则
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Messages:
// - Anyone can read.
// - Authenticated users can add and edit messages.
// - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
// - Deletes are not allowed.
match /messages/{messageId} {
allow read;
allow create, update: if request.auth != null
&& request.resource.data.name == request.auth.token.name
&& (request.resource.data.text is string
&& request.resource.data.text.size() <= 300
|| request.resource.data.imageUrl is string
&& request.resource.data.imageUrl.matches('https?://.*'));
allow delete: if false;
}
// FCM Tokens:
// - Anyone can write their token.
// - Reading list of tokens is not allowed.
match /fcmTokens/{token} {
allow read: if false;
allow write;
}
}
}
安全规则应自动更新到您的模拟器套件。
查看云存储安全规则
Cloud Storage for Firebase 使用特定的规则语言来定义访问权限、安全性和数据验证。
在本 Codelab 开始时设置 Firebase 项目时,您选择使用默认的 Cloud Storage 安全规则,该规则仅允许经过身份验证的用户使用 Cloud Storage。在Firebase 控制台的“存储”部分的“规则”选项卡中,您可以查看和修改规则。您应该会看到默认规则,该规则允许任何登录用户读取和写入存储桶中的任何文件。
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
您将更新规则以执行以下操作:
- 允许每个用户仅写入自己的特定文件夹
- 允许任何人从 Cloud Storage 读取
- 确保上传的文件是图片
- 将可上传的图像大小限制为最大 5 MB
这可以使用以下规则来实现:
存储规则
rules_version = '2';
// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
return request.resource.size < maxSizeMB * 1024 * 1024
&& request.resource.contentType.matches('image/.*');
}
service firebase.storage {
match /b/{bucket}/o {
match /{userId}/{messageId}/{fileName} {
allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
allow read;
}
}
}
14. 使用 Firebase 托管部署您的应用
Firebase 提供托管服务来为您的资产和 Web 应用提供服务。您可以使用 Firebase CLI 将文件部署到 Firebase 托管。在部署之前,您需要在firebase.json
文件中指定应部署哪些本地文件。对于此 Codelab,您已经为您完成了此操作,因为在此 Codelab 期间需要执行此步骤来提供我们的文件。托管设置在hosting
属性下指定:
firebase.json
{
// If you went through the "Cloud Firestore Security Rules" step.
"firestore": {
"rules": "firestore.rules"
},
// If you went through the "Storage Security Rules" step.
"storage": {
"rules": "storage.rules"
},
"hosting": {
"public": "./public"
}
}
这些设置告诉 CLI 您要部署./public
目录中的所有文件 ( "public": "./public"
)。
- 确保您的命令行正在访问应用程序的本地
angularfire-start
目录。 - 通过运行以下命令将文件部署到 Firebase 项目:
ng deploy
然后选择 Firebase 选项,并按照命令行中的提示进行操作。
- 控制台应显示以下内容:
=== Deploying to 'friendlychat-1234'...
i deploying firestore, storage, hosting
i storage: checking storage.rules for compilation errors...
✔ storage: rules file storage.rules compiled successfully
i firestore: checking firestore.rules for compilation errors...
✔ firestore: rules file firestore.rules compiled successfully
i storage: uploading rules storage.rules...
i firestore: uploading rules firestore.rules...
i hosting[friendlychat-1234]: beginning deploy...
i hosting[friendlychat-1234]: found 8 files in ./public
✔ hosting[friendlychat-1234]: file upload complete
✔ storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔ firestore: released rules firestore.rules to cloud.firestore
i hosting[friendlychat-1234]: finalizing version...
✔ hosting[friendlychat-1234]: version finalized
i hosting[friendlychat-1234]: releasing new version...
✔ hosting[friendlychat-1234]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
- 访问您的 Web 应用程序,该应用程序现在已在您自己的两个 Firebase 子域中使用 Firebase 托管完全托管在全球 CDN 上:
-
https://<firebase-projectId>.firebaseapp.com
-
https://<firebase-projectId>.web.app
或者,您可以在命令行中运行firebase open hosting:site
。
请访问文档以详细了解Firebase 托管的工作原理。
转到项目的 Firebase 控制台托管部分,查看有用的托管信息和工具,包括部署历史记录、回滚到应用程序先前版本的功能以及设置自定义域的工作流程。
15. 恭喜!
您已使用 Firebase 构建了实时聊天 Web 应用程序!
您所涵盖的内容
- Firebase 身份验证
- 云Firestore
- 适用于云存储的 Firebase SDK
- Firebase 云消息传递
- Firebase 性能监控
- Firebase 托管