Angular / Amplify / Cognito 로그인 페이지에서 "Sign in with AWS"버튼을 제거하는 방법은 무엇입니까?
사용자 68288
현재 사용자가 내 웹 사이트에 로그인 할 수 있도록 Angular / Congito / Amplify를 사용하고 있습니다. 기능은 완벽하게 작동하지만 어쨌든 디자인 (색상 / 버튼 등)을 편집 할 수 없습니다.
현재 내 로그인 페이지는 다음과 같습니다.
내 목표는 "AWS로 로그인"버튼을 제거하고 주황색 텍스트와 주황색 로그인 배경 버튼 색상의 색 구성표를 변경하는 것입니다.
아래는 내 app.component.html입니다.
<app-header *ngIf="authState === 'signedin'"></app-header><br>
<amplify-authenticator *ngIf="authState !== 'signedin'"></amplify-authenticator>
<router-outlet *ngIf="authState === 'signedin'"></router-outlet>
<app-footer *ngIf="authState === 'signedin'"></app-footer>이것은 내 app.component.css입니다 (여기서 인증을 중앙에 배치 할 수있었습니다. 여기에 추가 한 색상은 아무것도하지 않습니다.
amplify-authenticator {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
height: 100vh;
--button-background-color: #00D5A1;
background-color: #0000;
}angular-master \ node_modules @ aws-amplify \ ui \ src \ Theme.css로 이동하여 테마를 찾을 수 있습니다.
그러나 그것은 도움이되지 않았습니다. 어떤 조언이라도 주시면 감사하겠습니다.
사용자 1958988
방금이 문제를 해결했습니다.
"Sign in with AWS"버튼은 연합 구성 요소에서로드됩니다.
해결책은 빈 div로 증폭 로그인의 슬롯을 재정의하는 것입니다.
예 :
<amplify-authenticator
*ngIf="authState !== 'signedin'">
<amplify-sign-in slot="sign-in" usernameAlias="phone_number" hideSignUp>
<div slot="federated-buttons"></div>
</amplify-sign-in>
</amplify-authenticator>
<div *ngIf="authState === 'signedin' && user" class="App">
<amplify-sign-out></amplify-sign-out>
<div>Hello, {{user.username}}</div>
<!-- This is where you application template code goes -->
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
몇 마디 만하겠습니다