codebangkok

Posted on Apr 29, 2021

Flutter & Dart: Call RESTful API and Authen with JWT

Agenda

Call REST API with GET Method
Call REST API with POST Method
JSON Serialization (jsonEncode)
JSON Deserializaton (jsonDecode)
Call Authorized REST API with JWT

Prerequisite

1. สร้างโปรเจ็ค แล้ว migrate ให้ dart ซัพพอร์ท null safety

dart create rest_api
cd rest_api
dart migrate --apply-changes

2. ติดตั้ง http package

dart pub add http

เข้าไปดูได้ที่ https://pub.dev/packages/http

3. เตรียม API

ผมทำเอาไว้เพื่อทดสอบแล้วที่ https://techcoach.azurewebsites.net

4. ตัวอย่างที่ 1 การเรียก API แบบ GET กับการดึงค่า Gender

URL: https://techcoach.azurewebsites.net/registration/genders

4.1 import http,io,convert package แล้วสร้างฟังชั่น getGender แบบ async

import 'package:http/http.dart' as http;
import 'dart:io';
import 'dart:convert';

void main(List<String> arguments) {

}

Future getGenders() async {

}

4.2 เขียนโปรแกรมที่ฟังชั่น getGenders เรียกฟังชั่น http.get แล้วส่ง URL เข้าไปดังนี้

final response = await http.get(
  Uri.parse('https://techcoach.azurewebsites.net/registration/genders'),
);

4.2 ตรวจสอบว่าถ้าสถานะไม่ใช่ ok (200) ก็จะหยุดการทำงาน

if (response.statusCode != HttpStatus.ok) {
  print('Response: ${response.statusCode}');
  return;
}

4.3 พิมพ์ผลที่ได้ออกมาดูก่อน

print(response.body);

4.3 เปลี่ยนที่ฟังชั่น main เป็นแบบ async แล้วเรียกฟังชั่น getGenders

void main(List<String> arguments) async {
  await getGenders();
}

ผลลัพธ์ที่ได้หลังจากการรันคำสั่ง

dart run
[{"id":1,"name":"ชาย"},{"id":2,"name":"หญิง"}]

4.4 สร้างคลาส Gender โดยมี id กับ name เป็น arribute พร้อมกับสร้าง constructor เพื่อรับค่าด้วย

class Gender {
  final int id;
  final String name;
  Gender({
    required this.id,
    required this.name,
  });
}

4.4 เพิ่ม factory constructor ให้กับ Gender เพื่อความสะดวกในการแปลงจาก Map เป็น Object

class Gender {
  final int id;
  final String name;
  Gender({
    required this.id,
    required this.name,
  });

  factory Gender.fromJson(Map<String, dynamic> json) => Gender(
        id: json['id'],
        name: json['name'],
      );
}

4.5 แก้ไขฟังชั่น getGenders ลบบรรทัด print ออกแล้วเพิ่มคำสั่ง jsonDecode เพื่อแปลงจาก JSON String ให้เป็น List ของ Map

final json = jsonDecode(response.body) as List;

4.6 ใช้ map เพื่อแปลงจาก Map ให้กลายเป็น List ของ Gender

final genders = json.map((e) => Gender.fromJson(e)).toList();

4.6 แสดงผลที่ได้จาก List ของ Gender

for (var gender in genders) {
  print('id: ${gender.id}, name: ${gender.name}');
}

ผลลัพธ์ที่ได้หลังจากการรันคำสั่ง

dart run
id: 1, name: ชาย
id: 2, name: หญิง

โค้ดทั้งหมด

import 'package:http/http.dart' as http;
import 'dart:io';
import 'dart:convert';

void main(List<String> arguments) async {
  await getGenders();
}

Future getGenders() async {
  final response = await http.get(
    Uri.parse('https://techcoach.azurewebsites.net/registration/genders'),
  );

  if (response.statusCode != HttpStatus.ok) {
    print('Response: ${response.statusCode}');
    return;
  }

  final json = jsonDecode(response.body) as List;
  final genders = json.map((e) => Gender.fromJson(e)).toList();
  for (final gender in genders) {
    print('id: ${gender.id}, name: ${gender.name}');
  }
}

class Gender {
  int id;
  String name;
  Gender({
    required this.id,
    required this.name,
  });

  factory Gender.fromJson(Map<String, dynamic> json) => Gender(
        id: json['id'],
        name: json['name'],
      );
}

5. ตัวอย่างที่ 2 การเรียก API แบบ POST กับการลงทะเบียน User โดยจะต้องส่ง payload ในรูปแบบ JSON ที่ body ด้วย

URL: https://techcoach.azurewebsites.net/registration/users

5.1 สร้างฟังชั่น signup แบบ async รับพารามิเตอร์ที่ต้องการ แล้วเรียกฟังชั่น http.post แล้วส่ง URL เข้าไปดังนี้

Future signup({
  required final String firstName,
  required final String lastName,
  required final String email,
  required final String password,
  required final int genderId,
}) async {
  final response = await http.post(
    Uri.parse('https://techcoach.azurewebsites.net/registration/users'),
  );
}

5.2 เพิ่ม content-type: application/json เข้าไปที่ headers

final response = await http.post(
  Uri.parse('https://techcoach.azurewebsites.net/registration/users'),
  headers: {'content-type': 'application/json'},
);

5.3 ที่ body สร้าง Map ของคีย์ต่างๆที่ payload ต้องการ แล้วใช้ jsonEncode เพื่อแปลงจาก Map ให้เป็น JSON String

final response = await http.post(
  Uri.parse('https://techcoach.azurewebsites.net/registration/users'),
  headers: {'content-type': 'application/json'},
  body: jsonEncode({
    'firstName': firstName,
    'lastName': lastName,
    'email': email,
    'password': password,
    'genderId': genderId,
  }),
);

5.4 ตรวจสอบว่าถ้าสถานะ ok (200) แสดงผลคำว่า signup success

if (response.statusCode != HttpStatus.ok) {
  print('Response: ${response.statusCode}');
  return;
}

print('signup success');

5.5 ที่ฟังชั่น main ให้เรียกฟังชั่น signup ตัวอย่างดังนี้

void main(List<String> arguments) async {
  await signup(
    firstName: 'Code',
    lastName: 'Bangkok',
    email: 'codebangkok@gmail.com',
    password: 'iloveyou',
    genderId: 1,
  );
}

ผลลัพธ์ที่ได้หลังจากการรันคำสั่ง

dart run
signup success

โค้ดที่เกี่ยวข้องทั้งหมด

import 'package:http/http.dart' as http;
import 'dart:io';
import 'dart:convert';

void main(List<String> arguments) async {
  await signup(
    firstName: 'Code',
    lastName: 'Bangkok',
    email: 'codebangkok@gmail.com',
    password: 'iloveyou',
    genderId: 1,
  );
}

Future signup({
  required final String firstName,
  required final String lastName,
  required final String email,
  required final String password,
  required final int genderId,
}) async {
  final response = await http.post(
    Uri.parse('https://techcoach.azurewebsites.net/registration/users'),
    headers: {'content-type': 'application/json'},
    body: jsonEncode({
      'firstName': firstName,
      'lastName': lastName,
      'email': email,
      'password': password,
      'genderId': genderId,
    }),
  );

  if (response.statusCode != HttpStatus.ok) {
    print('Response: ${response.statusCode}');
    return;
  }

  print('signup success');
}

6. ตัวอย่างที่ 3 การเรียก API แบบ POST กับการ Login โดยจะต้องส่ง payload ในรูปแบบ JSON ที่ body และรับค่า response กลับมาด้วย

URL: https://techcoach.azurewebsites.net/registration/login

6.1 สร้างฟังชั่น login แบบ async รับพารามิเตอร์ที่ต้องการ แล้วเรียกฟังชั่น http.post แล้วส่ง URL เข้าไปดังนี้

Future login({
  required final String email,
  required final String password,
}) async {
  final response = await http.post(
    Uri.parse('https://techcoach.azurewebsites.net/registration/login'),
  );
}

6.2 เพิ่ม content-type: application/json เข้าไปที่ headers

final response = await http.post(
  Uri.parse('https://techcoach.azurewebsites.net/registration/login'),
  headers: {'content-type': 'application/json'},
);

6.3 ที่ body สร้าง Map ของคีย์ต่างๆที่ payload ต้องการ แล้วใช้ jsonEncode เพื่อแปลงจาก Map ให้เป็น JSON String

final response = await http.post(
  Uri.parse('https://techcoach.azurewebsites.net/registration/login'),
  headers: {'content-type': 'application/json'},
  body: jsonEncode({
    'email': email,
    'password': password,
  }),
);

6.4 ตรวจสอบว่าถ้าสถานะไม่ใช่ ok (200) ก็จะหยุดการทำงาน

if (response.statusCode != HttpStatus.ok) {
  print('Response: ${response.statusCode}');
  return;
}

6.5 สร้างคลาส User โดยมี arribute ต่างๆตาม response พร้อมกับสร้าง constructor เพื่อรับค่าด้วย

class User {
  final int id;
  final String firstName;
  final String lastName;
  final String email;
  final Gender gender;
  final String jwtToken;
  User({
    required this.id,
    required this.firstName,
    required this.lastName,
    required this.email,
    required this.gender,
    required this.jwtToken,
  });
}

6.6 เพิ่ม factory constructor ให้กับ User เพื่อความสะดวกในการแปลงจาก Map เป็น Object

class User {
  final int id;
  final String firstName;
  final String lastName;
  final String email;
  final Gender gender;
  final String jwtToken;
  User({
    required this.id,
    required this.firstName,
    required this.lastName,
    required this.email,
    required this.gender,
    required this.jwtToken,
  });

  factory User.fromJson(Map<String, dynamic> json) => User(
        id: json['id'],
        firstName: json['firstName'],
        lastName: json['lastName'],
        email: json['email'],
        gender: Gender.fromJson(json['gender']),
        jwtToken: json['jwtToken'],
      );
}

6.7 แก้ไขฟังชั่น login เพิ่มคำสั่ง jsonDecode เพื่อแปลงจาก JSON String ไปเป็น Map

final json = jsonDecode(response.body);

6.8 แปลงจาก Map ให้กลายเป็น User object ด้วย fromJson

final user = User.fromJson(json);

6.9 แสดงผลที่ได้จาก User object

print('First Name: ${user.firstName}');
print('Last Name: ${user.lastName}');
print('Email: ${user.email}');
print('Gender: ${user.gender.name}');
print('JWT Token: ${user.jwtToken}');

6.10 ที่ฟังชั่น main ให้เรียกฟังชั่น login ตัวอย่างดังนี้

void main(List<String> arguments) async {
  await login(
    email: 'codebangkok@gmail.com',
    password: 'iloveyou',
  );
}

ผลลัพธ์ที่ได้หลังจากการรันคำสั่ง (jwt token จะเปลี่ยนทุกครั้งที่รัน)

dart run
First Name: Code
Last Name: Bangkok
Email: codebangkok@gmail.com
Gender: ชาย
JWT Token: eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJJZCI6IjYiLCJzdWIiOiJjb2RlYmFuZ2tva0BnbWFpbC5jb20iLCJlbWFpbCI6ImNvZGViYW5na29rQGdtYWlsLmNvbSIsIm5iZiI6MTYxOTY5MDkwMSwiZXhwIjoxNjE5NzEyNTAxLCJpYXQiOjE2MTk2OTA5MDF9.BBQ6RDSIZodGdn19Af5HrZLHSyGOJJReXAsSXfN2LG1dc4kTK6SlLc6U7e65-9iSBqiM4MA97EMvJvRUYKbUwQ

โค้ดที่เกี่ยวข้องทั้งหมด

import 'package:http/http.dart' as http;
import 'dart:io';
import 'dart:convert';

void main(List<String> arguments) async {
  await login(
    email: 'codebangkok@gmail.com',
    password: 'iloveyou',
  );
}

Future login({
  required final String email,
  required final String password,
}) async {
  final response = await http.post(
    Uri.parse('https://techcoach.azurewebsites.net/registration/login'),
    headers: {'content-type': 'application/json'},
    body: jsonEncode({
      'email': email,
      'password': password,
    }),
  );

  if (response.statusCode != HttpStatus.ok) {
    print('Response: ${response.statusCode}');
    return;
  }

  final json = jsonDecode(response.body);
  final user = User.fromJson(json);
  print('First Name: ${user.firstName}');
  print('Last Name: ${user.lastName}');
  print('Email: ${user.email}');
  print('Gender: ${user.gender.name}');
  print('JWT Token: ${user.jwtToken}');
}

class User {
  final int id;
  final String firstName;
  final String lastName;
  final String email;
  final Gender gender;
  final String jwtToken;
  User({
    required this.id,
    required this.firstName,
    required this.lastName,
    required this.email,
    required this.gender,
    required this.jwtToken,
  });

  factory User.fromJson(Map<String, dynamic> json) => User(
        id: json['id'],
        firstName: json['firstName'],
        lastName: json['lastName'],
        email: json['email'],
        gender: Gender.fromJson(json['gender']),
        jwtToken: json['jwtToken'],
      );
}

7. ตัวอย่างที่ 4 การเรียก Authorized API แบบ GET ด้วยการใช้ JWT Token

URL: https://techcoach.azurewebsites.net/registration/users

7.1 สร้างฟังชั่น getUsers แบบ async รับ jwt token เข้ามา แล้วเรียกฟังชั่น http.get แล้วส่ง URL เข้าไปดังนี้

Future getUsers({required String jwtToken}) async {
  final response = await http.get(
    Uri.parse('https://techcoach.azurewebsites.net/registration/users'),
  );
}

7.2 เพิ่ม Authorization: Bearer เข้าไปที่ headers นำค่า jwt token ที่ได้จากการ login มาใส่

final response = await http.get(
  Uri.parse('https://techcoach.azurewebsites.net/registration/users'),
  headers: {'authorization': 'Bearer $jwtToken'},
);

7.3 ตรวจสอบว่าถ้าสถานะ ok (200) ก็พิมพ์ผลลัพธ์ที่ได้ออกมาดู

if (response.statusCode != HttpStatus.ok) {
  print('Response: ${response.statusCode}');
  return;
}

print(response.body);

7.4 ที่ฟังชั่น main ให้เรียกฟังชั่น getUsers ตัวอย่างดังนี้

void main(List<String> arguments) async {
  final jwtToken = ''; //นำค่า jwt ที่ได้จากการ login มาใส่ที่นี่
  await getUsers(jwtToken: jwtToken);
}

ผลลัพธ์ที่ได้หลังจากการรันคำสั่ง

dart run
[{"id":1,"firstName":"Code","lastName":"Bangkok","email":"codebangkok@gmail.com","gender":{"id":1,"name":"ชาย"}}]

โค้ดทั้งหมด

import 'package:http/http.dart' as http;
import 'dart:io';
import 'dart:convert';

void main(List<String> arguments) async {
  final jwtToken = ''; //นำค่า jwt ที่ได้จากการ login มาใส่ที่นี่
  await getUsers(jwtToken: jwtToken);
}

Future getUsers({required String jwtToken}) async {
  final response = await http.get(
    Uri.parse('https://techcoach.azurewebsites.net/registration/users'),
    headers: {'authorization': 'Bearer $jwtToken'},
  );

  if (response.statusCode != HttpStatus.ok) {
    print('Response: ${response.statusCode}');
    return;
  }

  print(response.body);
}

Future login({
  required final String email,
  required final String password,
}) async {
  final response = await http.post(
    Uri.parse('https://techcoach.azurewebsites.net/registration/login'),
    headers: {'content-type': 'application/json'},
    body: jsonEncode({
      'email': email,
      'password': password,
    }),
  );

  if (response.statusCode != HttpStatus.ok) {
    print('Response: ${response.statusCode}');
    return;
  }

  final json = jsonDecode(response.body);
  final user = User.fromJson(json);
  print('First Name: ${user.firstName}');
  print('Last Name: ${user.lastName}');
  print('Email: ${user.email}');
  print('Gender: ${user.gender.name}');
  print('JWT Token: ${user.jwtToken}');
}

Future signup({
  required final String firstName,
  required final String lastName,
  required final String email,
  required final String password,
  required final int genderId,
}) async {
  final response = await http.post(
    Uri.parse('https://techcoach.azurewebsites.net/registration/users'),
    headers: {'content-type': 'application/json'},
    body: jsonEncode({
      'firstName': firstName,
      'lastName': lastName,
      'email': email,
      'password': password,
      'genderId': genderId,
    }),
  );

  if (response.statusCode != HttpStatus.ok) {
    print('Response: ${response.statusCode}');
    return;
  }

  print('signup success');
}

Future getGenders() async {
  final response = await http.get(
    Uri.parse('https://techcoach.azurewebsites.net/registration/genders'),
  );

  if (response.statusCode != HttpStatus.ok) {
    print('Response: ${response.statusCode}');
    return;
  }

  final json = jsonDecode(response.body) as List;
  final genders = json.map((e) => Gender.fromJson(e)).toList();
  for (final gender in genders) {
    print('id: ${gender.id}, name: ${gender.name}');
  }
}

class Gender {
  final int id;
  final String name;
  Gender({
    required this.id,
    required this.name,
  });

  factory Gender.fromJson(Map<String, dynamic> json) => Gender(
        id: json['id'],
        name: json['name'],
      );
}

class User {
  final int id;
  final String firstName;
  final String lastName;
  final String email;
  final Gender gender;
  final String jwtToken;
  User({
    required this.id,
    required this.firstName,
    required this.lastName,
    required this.email,
    required this.gender,
    required this.jwtToken,
  });

  factory User.fromJson(Map<String, dynamic> json) => User(
        id: json['id'],
        firstName: json['firstName'],
        lastName: json['lastName'],
        email: json['email'],
        gender: Gender.fromJson(json['gender']),
        jwtToken: json['jwtToken'],
      );
}

ติดตามผลงานได้ที่

Page: https://fb.com/CodeBangkok
Group: https://fb.com/groups/msdevth
Blog: https://dev.to/codebangkok
YouTube: https://youtube.com/CodeBangkok

Agenda

Prerequisite

1. สร้างโปรเจ็ค แล้ว migrate ให้ dart ซัพพอร์ท null safety

2. ติดตั้ง http package

3. เตรียม API

4. ตัวอย่างที่ 1 การเรียก API แบบ GET กับการดึงค่า Gender

4.1 import http,io,convert package แล้วสร้างฟังชั่น getGender แบบ async

4.2 เขียนโปรแกรมที่ฟังชั่น getGenders เรียกฟังชั่น http.get แล้วส่ง URL เข้าไปดังนี้

4.2 ตรวจสอบว่าถ้าสถานะไม่ใช่ ok (200) ก็จะหยุดการทำงาน

4.3 พิมพ์ผลที่ได้ออกมาดูก่อน

4.3 เปลี่ยนที่ฟังชั่น main เป็นแบบ async แล้วเรียกฟังชั่น getGenders

4.4 สร้างคลาส Gender โดยมี id กับ name เป็น arribute พร้อมกับสร้าง constructor เพื่อรับค่าด้วย

4.4 เพิ่ม factory constructor ให้กับ Gender เพื่อความสะดวกในการแปลงจาก Map เป็น Object

4.5 แก้ไขฟังชั่น getGenders ลบบรรทัด print ออกแล้วเพิ่มคำสั่ง jsonDecode เพื่อแปลงจาก JSON String ให้เป็น List ของ Map

4.6 ใช้ map เพื่อแปลงจาก Map ให้กลายเป็น List ของ Gender

4.6 แสดงผลที่ได้จาก List ของ Gender

5. ตัวอย่างที่ 2 การเรียก API แบบ POST กับการลงทะเบียน User โดยจะต้องส่ง payload ในรูปแบบ JSON ที่ body ด้วย

5.1 สร้างฟังชั่น signup แบบ async รับพารามิเตอร์ที่ต้องการ แล้วเรียกฟังชั่น http.post แล้วส่ง URL เข้าไปดังนี้

5.2 เพิ่ม content-type: application/json เข้าไปที่ headers

5.3 ที่ body สร้าง Map ของคีย์ต่างๆที่ payload ต้องการ แล้วใช้ jsonEncode เพื่อแปลงจาก Map ให้เป็น JSON String

5.4 ตรวจสอบว่าถ้าสถานะ ok (200) แสดงผลคำว่า signup success

5.5 ที่ฟังชั่น main ให้เรียกฟังชั่น signup ตัวอย่างดังนี้

6. ตัวอย่างที่ 3 การเรียก API แบบ POST กับการ Login โดยจะต้องส่ง payload ในรูปแบบ JSON ที่ body และรับค่า response กลับมาด้วย

6.1 สร้างฟังชั่น login แบบ async รับพารามิเตอร์ที่ต้องการ แล้วเรียกฟังชั่น http.post แล้วส่ง URL เข้าไปดังนี้

6.2 เพิ่ม content-type: application/json เข้าไปที่ headers

6.3 ที่ body สร้าง Map ของคีย์ต่างๆที่ payload ต้องการ แล้วใช้ jsonEncode เพื่อแปลงจาก Map ให้เป็น JSON String

6.4 ตรวจสอบว่าถ้าสถานะไม่ใช่ ok (200) ก็จะหยุดการทำงาน

6.5 สร้างคลาส User โดยมี arribute ต่างๆตาม response พร้อมกับสร้าง constructor เพื่อรับค่าด้วย

6.6 เพิ่ม factory constructor ให้กับ User เพื่อความสะดวกในการแปลงจาก Map เป็น Object

6.7 แก้ไขฟังชั่น login เพิ่มคำสั่ง jsonDecode เพื่อแปลงจาก JSON String ไปเป็น Map

6.8 แปลงจาก Map ให้กลายเป็น User object ด้วย fromJson

6.9 แสดงผลที่ได้จาก User object

6.10 ที่ฟังชั่น main ให้เรียกฟังชั่น login ตัวอย่างดังนี้

7. ตัวอย่างที่ 4 การเรียก Authorized API แบบ GET ด้วยการใช้ JWT Token

7.1 สร้างฟังชั่น getUsers แบบ async รับ jwt token เข้ามา แล้วเรียกฟังชั่น http.get แล้วส่ง URL เข้าไปดังนี้

7.2 เพิ่ม Authorization: Bearer เข้าไปที่ headers นำค่า jwt token ที่ได้จากการ login มาใส่

7.3 ตรวจสอบว่าถ้าสถานะ ok (200) ก็พิมพ์ผลลัพธ์ที่ได้ออกมาดู

7.4 ที่ฟังชั่น main ให้เรียกฟังชั่น getUsers ตัวอย่างดังนี้

ติดตามผลงานได้ที่

Read next

I Found The CLEANEST Loading Animation EVER!

Information Writing: Tips And Examples For Higher Reporting

Encryption and Key Management Strategies for Financial Workloads

Top React Trends to Watch in 2024