如何为Angular应用配置Auth0？解决initiate_login_uri校验报错问题

你遇到的报错是Auth0后台校验规则不认可本地localhost的HTTPS证书导致的，即使地址带https前缀也会触发校验失败，可通过以下方案解决：

• 方案1：开发阶段留空发起登录URI字段 #

  本地开发时可直接将Auth0控制台「发起登录URI（initiate_login_uri）」字段留空，Auth0会自动使用你配置的「允许回调URL」列表中的地址兜底，不会触发格式校验。
  如果必须填写该字段，可先填写根路径https://localhost:4200完成控制台配置，再在Angular代码中动态拼接语言路径，修改Auth0初始化配置：

  // Angular app.module.ts 中的Auth0初始化代码
  AuthModule.forRoot({
    domain: 'YOUR_AUTH0_DOMAIN',
    clientId: 'YOUR_AUTH0_CLIENT_ID',
    authorizationParams: {
      redirect_uri: `${window.location.origin}/en/signin`
    }
  })
  

• 方案2：修改本地hosts映射通过校验 #

  在本地hosts文件添加自定义域名映射：

  127.0.0.1 dev.yourapp.local
  

  调整Angular本地启动配置，允许该域名访问，之后将https://dev.yourapp.local:4200/en/signin填入发起登录URI字段，即可通过校验。

• 方案3：临时关闭本地HTTPS（仅测试用） #

  本地开发时可暂时关闭Angular服务的SSL，启动命令添加参数：

  ng serve --ssl false
  

  同时将Auth0控制台所有URI配置改为HTTP前缀的http://localhost:4200/en/signin，即可绕过HTTPS校验规则。

报错原文：错误！Payload校验失败：属性initiate_login_uri（发起登录URI，必须为HTTPS）未通过absolute-https-uri-or-empty格式校验：https://localhost:4200/en/signin

内容的提问来源于stack exchange，提问作者mena talla mostafa