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

问题描述

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

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 的示例？

标签： angulartypescriptamazon-web-servicesamazon-cognitoaws-amplify

需要设置登录/注册控件的样式。怎么做？

如果您使用的是最新的 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/

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

问题描述

解决方案

推荐阅读