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"링크가.)
이 파라미터, 수요는 많다고 생각합니다만, 왠지 위의 문서에는 아직 실려 있지 않습니다.
이 기사가 나와 같이 고민하고 있는 분의 참고가 되면 다행입니다.
Reference
이 문제에 관하여(aws-amplify-vue로 만든 인증 화면에서 SignUp을 끄지 않도록 합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rtaguchi/items/a1dd93dd2b99f1fe199e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
위의 기사를 참고로 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"링크가.)
이 파라미터, 수요는 많다고 생각합니다만, 왠지 위의 문서에는 아직 실려 있지 않습니다.
이 기사가 나와 같이 고민하고 있는 분의 참고가 되면 다행입니다.
Reference
이 문제에 관하여(aws-amplify-vue로 만든 인증 화면에서 SignUp을 끄지 않도록 합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rtaguchi/items/a1dd93dd2b99f1fe199e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
export default {
...
data: function(){
return {
authConfig: {
signInConfig: {
isSignUpDisplayed : false // ← コレ!!
}
}
}
}
}
Reference
이 문제에 관하여(aws-amplify-vue로 만든 인증 화면에서 SignUp을 끄지 않도록 합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rtaguchi/items/a1dd93dd2b99f1fe199e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)