Meteor로 사용자 정의 로그인 및 등록 양식 작성-JS 튜토리얼-php.cn

Meteor로 사용자 정의 로그인 및 등록 양식 작성 키 테이크 아웃

Meteor를 사용하여 사용자 정의 로그인 및 등록 양식 작성 계정 -Password 패키지를 설치하는 것이 포함되며, 사용자 데이터를 저장하기 위해 Meteor.users Collection을 자동으로 생성하여 사용자 관련 기능에 대한 사용자 정의 로직을 작성할 필요가 없습니다.

. 로그인 및 등록 시스템의 사용자 인터페이스는 간단한 HTML 양식을 사용하여 개발할 수 있습니다. 이러한 양식의 템플릿에는 이메일 및 비밀번호의 필드와 제출 버튼이 포함되어 있습니다. 이벤트 핸들러는 양식과의 사용자 상호 작용에 응답하기 위해 설정할 수 있습니다. 예를 들어 양식의 기본 동작을 방지하고 양식이 제출 될 때 확인 메시지를 출력하기 위해 '양식 제출'이벤트를 만들 수 있습니다. meteor의 계정과 같은 내장 된 메소드와 같은 내장 된 메소드는 새 사용자를 등록하고 기존 사용자를 각각 로그인하는 데 사용될 수 있습니다. 이 방법은 가입 후 비밀번호를 자동으로 암호화하고 사용자 로그인하여 작성해야 할 코드의 양을 줄입니다.

그러나 이러한 단순성은 편리하지만이 보일러 플레이트 인터페이스에 의존해도 많은 유연성을 허용하지 않습니다. 그렇다면 사용자가 웹 사이트를 등록하고 로그인 할 수있는 사용자 정의 인터페이스를 만들려면 어떻게해야합니까? 운 좋게도 너무 어렵지 않습니다. 이 기사에서는 Meteor와 함께 사용자 정의 로그인 및 등록 양식을 만드는 방법을 보여줍니다. 그러나이 기사에서는이 프레임 워크를 사용하여 프로젝트를 설정하는 방법을 알고 있다고 가정합니다. 이 기사에서 개발 된 코드를 사용하려면 설정 한 Github 저장소를 살펴보십시오. 기본 설정 새로운 Meteor 프로젝트 내에서 명령을 실행하여 계정-파스 워드 패키지를 추가하십시오.

인터페이스 개발 전체 로그인 및 등록 시스템의 경우 다음을 포함하여 인터페이스를 만들어야하는 많은 기능이 있습니다.

등록

로그인

비밀번호를 잊어 버렸습니다 “이메일 확인”페이지 “이메일 확인”페이지

그러나 현재, 우리는 나열된 첫 두 지점 (등록 및 로그인) 양식에 대해 이야기합니다. 그 이유는 기초를 처리 한 후에는 다른 인터페이스를 만드는 방법을 알아내는 것이 어렵지 않기 때문입니다. 다음 스 니펫은 등록 양식의 코드를 보여줍니다.

meteor <span>add accounts-password</span>

로그인 후 복사

다음 스 니펫은 대신 로그인 양식의 코드를 보여줍니다.

<span><span><span><template</span> name<span>="register"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="registerEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="registerPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Register"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

로그인 후 복사

보시다시피, 템플릿은 매우 유사합니다. 양식, 이메일 및 비밀번호의 필드 및 제출 버튼이 포함되어 있습니다. 유일한 차이점은 입력 필드 및 템플릿의 이름 속성 값입니다. (우리는 그 값을 곧 참조 할 것이므로 독특한 지 확인하십시오.) 우리는이 템플릿이 제하지 않은 사용자를 위해 표시되기를 원합니다. 따라서 우리는 개구부와 닫는 본체 사이의 CurrentUser 객체를 참조 할 수 있습니다. 태그 :

<span><span><span><template</span> name<span>="login"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="loginEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="loginPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Login"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

로그인 후 복사

이 코드는 현재 사용자가 로그인 한 경우 "로그인 된"메시지를 보여주고 "등록"및 "로그인"템플릿을 표시합니다. 이벤트 생성 현재 우리의 형태는 정적입니다. 그들이 무언가를하기 위해서는 제출 이벤트에 반응해야합니다. "등록"템플릿에 중점을 두어이를 입증하겠습니다. 프로젝트의 JavaScript 파일 내에 다음을 작성하십시오.

여기서는“레지스터”템플릿 내부의 양식을 작성하여 코드를 작성했습니다.

는 제출 이벤트 <head> <title>Custom Registration Tutorial</title> </head> <body> {{#if currentUser}} <p>You're logged in.</p> {{else}} {{> register}} {{> login}} {{/if}} </body>에 응답합니다 에는 기본 동작이 없습니다 는 콘솔 에서 확인 메시지를 출력합니다

또한이 코드를 서버에서 실행하는 것을 원하지 않기 때문에이 코드를 Isclient 조건부 내에 배치했습니다 (인터페이스만을위한 것). 이벤트 내에서는 이메일 및 비밀번호 필드의 값을 가져 와서 한 쌍의 변수에 저장하고 싶습니다. 이전 코드를 수정하겠습니다.

"로그인"템플릿의 경우 코드가 거의 동일합니다.

물건을 함께 연결하는 프로젝트에 계정-파스 워드 패키지를 추가 한 후 여러 가지 방법을 사용할 수있게되었습니다. 계정 .CreateUser () ac 계정 .forgotpassword () ac ac ac 우리는 CreateUser 메소드에 중점을 둘 것이지만 메소드 이름을 기반으로 다른 이름의 목적을 파악하는 것은 어렵지 않습니다. "등록"템플릿의 제출 이벤트 하단에서 다음을 작성하십시오.

meteor <span>add accounts-password</span>

로그인 후 복사

이것은 새 사용자를 생성하는 데 사용할 수있는 코드이며 기본적으로 이메일과 비밀번호의 두 가지 옵션이 필요합니다. 통과하려면 다음을 작성하십시오.

<span><span><span><template</span> name<span>="register"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="registerEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="registerPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Register"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

로그인 후 복사

이벤트의 최종 코드는 다음과 같습니다.

<span><span><span><template</span> name<span>="login"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="loginEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="loginPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Login"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

로그인 후 복사

일반 삽입 대신이 코드를 사용합니다 기능 암호가 자동으로 암호화된다는 이점이 있습니다. 또한 가입 후 사용자가 로그인하여 많은 코드를 작성할 필요가 없습니다. "로그인"이벤트에서 사용할 수있는 로그인 withPassword () 메소드도 있습니다.

<span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Custom Registration Tutorial<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    {{#if currentUser}}
        <span><span><span><p</span>></span>You're logged in.<span><span></p</span>></span>
</span>    {{else}}
        {{> register}}
        {{> login}}
    {{/if}}
<span><span><span></body</span>></span></span>

로그인 후 복사

또한 이메일 및 비밀번호 값을 허용합니다.

<span>if (Meteor.isClient) {
</span>    <span>Template.register.events({
</span>        <span>'submit form': function(event) {
</span>            event<span>.preventDefault();
</span>            <span>console.log("Form submitted.");
</span>        <span>}
</span>    <span>});
</span><span>}</span>

로그인 후 복사

그리고 맥락에서, 이것은 코드의 모습입니다.

<span>Template.register.events({
</span>    <span>'submit form': function(event){
</span>        event<span>.preventDefault();
</span>        <span>var emailVar = event.target.registerEmail.value;
</span>        <span>var passwordVar = event.target.registerPassword.value;
</span>        <span>console.log("Form submitted.");
</span>    <span>}
</span><span>});</span>

로그인 후 복사

로그 아웃

사용자는 이제 등록하고 로그인 할 수 있지만 로그 아웃 할 수 있도록 먼저 로그인시 표시 될 새 "대시 보드"템플릿을 작성하겠습니다.

그런 다음이 기사의 앞부분에 쓴 if 문에 다음 코드를 포함시킵니다.

<span>Template.login.events({
</span>    <span>'submit form': function(event) {
</span>        event<span>.preventDefault();
</span>        <span>var emailVar = event.target.loginEmail.value;
</span>        <span>var passwordVar = event.target.loginPassword.value;
</span>        <span>console.log("Form submitted.");
</span>    <span>}
</span><span>});</span>

로그인 후 복사

이제 "대시 보드"템플릿 내에 "로그 아웃"링크에 첨부 된 이벤트를 만들 수 있습니다.

<span>Accounts.createUser({
</span>    <span>// options go here
</span><span>});</span>

로그인 후 복사

로깅 프로세스를 실행하려면 로그 아웃 방법 만 사용하면됩니다.

<span>Accounts.createUser({
</span>    <span>email: emailVar,
</span>    <span>password: passwordVar
</span><span>});</span>

로그인 후 복사

등록, 로그인 및 로그 아웃은 이제 예상대로 작동해야합니다. 결론 우리는 소량의 코드로 많은 시간을 보냈지 만 계정 시스템에 대한 완전한 인터페이스를 만들려면 여전히해야 할 일이 많습니다. 내가 제안한 내용은 다음과 같습니다.

<span>Template.register.events({
</span>    <span>'submit form': function(event) {
</span>        event<span>.preventDefault();
</span>        <span>var emailVar = event.target.registerEmail.value;
</span>        <span>var passwordVar = event.target.registerPassword.value;
</span>        <span>Accounts.createUser({
</span>            <span>email: emailVar,
</span>            <span>password: passwordVar
</span>        <span>});
</span>    <span>}
</span><span>});</span>

로그인 후 복사

새 사용자의 이메일을 확인할 수 있습니다 사용자의 생성 (및 로그인)을 검증하십시오 "레지스터"및 "로그인"양식에 시각적 검증을 추가하십시오

로그인 시도가 실패 할 때 무언가를하십시오.

사용자는 비밀번호를 변경할 수 있습니다

이러한 기능을 구현하는 방법에 대한 세부 사항을 파악하는 데 오후가 걸릴 수 있지만,이 튜토리얼에서 다루는 내용을 기반으로 한 것은 손이 닿지 않습니다. 유성은 우리를 위해 노력합니다. 이 기사에서 개발 된 코드를 사용하려면 설정 한 Github 저장소를 살펴보십시오. meteor 로 사용자 정의 로그인/등록 양식 작성에 대한 자주 묻는 질문 (FAQ) Meteor의 등록 양식에 추가 필드를 추가 할 수 있습니까?

Meteor의 등록 양식에 추가 필드를 추가하는 것은 매우 간단합니다. 계정에 더 많은 필드를 추가하여 사용자 프로필을 확장 할 수 있습니다. 예를 들어, 사용자의 전체 이름에 대한 필드를 추가하려면 다음과 같이 할 수 있습니다. ', 프로파일 : { fullName :'테스트 사용자 '}}); 이 예에서‘FullName’은 사용자 프로필에 추가 된 추가 필드입니다. meteor.user (). profile.fullname을 사용하여 나중에이 필드에 액세스 할 수 있습니다.
Meteor에서 로그인/등록 양식의 모양을 사용자 정의 할 수 있습니까?

Meteor는 A를 제공하지 않습니다. 로그인/등록 양식의 모양을 사용자 정의하는 내장 방법. 그러나 CSS를 사용하여 필요에 따라 양식을 스타일링 할 수 있습니다. 클래스를 양식 요소에 할당 한 다음 CSS 파일 에서이 클래스를 사용하여 스타일을 적용 할 수 있습니다. 또는 부트 스트랩 또는 재료 -UI와 같은 UI 라이브러리를 사용하여 양식을 스타일링 할 수 있습니다. Meteor에서 이메일 확인을 구현하려면 어떻게해야합니까?

Meteor는 이메일 확인에 대한 내장 지원을 제공합니다. 계정을 사용하여 확인 이메일을 사용하여 확인 이메일을 사용자에게 보낼 수 있습니다. 이 메소드는 사용자의 ID를 매개 변수로 가져 와서 사용자가 클릭 할 수있는 링크가있는 이메일을 보내 이메일 주소를 확인합니다. 다음과 같은 새 사용자를 작성한 후이 메소드를 호출 할 수 있습니다. function (err, userId) { if (err) { // hange error } else {> ac 오류가 발생하면 오류 객체와 함께 호출되는 콜백 함수를 제공 할 수 있습니다. 이 오류 객체에는 무엇이 잘못되었는지에 대한 정보가 포함되어 있습니다. 이 정보를 사용하여 사용자에게 적절한 오류 메시지를 표시 할 수 있습니다. 예는 다음과 같습니다.

ac console.log ( '등록 중 오류 :', err);

구현 방법은 어떻게 구현할 수 있습니까? Meteor에서 암호 재설정 기능?

Meteor는 비밀번호 재설정 기능에 대한 내장 지원을 제공합니다. ac convers.forgotpassword 메서드는 클릭 할 수있는 링크를 통해 이메일을 사용자에게 보냅니다. 비밀번호를 재설정합니다. ac 재설정 링크와 새 비밀번호의 토큰을 매개 변수로 가져옵니다.

Meteor 응용 프로그램에 소셜 로그인을 추가하려면 어떻게해야합니까?

Meteor는 Facebook, Google, Google과 같은 다양한 제공 업체와 소셜 로그인을 지원합니다. 계정 패키지를 통해 트위터. 애플리케이션에 소셜 로그인을 추가하려면 적절한 패키지 (예 : Facebook 로그인의 계정-파이스 북)을 추가하고 소셜 제공 업체의 앱 자격 증명으로 구성해야합니다. Meteor의 사용자 인증에 따라 특정 경로에 대한 액세스를 제한하려면 어떻게해야합니까?