如何用我的自定义域 myApp.com 替换 myApp-123.firebaseapp.com [英] How to replace the myApp-123.firebaseapp.com with my custom domain myApp.com
问题描述
我正在使用 Firebase Auth signInWithPopup() 这绝对很棒.但初始配置时，弹出窗口显示:
I am using Firebase Auth signInWithPopup() which is absolutely great. But
when initially configured, the popup reads:
选择一个帐户以继续访问 myApp-123.firebaseapp.com
Choose an account to continue to myApp-123.firebaseapp.com
我真的很想读:
选择一个帐户以继续访问 myApp.com
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.
此工作流程(和文档)有点分散，因为您必须同时调整 Google Cloud Platform (GCP) 凭据和 Firebase 身份验证.此工作流程的每一方都提供了文档，但我找不到涵盖整个工作流程的文档来进行此替换.
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.
我首先为 OAuth 客户端调整了我的 GCP 凭据:
I first adjusted my GCP credentials for the OAuth Client:
转到 GCP 控制台 >APIs &服务 >凭据页面(https://console.cloud.google.com/apis/credentials?project=_ 并选择您的项目)
在页面底部，找到OAuth 2.0 客户端 ID".应该有一个标题为Web 客户端(由 Google 服务自动创建)"的条目
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)"
点击页面右侧的编辑图标(钢笔)，打开配置页面.
To the right side of page click on the edit icon (pen), which opens the configuration page.
在Authorized JavaScript origins"下，您应该会看到您的 yourFirebaseApp.firebaseapp.com 域.点击+添加URI"并添加您的自定义 URI.这应该是一个https"域，所以使用 https://myApp.com
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
在授权的重定向 URI"下，您应该看到 https://yourFirebaseApp.firebaseapp.com/__/auth/handler.(尾部的 __/auth/handler 位是 Firebase 提供的身份验证回调).点击+添加URI"并添加您的域，以 __/auth/handler 结尾.(例如:https://myApp.com/__/auth/handler)
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)
点击保存
转到 OAuth 同意屏幕(https://console.cloud.google.com/apis/credentials/consent/edit?project=_).将您的自定义域添加到应用程序主页链接"，并填写应用程序名称"和徽标"和应用程序隐私政策链接"为您的应用提供自定义值.
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 控制台设置
然后，您需要将自定义域添加到 Firebase 身份验证授权域列表:
Firebase Console Setup
Then, you'll need to add your custom domain to the Firebase auth authorized domain list:
转到 Firebase 控制台 >认证登录方法页面(https://console.firebase.google.com/project///authentication/providers 并选择您的项目)
在授权域"下您应该会看到 localhost 和默认的 yourFirebaseApp.firebaseapp.com 域.点击添加域"并输入您的自定义域名，然后点击添加.
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.
网络应用设置
您可能会记得从 firebase 项目复制并粘贴到您编译和部署 Web 应用程序的代码中的代码块.(有些人使用托管默认 init.js 脚本 - 如果你这样做，返回并使用配置片段设置您的应用)
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)
找到authDomain"字段，并将其更改为您的自定义域，然后重新部署.
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屋！
