如何用我的自定义域myApp.com替换myApp-123.firebaseapp.com [英] How to replace the myApp-123.firebaseapp.com with my custom domain myApp.com

问题描述

我正在使用Firebase Auth signInWithPopup()，这绝对好.但 最初配置时，弹出窗口显示为:

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

我真的很想读:

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

如何使弹出窗口显示我自己的域?

解决方案

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

此工作流程(和文档)有些混乱，因为您必须同时调整Google Cloud Platform(GCP)凭据和Firebase身份验证.该工作流的各个方面都提供了文档，但是我找不到涵盖整个工作流的文档来进行替换.

GCP控制台设置

我首先为OAuth客户端调整了我的GCP凭据:

1. 转到GCP控制台> API和服务>凭据页面( https://console.cloud.google.com/apis/credentials? project = _并选择您的项目)

2. 在页面底部，找到"OAuth 2.0客户端ID".应该有一个标题为"Web客户端(由Google Service自动创建)"的条目

3. 在页面右侧，单击编辑图标(笔)，这将打开配置页面.

4. 在"Authorized JavaScript origins"下，您应该看到您的yourFirebaseApp.firebaseapp.com域.点击"+添加URI"并添加您的自定义URI.这应该是"https"域，因此请使用https://myApp.com

5. 在授权重定向URI"下，您应该看到https://yourFirebaseApp.firebaseapp.com/__/auth/handler. (尾部的__/auth/handler位是Firebase提供的auth回调).点击"+添加URI"并添加您的域，并以__/auth/handler结尾. (例如:https://myApp.com/__/auth/handler)

6. 点击保存"

7. 转到OAuth同意屏幕( https ://console.cloud.google.com/apis/credentials/consent/edit?project = _ ).将您的自定义域添加到应用程序首页链接"，然后在应用程序名称"中填写和徽标"，以及应用程序隐私权政策链接"，为您的应用添加自定义值.

Firebase控制台设置

然后，您需要将自定义域添加到Firebase auth授权域列表中:

1. 转到Firebase控制台>验证>登录方法页面( https://console.firebase.google.com/项目/_/身份验证/提供者，然后选择您的项目)

2. 在授权域"下您应该看到localhost和默认的yourFirebaseApp.firebaseapp.com域.点击添加域"并输入您的自定义域名，然后单击添加.

网络应用设置

您可能会记得从Firebase项目复制并粘贴到用于编译和部署Web App的代码中的代码块. (某些人使用托管默认init.js脚本-如果您这样做，返回并使用配置代码段设置您的应用)

找到"authDomain"代码段中的字段"，然后将其更改为您的自定义域，然后重新部署.

此程序对我和我的项目都有效，我已发布了此程序，希望可以从其他执行此操作或类似操作的反馈中完善这些说明.

I am using Firebase Auth signInWithPopup() which is absolutely great. But when initially configured, the popup reads:

Choose an account to continue to myApp-123.firebaseapp.com

I would really like it to read:

Choose an account to continue to myApp.com

How can I make the popup show my own domain?

解决方案

In my solution that follows I should say that the steps I followed worked. It is possible that I did something that it not absolutely required, but to my knowledge and at this time, I have not broken anything.

This workflow (and the documentation) is a bit broken up because you must adjust both your Google Cloud Platform (GCP) credentials and the Firebase authentication. Documentation was provided by each side of this workflow but I was not able to find a document that covered the entire workflow to make this substitution.

GCP Console Setup

I first adjusted my GCP credentials for the OAuth Client:

1. Go to the GCP console > APIs & Services > Credentials page (https://console.cloud.google.com/apis/credentials?project=_ and select your project)

2. At the bottom of the page, find "OAuth 2.0 client IDs". There should be an entry titled "Web client (auto created by Google Service)"

3. To the right side of page click on the edit icon (pen), which opens the configuration page.

4. Under "Authorized JavaScript origins", you should see your yourFirebaseApp.firebaseapp.com domain. Click "+ Add URI" and add your custom URI. This should be an "https" domain, so use https://myApp.com

5. Under "Authorized redirect URIs", you should see https://yourFirebaseApp.firebaseapp.com/__/auth/handler. (The __/auth/handler bit on the tail is the auth callback that Firebase provides). Click "+ Add URI" and add your domain, with __/auth/handler at the end. (For example: https://myApp.com/__/auth/handler)

6. Click Save

7. Go to the OAuth Consent Screen (https://console.cloud.google.com/apis/credentials/consent/edit?project=_). Add your custom domain to "Application Homepage link", and fill in the "Application Name" and "Logo", and "Application Privacy Policy link" with custom values for your app.

Firebase Console Setup

Then, you'll need to add your custom domain to the Firebase auth authorized domain list:

1. Go to the Firebase Console > Authentication > Sign-in Methods page (https://console.firebase.google.com/project/_/authentication/providers and select your project)

2. Under "Authorized Domains" you should see localhost and the default yourFirebaseApp.firebaseapp.com domain. Click the "Add Domain" and enter your custom domain name, then click add.

Web App Setup

You will likely remember the block of code that you copied from your firebase project and pasted into the code from which you compile and deploy your Web App. (Some people use the hosting default init.js script - if you do, go back and setup your app using the config snippet instead)

Find the "authDomain" field in the code snippet, and change it to your custom domain, then re-deploy.

This procedure worked for me and my project, I have posted this in the hopes that these instructions may be refined via feedback from others performing this or similar operations.

这篇关于如何用我的自定义域myApp.com替换myApp-123.firebaseapp.com的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！