angular - 自定义 AWS Amplify cognito 登录/注册组件？

Question

在教程中 - https://medium.com/@nickwang_58849/i-got-the-following-error-after-following-the-steps-82757cfaf9f0 ，它使用npm包@aws-amplify/auth的amplify-authenticator来登录和注册。

auth.component.html只有一行，

<amplify-authenticator></amplify-authenticator>

auth.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.css']
})
export class AuthComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

但是，我需要自定义登录(注册时需要添加一些必需的属性。并且需要设计登录/注册控件的样式)。怎么做？

是否有用户编写登录 UI 并仅调用身份验证(通过放大？)登录 Cognito 的示例？

Answer 1

need to style the login/register controls. How to do it?

如果您使用的是最新的 Amplify 模块(2020 年 4 月)，您可以使用 CSS 自定义外观:

:root {
  --amplify-primary-color: #008000;
  --amplify-primary-tint: #0000FF; 
  --amplify-primary-shade: #008000;
}

您可以自定义文本:

<AmplifySignIn headerText="My Custom Sign In Header" slot="sign-in" />
<AmplifySignUp headerText="My Customer Sign Up Header" slot="sign-up" />

文档:https://aws-amplify.github.io/docs/js/ui-components#customization

教程从头开始:https://aws.amazon.com/blogs/mobile/amplify-framework-announces-new-rearchitected-ui-component-and-modular-javascript-libraries/

迁移到最新的 UI 包: https://aws-amplify.github.io/docs/js/ui-components#migration-guide