[flutter web] 通过 cloudflare worker 在国内用上 firebase

701 阅读1分钟

对独立开发来说,firebase 这样的服务能节省很多时间和精力,但由于众所周知的原因,国内无法访问 firebase。

本文通过 fork firebase flutter sdk 库进行魔改,将 firebase 域名更改为 cloudflare worker 的反向代理,实现国内使用 firebase 服务。

1. fork firebase flutter sdk 代码仓库

代码库为 github.com/firebase/fl…

需要修改的内容有两处:

第一处在 packages\firebase_auth\firebase_auth_web\lib\src\interop\auth_interop.dart

增加 dart 和 js 交互的 interop 文件中 apiHost 和 tokenApiHost 的定义

@JS('Config')

@staticInterop

abstract class Config {}



extension ConfigExtension on Config {

  external JSString get apiHost;

  external set apiHost(JSString s);



  external JSString get tokenApiHost;

  external set tokenApiHost(JSString s);

}

Dart

第二处在 packages\firebase_auth\firebase_auth_web\lib\src\interop\auth.dart

和上面类似,在 dart 中声明这两个变量

  set languageCode(String? s) {

    jsObject.languageCode = s?.toJS;

  }



  String get configApiHost => jsObject.config.apiHost.toDart;



  set configApiHost(String s) {

    jsObject.config.apiHost = s.toJS;

  }

  

  String get configTokenHost => jsObject.config.tokenApiHost.toDart;

  set configTokenHost(String s) {

    jsObject.config.tokenApiHost = s.toJS;

  }

Dart

修改后,提交代码到 GitHub。

2. 覆盖 firebase 依赖

先增加原有依赖:

dependencies:

  firebase_auth_web: ^5.14.2

YAML

再增加覆盖依赖:

dependency_overrides:

  firebase_auth_web:

    git:

      url: https://github.com/p1gd0g/flutterfire.git

      path: packages/firebase_auth/firebase_auth_web

YAML

表明在打包时使用自定义的依赖。添加依赖后最好进行一次 flutter clean。

3. 修改域名,指向 cloudflare worker

    await Firebase.initializeApp(

      options: DefaultFirebaseOptions.currentPlatform,

    );



    FirebaseAuthWeb.instance.delegate.configApiHost = 'auth.xxx.com';

    FirebaseAuthWeb.instance.delegate.configTokenHost = 'token.xxx.com';

Dart

在 firebase 初始化后,手动修改域名。这样 firebase 连接就会导向 cloudflare worker。

4. 创建 cloudflare worker 实现反向代理

其中一个 worker 代码如下:

const API_HOST = "identitytoolkit.googleapis.com"



export default {

  async fetch(request, env, ctx) {

    let url = new URL(request.url);

    url.host = API_HOST;

    let forward = new Request(request);

    return await fetch(url, forward);

  } 

};

JavaScript

总结

通过 firebase auth 注册成功后,就可以在控制台看到账号了。

不太理解,为啥国内大厂都不愿意做类似产品呢?