域名申请和配置

当我们的ICP项目完成上到主网后，ICP会提供一个官方的初始域名地址，但是那个域名地址包含CanisterId比较难记。为了让项目更加容易推广和熟知，还需要申请一个简单的域名。

购买域名

ICP官方文档给出的DNS设置里，有Namecheap、GoDaddy、 Amazon Route 53三家，其中Namecheap尤为支持度最好，价格上差别不大，故我们使用Namecheap。需要注意的是支付时需要银行卡信用卡支付或者Paypal支付。

DNS设置

购买完域名后，进入Dashboard可以看到我们的域名列表，点击Manage-Advanced DNS，进入设置DNS页面。在这里我们需要设置三条记录

1. ALIAS：Host设置为 @ ，value设置为{自定义域名地址}.icp1.io
2. CNAME: Host设置为_acme-challenge, value设置为_acme-challenge.{自定义域名地址}.icp2.io
3. TXT: Host设置为_canister-id， value设置为项目前端canister的id

项目配置

我们还需要在ICP的项目文件中，进行配置登记，好让我们的域名注册在ICP链的边界节点来进行流量转发、以及跨域配置，。我们需要在前端项目的assets下，创建相关文件。配置完成后，重新部署前端项目几分钟后即可通过域名访问。

创建.ic-assets.json文件，用于跨域配置和打包时声明文件不要被忽略

[
    {
        "match": ".well-known",
        "ignore": false
    },
    {
        "match": ".well-known/ii-alternative-origins",
        "headers": {
          "Access-Control-Allow-Origin": "*",
          "Content-Type": "application/json"
        },
        "ignore": false
    }
  ]

创建.well-known目录，并创建ic-domains文件，并在文件中添加购买的域名列表

身份同源认证

ICP的互联网身份是根据主机号进行分发的，所以当我们仅设置好上述流程后会发现，我们通过域名和ICP默认地址进去后II认证给的身份不同。当我们进行项目域名更换之类的会导致我们用户数据丢失或者无法绑定。所以需要设置同源认证。

配置ii源列表

在前端项目/src/assets/.well-know目录下创建ii-alternative-origins 文件，并输入下面内容,将domain换成你自己的域名。

{
  "alternativeOrigins": [
    "https://{domain1}",
    "https://{domain2}"
  ]
}

js登陆设置认证参数

当我们登陆时，需要指定当前应用的认证源是什么，如果没有进行上一步操作，则通过自定义域名访问时将不支持自定义域名的身份发放。

import { AuthClient } from '@dfinity/auth-client'
import { HttpAgent } from '@dfinity/agent'
const _authClient = await AuthClient.create({idleOptions:{ disableIdle: true,}})
_authClient.login({
  {
    derivationOrigin: "https://{your frontend canister id}.icp0.io",
    identityProvider: 'https://identity.ic0.app/#authorize',
  }
  onSuccess: () => console.log("login success"),
})

完成上述操作后，更新部署前端项目后，进行II登陆最终效果

参考

域名DNS配置项目配置指定认证源II认证