소개

이 페이지에서는 Amplify 로그인 화면의 초기 항목을 변경하는 방법을 Document를 보면서 구현했습니다.

일본어화 대응으로부터의 수정 내용은 여기

개발 환경

Windows 10

nodist(node의 버전 관리)

node 12.13.0

VSCode

Amptify 로그인 화면을 변경하고 싶습니다!

전제로

기본적으로 인증 기능을 만들면 위 이미지의 항목이 제공됩니다.
개인적으로는 Cognito 로 전화 번호는 관리하고 싶지 않다고 생각했기 때문에… 이 전화 번호의 항목을 설정할 수 없게 하는 것은 가능한가? 라고 생각한 것이 일의 발단이었습니다.

사용자 지정할 수 있는 방법이 있는지 확인하는 중 참조를 찾았습니다.

내용을 읽는 한 모든 위치에 준비된 화면을 그릴 수있는 태그가있는 것 같습니다. 옵션을 설정하면 다양한 수정이 가능합니다.

그래서 지금까지 일본어화까지 꾸준히 다녀온 프로젝트에 손을 넣어 갑니다.

인증 화면 사용자 정의를 위한 페이지 작성

src/views/SampleAuth.vue

<template>
  <amplify-authenticator v-bind:authConfig="authConfig"></amplify-authenticator>
</template>
<script>
export default {
  name: "sampleAuth",
  data() {
    return {
      authConfig: {
        signUpConfig: {
          hiddenDefaults: ["phone_number"]
        }
      }
    };
  }
};
</script>

이번 항목을 변경하고 싶기 때문에 커스터마이즈 페이지를 준비합니다.
참조에 의하면 amplify-authenticator 태그를 쓰는 것만으로, 인증 기능 한가지의 기능을 준비해 주는 것 같습니다.
여기를 사용하면 authConfig 내에서 각 페이지에 대한 속성을 설정할 수있는 것 같습니다.
이번에는 가입할 때의 설정값을 수정하고 싶으므로 signUpConfig에 숨기는 설정을 추가했습니다.

경로 변경

(before) src/router/index.js

  {
    path: "/auth",
    name: "Authenticator",
    component: components.Authenticator
  }

원래의 소스 코드는 component 에 「components.Authenticator」라고 쓰는 것으로, 디폴트의 인증 화면을 렌더링 지정했습니다.
이번에는 맞춤 페이지를 준비했으므로 여기를 호출하도록 수정합니다.

(after) src/router/index.js

import SampleAuth from "../views/SampleAuth";
// ・・・（中略）・・・
  {
    path: "/auth",
    name: "sampleAuth",
    component: SampleAuth
  }

화면을 그려보세요

서버를 시작하고 확인해 보면 전화 번호 항목이 사라졌습니다.
유저 등록도 할 수 있는 것을 확인할 수 있었으므로 hiddenDefaults 로 숨기는 것만으로 문제 없을 것 같습니다.
쉽게 항목이 생겼기 때문에 놀랐습니다.

번외편(로그인하면 로그아웃하고 싶다)

src/components/HelloWorld.vue

<amplify-sign-out></amplify-sign-out>

시도에 위 태그를 페이지에 추가해 보았습니다.


로그아웃 버튼도 표시되어 기능 자체도 사용할 수 있게 되어 있었습니다. (슈퍼 간단!)

끝에

지금까지의 소스를 보는 것만으로는, 수정가능한지 몰랐지만, 조사해 보면 레퍼런스가 굉장히 확실하고 있어, 어려움 없이 조정을 할 수 있었습니다.

영어가 정말 서투르지만, 우선은 레퍼런스를 보는 것을 실천해 가고 싶었습니다.