通过XMLHttpRequest请求Firebase Dynamic URL并返回缩短URL

正巧，我手上有一个网站因为URL太过长，需要到Firebase Dynamic URL 来解决这个问题.

我本身不是太熟悉 JavaScript ，所以见谅

此次网站需要缩短的URL是动态的，需要用户输入内容后产生的一个URL，该URL的长度太长，需要 Firebase Dynamic URL 缩短，此次获取 Firebase Dynamic URL 的思路为:

1. 用户输入内容后 POST 到 PHP

2. PHP 处理后输出一个带刚才完整内容的URL，同时设置任意variable 指向这个完整的URL. (假设用户 POST 的内容是 $username ，我输出的 URL 是 https://abc123.com/?username=$username ，则可以设置 $fullurl=https://abc123.com/?username=$username)

3. 通过客户端的XMLHttpRequest 请求 Firebase API 生成缩短后的URL，再经过 JSON.Parse 解析，通过 document.getElementById 写入到对应的HTML元素ID里面，再删除生成按钮

前面也说了，我本人不是太熟悉 JavaScript ，所以这次的任务对我来说是一件蛮难的事情.

1. 前往 Firebase Console 创建 Project

2. 创建后，进入 Dynamic URL 部分

3. 可选择使用自带 page.link 后缀的域名或者接入自己的域名

4. 可设置Allowlist URL Pattern ，建议设置，防止被恶意刷API，只允许自己的域名

5. 打开 Authentication，点击 Get Start 开通，这里我选择开通后不需要设置任何东西，如果你有需要可以按需设置，这一步是为了生成 Web Api Key

6. 找到你的 Project ，右边有个小齿轮，点击 Project Settings

7. 找到General - Web API Key ，复制下来

8. 这里我使用 XMLHttpRequest 来请求，具体思路可以看上面，代码大概是这样：

我这里用了 shortlinkbutton 为生成button的ID，<?php echo $fullurl; ?>：PHP Variable生成对的动态URL，shortlink为一个<p> 的ID，只要点击了生成按钮 ，XMLHttpRequest 就会把对的动态URLPOST到Firebase API，获取到结果后通过 JSON.parse 解析shortLink并写入对应ID的<p>.同时也在 console log XMLHttpRequest的 HTTP状态码 + Results.

<script>

function loadDoc() {

var xhr = new XMLHttpRequest();

var url = "https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=UR_KEY";

xhr.open("POST", url);

xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () {

if (xhr.readyState === 4) {

const obj = JSON.parse(xhr.responseText);

const myobj = document.getElementById("shortlinkbutton");

myobj.remove();

document.getElementById("shortlink").innerHTML = obj.shortLink;

console.log(xhr.status);

console.log(xhr.responseText);

}};

var data = `{

"dynamicLinkInfo": {

"domainUriPrefix": "your URL prefix",

"link": "<?php echo $fullurl; ?>"

}

}`;

xhr.send(data);

}

</script>