如何使用我的自定义域myApp.com替换myApp-123.firebaseapp.com

Question

我正在使用Firebase Auth signInWithPopup(),这绝对是非常棒的.但是在最初配置时,弹出窗口显示:

选择一个帐户以继续访问myApp-123.firebaseapp.com

我真的很想读它:

选择一个帐户以继续访问myApp.com

如何让弹出窗口显示我自己的域名？

Answer 1

在我的解决方案中,我应该说我遵循的步骤有效.我可能做了一些并非绝对必要的事情,但据我所知,此时我还没有做任何事情.

此工作流程(和文档)有点分散,因为您必须同时调整Google Cloud Platform(GCP)凭据和Firebase身份验证.文档由此工作流程的每一方提供,但我无法找到涵盖整个工作流程的文档来进行此替换.

我首先调整了我的GCP凭据1.) https://console.cloud.google.com //至少对我来说,这导致我进入我的活跃GCP项目.

2.)使用gcp搜索字段并键入"凭据",这会将您带到项目的API Manager/Credentials.

3.)"OAuth 2.0客户端ID"页面标题的底部,我只有一个条目,如果你有多个??? 不知道该告诉你什么,但要弄清楚哪一个你感兴趣.

4.)在页面右侧单击编辑图标(笔),您将获得一个新页面奖励...

3.)在标题为"授权的JavaScript来源"的列标题下,在占位符为"http // www.example.com"的空白字段中添加自定义URI.你可能会有一个"https"域名,所以我会输入https // myApp.com

4.)在页面下方,您应该看到"授权重定向URI",在此下面是" https://yourFirebaseApp.firebaseapp.com/ / auth/handler "字段.尾部的"/auth/handler"位是模糊指令上引用的auth回调.

5.)在下面的空白字段中我添加了" https://myApp.com/__/auth/handler "

我相信这是本次交易的GCP方面.

火灾说明

1.)打开项目的firebase控制台,然后打开"身份验证"页面.然后导航到"登录方法"页面,例如"身份验证/提供者"应该位于项目uri的尾部.

2.)在"授权域"下,您应该看到"本地主机"...默认和"yourFirebaseApp.firebaseapp.com"...默认,单击"添加域"按钮,您将获得一个空字段,其中您需要输入自定义域名.最后点击"添加"按钮.在我的情况下经过两三次尝试后,这导致了"myApp.com"......自定义(在此过程中出现了某种故障,需要我重新启动一两次).

最后,在您完成此交易时,您需要修改您的代码.

您可能会记住从firebase项目中复制并粘贴到编译和部署Web App的代码中的代码块.我将src/environments/environment.prod用于此firebase配置数据.您现在可以将"authDomain"值更改为自定义域,执行生产构建并将其部署到firebase.

这个程序适用于我和我的项目,我发布了这个程序,希望这些说明可以通过执行此类或类似操作的其他人的反馈来改进.

Answer 2

我问了firebase支持并得到了以下回复.斜体项目是我的补充.这与Done的答案大致相同,但具有自定义域.您无需在Firebase上托管您的应用.

-

嗨Jayen,

感谢您与我们联系.我很乐意为您提供帮助.

要在OAuth许可屏幕中更新firebase-project-id.firebaseapp.com,您需要具有Firebase托管的自定义域(Firebase控制台>托管>连接域).这是因为https://firebase-project-id.firebaseapp.com/__/auth/handler由Firebase Hosting托管.您需要将自定义域指向firebase-project-id.firebaseapp.com.

连接自定义域时,如果您未在firebase上托管应用程序,请使用新的子域(例如app.yourdomain.com),不要重定向它.Firebase将提示您添加DNS条目并自动获取SSL证书.

将自定义域连接到Firebase项目后,您还应该按照以下步骤操作:

1. 转到Firebase控制台>选择项目>身份验证>登录方法> Facebook>复制"完成设置,将此OAuth重定向URI添加到您的Facebook应用配置"下的URL.

   • 它看起来像https://firebase-project-id.firebaseapp.com/__/auth/handler

2. 用您的自定义域替换项目ID.它看起来像:https://yourdomain.com/__/auth/handler

3. 转到GCP控制台>选择项目> API Manager>凭据>将#2中的链接添加到"授权重定向URI"

4. 然后确保在您的应用配置中使用yourdomain.com作为authDomain而不是firebase-project-id.firebaseapp.com

   firebase.initializeApp({
       apiKey: ....,
       authDomain: 'yourdomain.com',
        ...
   });
   

如果您对此有任何其他疑问,请与我们联系.

问候,

埃

-

在我的情况下,yourdomain.com是我托管我的网站的地方,所以我在app.yourdomain.com使用它.

• Firebase托管网址
• 处理程序网址:https://app.yourdomain.com/__/auth/handler
• GCP凭证
  • 在OAuth 2.0客户端ID下选择正确的一个.客户端ID将与您在代码中配置Firebase的客户端ID相匹配.
• authDomain: "app.yourdomain.com"