前回は、パスワードをハッシュ化しました。

今回は、Prismaを使って、ログイン機能を追加します。

コードは、前回のコードを使用します。

まずは、ログイン機能のスキーマを作成します。

schema.tsのMutationsigninを作成します。

signinの指定は、signupと同じにします。

type Mutation {
  addBook(input: AddBookInput!): BookPayload!
  deleteBook(id: Int!): BookPayload!
  updateBook(id: Int!, input: UpdateBookInput!): BookPayload!
  signup(email: String!, password: String!): AuthPayload!
  signin(email: String!, password: String!): AuthPayload!
}

スキーマが完成したので、次はリゾルバーを作成します。

resolversフォルダのMutation.tsを開きます。

Mutationにsigninを作成します。

signin: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
},

PostgresSQLデータのemailと、入力したメールアドレスが正しいか確認します。

まずは、emailを指定して、ユーザー情報を取得します。

signin: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
  const user = await prisma.user.findUnique({
    where: {
      email
    }
  });
},

ユーザーが存在しない場合、エラーメッセージを返すようにします。

signin: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
  const user = await prisma.user.findUnique({
    where: {
      email
    }
  });

  if(!user) {
    return {
      errors: [
        {
        message: "アカウント情報が間違っています"
        }
      ],
      user: null,
    }
  }
},

次に、パスワードが正しいかどうか確認します。

パスワードがハッシュ化されているので、bcryptcompareを使って確認します。

compareの第一引数に入力したpassword、第二引数にuserpasswordを指定します。

signin: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
  const user = await prisma.user.findUnique({
    where: {
      email
    }
  });

  if(!user) {
    return {
      errors: [
        {
        message: "アカウント情報が間違っています"
        }
      ],
      user: null,
    }
  }

  const comparePassword = await bcrypt.compare(password, user.password);
  },

パスワードが間違っていれば、エラーメッセージを返すようにします。

signin: async (_:any, {email, password}: MutationUser, { prisma }: Context): Promise<UserPayload> => {
  const user = await prisma.user.findUnique({
    where: {
      email
    }
  });

  if(!user) {
    return {
      errors: [
        {
        message: "アカウント情報が間違っています"
        }
      ],
      user: null,
    }
  }

  const comparePassword = await bcrypt.compare(password, user.password);

  if (!comparePassword) {
    return {
      errors: [
        {
          message: "パスワードが間違っています",
        },
      ],
      user: null,
    };
  }
},

emailpasswordが問題なければ、空のエラーメッセージとuserを返します。

では、ブラウザで確認しましょう。

GraphQLで、Signinmutationを作成します。

mutation Signin($email: String!, $password: String!) {
  signin(email: $email, password: $password) {
    errors {
      message
    }
    user {
      email
      password
    }
  }
}

まずは、適当なemailpasswordを入力します。

image2

Signinボタンをクリックすると、

image3

エラーメッセージが返ってきました。

次に、正しいemailと、適当なpasswordを入力します。

image4

Signinボタンをクリックすると、

image5

こちらもエラーメッセージが返ってきました。

では、正しいemailと、適当なpasswordを入力します。

image6

Signinボタンをクリックすると、

image7

正しいuser情報が返ってきました。

全文は、以下になります。

次回は、バックエンドで作成したGraphQLを、フロントエンドで接続します。

ブログ一覧