aws-amplify-vue로 만든 인증 화면에서 SignUp을 끄지 않도록 합니다.

배경



AWS Amplify + AppSync + Vue를 사용하여 폭넓고 현대적인 프런트 엔드를 개발할 수 있다는 소문을 들었고 실제로 시도해 보았을 때 매우 어색한 곳에서 망설이기 때문에 그 해결책을 설명합니다.
덧붙여 본래의 취지인 「폭속으로 모던한 프런트 엔드 개발」이라고 하는 점에 대해서는, 확실히 혁명적인 효과를 느꼈으므로, 향후도 계속해 심해지어 가고 싶습니다. 특히 AppSync는 꽤 미래를 느꼈습니다.
Amplify + AppSync + Vue로 구체적인 프런트 엔드를 구축하는 방법을 알고 싶다면 다음 기사를 읽는 것이 좋습니다. 나도 참고로 했습니다.
htps : // 이 m / 나카야마_cw / ms / 6d3514b51c5fbf9 ba 450
htps : // 코 m / 슌 p / ms / d491 d 푹 d570f66f990

가입할 수 없게 하고 싶다…!



위의 기사를 참고로 Amplify로부터 환경 구축해, 인증을 Cognito, API를 AppSync로 작성했습니다. (여기까지 정말 순식간에 할 수 있습니다.)
백엔드 부분은 Amplify Console 덕분에 대부분이 자동으로 할 수 있습니다. 과연 프런트 엔드 부분은 스스로 쓰지 않으면 안됩니다만, 그래도 aws-amplify-vue 라는 패키지가 준비되어 있어 이것을 사용하는 것으로 귀찮은 로그인 화면등의 작성을 스킵 할 수 있습니다.

그렇다면 이 패키지를 즉시 사용하여 로그인 기능을 구현했습니다. 구체적인 방법은 아래의 기사가 참고가 됩니다.
htps : // 코 m / 마니 쥬 / ms / d33d64f0b729630d0c3d



오, 쉽게 할 수있었습니다! 로그인뿐만 아니라 비밀번호 재설정 기능과 계정 생성 기능까지 구성 요소를 로드하고 배치하는 것만으로 순식간에 할 수 있습니다.


가입 화면도 이대로. (로그인 화면의 Create account에서 전환)
필요한 항목의 추가 및 삭제도 파라미터 설정에 따라 변경할 수 있습니다. (구체적인 설정 내용은 이하 문서를 참고할 것.)
htps : // 아 ws-아 mpぃfy. 기주 b. 이오 / 도 cs / js / ゔ 에 # 아테 펜치 카치 온 코 m 포넨 ts

그런데, 자신이 만들고 있는 사이트는 실로 세세한 것이므로, 일반 유저에게 마음대로 등록되는 것도 곤란합니다. Cognito는 "관리자 만 사용자 등록 가능"설정이므로 사이트에서도 가입을 할 수 없도록해야합니다.

하지만… 위의 문서를 아무리 읽어도 가입을 하지 않도록 하는 설정이 쓰여져 있지 않습니다… orz
가입 화면에서 항목 전부 지우거나, signUpConfig: null 라든지 해봤지만 전혀 안 되었습니다.

결론



GitHub의 Issue에 썼습니다.
htps : // 기주 b. 코 m / 아 ws - 아 mp ぃ fy / 아 mp ぃ fy js / 이스에 s / 1993
export default {
  ...
  data: function(){
    return {
      authConfig: {
        signInConfig: {
          isSignUpDisplayed : false  // ← コレ!!
        }
      }
    }
  }
}



사라졌다!
("No account? Create account"링크가.)

이 파라미터, 수요는 많다고 생각합니다만, 왠지 위의 문서에는 아직 실려 있지 않습니다.
이 기사가 나와 같이 고민하고 있는 분의 참고가 되면 다행입니다.

좋은 웹페이지 즐겨찾기