GraphQL - Xác thực

Trong khi thêm hoặc sửa đổi dữ liệu, điều quan trọng là phải xác thực đầu vào của người dùng. Ví dụ, chúng ta có thể cần đảm bảo rằng giá trị của một trường luôn không rỗng. Chúng ta có thể sử dụng! (non-nullable) nhập điểm đánh dấu trong GraphQL để thực hiện xác nhận như vậy.

Cú pháp để sử dụng ! đánh dấu loại như được đưa ra bên dưới -

type TypeName {
   field1:String!,
   field2:String!,
   field3:Int!
}

Cú pháp trên đảm bảo rằng tất cả các trường không rỗng.

Nếu chúng tôi muốn triển khai các quy tắc bổ sung như kiểm tra độ dài của một chuỗi hoặc kiểm tra xem một số có nằm trong một phạm vi nhất định hay không, chúng tôi có thể xác định trình xác thực tùy chỉnh. Logic xác thực tùy chỉnh sẽ là một phần của chức năng trình phân giải. Hãy để chúng tôi hiểu điều này với sự trợ giúp của một ví dụ.

Hình minh họa - Triển khai Trình xác thực tùy chỉnh

Hãy để chúng tôi tạo một biểu mẫu đăng ký với xác thực cơ bản. Biểu mẫu sẽ có các trường email, tên và mật khẩu.

Bước 1 - Tải xuống và cài đặt các phụ thuộc bắt buộc cho dự án

Tạo một thư mục có tên validation-app. Thay đổi thư mục thành ứng dụng xác thực từ thiết bị đầu cuối. Làm theo các bước từ 3 đến 5 được giải thích trong chương Thiết lập Môi trường.

Bước 2 - Tạo một lược đồ

Thêm vào schema.graphql tập tin trong thư mục dự án validation-app và thêm mã sau:

type Query {
   greeting:String
}

type Mutation {
   signUp(input:SignUpInput):String
}

input SignUpInput {
   email:String!,
   password:String!,
   firstName:String!
}

Note- Chúng ta có thể sử dụng kiểu nhập SignUpInput để giảm số lượng tham số trong hàm signUp. Vì vậy, hàm signUp chỉ nhận một tham số kiểu SignUpInput.

Bước 3 - Tạo trình phân giải

Tạo một tệp resolvers.js trong thư mục dự án và thêm mã sau:

const Query = {
   greeting:() => "Hello"
}

const Mutation ={
   signUp:(root,args,context,info) => {

      const {email,firstName,password} = args.input;

      const emailExpression = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      
      const isValidEmail =  emailExpression.test(String(email).toLowerCase())
      if(!isValidEmail)
      throw new Error("email not in proper format")

      if(firstName.length > 15)
      throw new Error("firstName should be less than 15 characters")

      if(password.length < 8 )
      throw new Error("password should be minimum 8 characters")
      
      return "success";
   }
}
module.exports = {Query,Mutation}

Chức năng giải quyết, signUp chấp nhận các tham số email, mật khẩu và firstName. Chúng sẽ được chuyển qua biến đầu vào để nó có thể được truy cập thông qua args.input.

Bước 4 - Chạy ứng dụng

Tạo tệp server.js. Tham khảo bước 8 trong Chương Thiết lập Môi trường. Thực hiện lệnh npm start trong terminal. Máy chủ sẽ hoạt động trên cổng 9000. Ở đây, chúng tôi sẽ sử dụng GraphiQL làm client để kiểm tra ứng dụng.

Mở trình duyệt và nhập URL http://localhost:9000/graphiql. Nhập truy vấn sau vào trình soạn thảo -

mutation doSignUp($input:SignUpInput) {
   signUp(input:$input)
}

Vì đầu vào cho hàm đăng ký là một kiểu phức tạp, chúng tôi cần sử dụng các biến truy vấn trong graphiql. Đối với điều này, trước tiên chúng ta cần đặt tên cho truy vấn và gọi nó là doSignUp, $ input là một biến truy vấn.

Biến truy vấn sau phải được nhập vào tab biến truy vấn của graphiql -

{
   "input":{
      "email": "abc@abc",
      "firstName": "kannan",
      "password": "pass@1234"
   }
}

Mảng lỗi chứa các chi tiết về lỗi xác thực như được hiển thị bên dưới:

{
   "data": {
      "signUp": null
   },
   
   "errors": [
      {
         "message": "email not in proper format",
         "locations": [
            {
               "line": 2,
               "column": 4
            }
         ],
         "path": [
            "signUp"
         ]
      }
   ]
}

Chúng tôi phải nhập một đầu vào thích hợp cho mỗi trường như được cung cấp bên dưới:

{
   "input":{
      "email": "[email protected]",
      "firstName": "kannan",
      "password": "pass@1234"
   }
}

Câu trả lời như sau:

{
   "data": {
      "signUp": "success"
   }
}

Ở đây, trong truy vấn dưới đây, chúng tôi không chỉ định bất kỳ mật khẩu nào.

{
   "input":{
      "email": "[email protected]",
      "firstName": "kannan"
   }
}

Nếu trường bắt buộc không được cung cấp, thì máy chủ qraphql sẽ hiển thị lỗi sau:

{
   "errors": [
      {
         "message": "Variable \"$input\" got invalid value {\"email\":\"[email protected]\",\"firstName\":\"kannan\"}; Field value.password of required type String! was not provided.",
         "locations": [
            {
               "line": 1,
               "column": 19
            }
         ]
      }
   ]
}