如何将Ionic应用的外部API请求迁移至Firebase Cloud Functions

1. 先搞定Cloud Functions的本地环境 #

首先确认你本地装了Firebase CLI，没装的话打开终端跑这个命令：

npm install -g firebase-tools

接着登录你的Firebase账号：

firebase login

如果还没在项目里初始化过Cloud Functions，就在项目根目录执行：

firebase init functions

跟着提示选你对应的Firebase项目，选TypeScript/JavaScript（看你项目用啥），一路确认完成初始化就行。

2. 把grabRAW逻辑搬到Cloud Function里 #

打开functions/src/index.ts（JS的话是index.js），把下面的代码加进去：

import * as functions from "firebase-functions";
import * as admin from "firebase-admin";
admin.initializeApp();

// 先把原来的grabID逻辑移过来，这里假设它是调用外部API的操作
async function grabID(email: string) {
  // 替换成你原来grabID里请求外部API的代码，比如用node-fetch
  const response = await fetch(`你的外部API地址?email=${email}`);
  return await response.json();
}

export const grabRAW = functions.https.onCall(async (data, context) => {
  // 验证用户是否已登录（毕竟你现有应用用了Firebase登录）
  if (!context.auth) {
    throw new functions.https.HttpsError(
      "unauthenticated",
      "只有登录用户才能调用这个函数"
    );
  }

  const { email } = data;
  if (!email) {
    throw new functions.https.HttpsError(
      "invalid-argument",
      "必须传入邮箱参数"
    );
  }

  try {
    const idData = await grabID(email);
    const idList = idData.data;
    const id = idList[0].id;
    // 这里把你原来grabRAW函数里剩下的逻辑全搬过来
    // ...

    // 返回最终处理好的数据
    return { /* 你的返回结果 */ };
  } catch (error) {
    throw new functions.https.HttpsError(
      "internal",
      "处理过程出错了",
      error.message
    );
  }
});

要是原来的grabID用了外部请求，记得在functions目录下装依赖，比如node-fetch：

cd functions
npm install node-fetch @types/node-fetch --save

3. 部署Cloud Function #

写完代码后，部署到Firebase：

firebase deploy --only functions

部署完Firebase会给你函数信息，不过我们用的是onCall类型，直接用Firebase SDK调用就行，不用记URL。

4. 修改Ionic的Provider，调用Cloud Function #

打开你的Provider文件（比如your-provider.ts），把原来的grabRAW换成调用Cloud Function的版本：

先确保项目装了@angular/fire或者firebase SDK，没装的话：

npm install firebase @angular/fire

然后在Provider里改代码：

import { Injectable } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/compat/functions';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class YourProvider {
  constructor(private fns: AngularFireFunctions) { }

  // 替换原来的grabRAW函数
  grabRAW(email: string): Observable<any> {
    const callable = this.fns.httpsCallable('grabRAW');
    return callable({ email });
  }
}

这样原来调用this.yourProvider.grabRAW(email)的地方完全不用改，直接就能用新的Cloud Function版本。

5. 测试验证 #

1. 推荐先用本地模拟器测，跑这个命令启动模拟器：

firebase emulators:start --only functions

然后在Ionic的app.module.ts里配置用本地模拟器（在AngularFire配置里加functions: { emulatorPort: 5001 }），测试函数逻辑是否正常。
2. 部署到线上后，测试登录用户调用是否能拿到正确结果，同时确认未登录用户调用会被拒绝。

内容的提问来源于stack exchange，提问作者Omar Hussein