React 및 GraphQL - 10을 사용하여 Reddit 클론 만들기

이 게시물은 원래 내 블로그 사이트에 게시되었습니다.

이제 우리는 서버에 이메일 기능을 추가하고 있습니다. 이를 위해 NodeMailer 를 사용합니다. 아래 명령을 사용하여 추가하십시오.

yarn add nodemailer
yarn add -D @types/nodemailer // this is for TS support

예제에서 코드를 가져와 파일에 붙여넣을 수 있습니다. 이제 우리는 forgotPassword 돌연변이를 생성하고 있습니다. 그 전에 이메일 필드를 User 엔터티에 추가해야 합니다.

@Field()
@Property({ type: "text", unique: true })
email!: string;

그런 다음 마이그레이션 명령을 실행하여 데이터베이스를 업데이트해야 합니다. 그런 다음 응용 프로그램을 실행하면 이 오류가 발생합니다.

alter table "user" add column "email" text not null;

null이 아닌 열을 추가하려고 하지만 이메일 주소가 없는 사용자가 있기 때문입니다. 지금은 모든 사용자를 삭제하겠습니다.

이제 이메일이 필수 필드이기 때문에 사용자 등록 변형을 업데이트해야 합니다. 쿼리 빌더에도 추가하십시오.

이제 이 새로운 변경 사항과 일치하도록 로그인 변형을 변경합니다.

먼저 사용자가 fineOne 또는 username를 통과했는지 확인하는 email 메서드를 변경합니다.

const user = await em.findOne(
  User,
  usernameOrEmail.includes("@")
    ? { email: usernameOrEmail }
    : { username: usernameOrEmail }
);

이제 사용자가 사용자 이름에 @를 가질 수 있는 시나리오가 있습니다. 처리해 보겠습니다. 해당 유효성 검사를 통해 util 라는 별도의 validateRegister 파일을 생성합니다. 그런 다음 register 돌연변이에서 해당 util 함수를 사용하십시오.

...
const errors = validateRegister(options);
if (errors) {
  return {errors};
}
...

여기서 오류array를 개체로 반환하는 것을 볼 수 있습니다. 반환된 개체가 반환 유형과 일치합니다.

이 백엔드 코드와 일치하도록 프론트엔드 코드를 변경해 보겠습니다.

로그인graphql 쿼리를 변경하여 usernameOrEmail를 먼저 가져옵니다.

mutation Login($usernameOrEmail: String!, $password: String!) {
  login(usernameOrEmail: $usernameOrEmail, password: $password) {
... // rest of code is same

그런 다음 레지스터graphql 쿼리를 변경합니다.

mutation Register($options: UsernamePasswordInput!) {
register(options: $options){
... //rest of code is same

그런 다음 email 입력 필드를 Register.tsx 페이지에 추가합니다.

이러한 모든 변경 사항이 끝나면 비밀번호를 잊어버린 사용자에게 이메일을 보내기 위해 다시 돌아올 것입니다.

resolvers 폴더 안의 user.ts 파일에 forgotPassword 돌연변이를 추가하고 있습니다.

@Mutation(() => Boolean)
async forgotPassword(
  @Arg("email") email: string,
  @Ctx() { em }: RedditDbContext
) {
  const user = await em.findOne(User, {email});
  if (!user) {
    return true;
  }
  const token = "asdasdsadassadsadsadsadsad";
  await sendEmail(email,
    '<a href="http://localhost:3001/reset-password/${token}">click here to reset password</a>');

  return true;

}

거기에서 먼저 사용자 이메일이 존재하는지 확인합니다. 존재하는 경우 토큰을 생성하여 비밀번호 재설정 링크에 첨부합니다. URL에 첨부할 고유한 사용자 토큰을 생성하기 위해 uuid 패키지를 사용합니다.

yarn add uuid ioredis

또한 유형 지원을 설치하십시오.

yarn add -D @types/uuid @types/ioredis

이제 ioredis를 사용하고 index.ts 파일에서 관련 사항을 변경해 보겠습니다.

또한 나중에 해석기에서 사용할 수 있도록 컨텍스트에 redis를 전달합니다. 이제 RedditDbContext 유형에 추가해야 합니다.

그런 다음 Redis 개체를 만들고 RedisStore  에서 사용합니다.

// inside the index.ts file
const redis = new Redis();
// use this redis object inside the RedisStore
...
store: new RedisStore({ client: redis, disableTouch: true }),
...

그런 다음 forgotPassword 돌연변이 내부에서 이 redis 객체를 사용합니다. 여기에 몇 가지 일이 있습니다.

먼저 uuid 를 사용하여 토큰을 만듭니다. 그런 다음 이것을 Redis 에 저장합니다. 그런 다음 이 토큰을 URL에 설정합니다.

const token = v4();
await redis.set(
  FORGET_PASSWORD_PREFIX + token,
  user.id,
  "ex",
  1000 * 60 * 60 * 24 * 3
);

이상으로 이번 포스팅을 마치겠습니다. 이와 관련하여 질문할 사항이 있으면 여기에 댓글을 남겨주세요. 또한 내 이해에 따라 이것을 썼습니다. 따라서 잘못된 점이 있으면 주저하지 말고 저를 수정하십시오. 정말 감사합니다.
오늘의 친구들을 위한 것입니다. 곧 봐요. 고맙습니다.

참조:

이 기사 시리즈는 . 이것은 놀라운 자습서이며 확인하는 것이 좋습니다.

기본 이미지credit