ReactNativeAuth

ตอบสนองแอพรับรองการรับรองความถูกต้องดั้งเดิม

โฟลว์การรับรองความถูกต้องของผู้ใช้ที่สมบูรณ์สำหรับแอปพลิเคชันมือถือด้วย React Native, Expo, AWS Amplify, React-Navigation และ Native-Base

ภาพรวม

เทคโนโลยีที่ใช้ในแอพนี้มีดังต่อไปนี้:

• การนำทางทำด้วย: React-Navigation

• Front End: Expo

• เค้าโครง: ฐานพื้นเมือง

• Back End: AWS ขยาย

โฟลว์การรับรองความถูกต้อง

• ผู้ใช้จะถูกนำไปที่หน้าจอต้อนรับ

• ผู้ใช้สามารถลงทะเบียนลงชื่อเข้าใช้ขอเปลี่ยนรหัสผ่านนำทางระหว่างหน้าจอ

• อินพุตโทรศัพท์ระหว่างประเทศรวมอยู่ในหน้าจอการลงทะเบียน

• ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าจอหลักหลังจากเข้าสู่ระบบ

• ผู้ใช้สามารถนำทางระหว่างหน้าจอโดยใช้ Tab Navigator ด้านล่างหรือ Navigator ลิ้นชัก

• ผู้ใช้จะถูกบันทึกไว้จนกว่าพวกเขาจะลงทะเบียนจากแอพ

ข้อกำหนดเบื้องต้น

• Expo CLI

  • npm install -g expo-cli

• บัญชี AWS

• โหนด JS กับ NPM

• AWS ขยาย CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (ลิงก์สำหรับวิดีโอทีละขั้นตอน)

การกำหนดค่าโครงการ

1. โคลน repo นี้ไปยังเครื่องในพื้นที่ของคุณ

 git clone https://github.com/yhenni1989/ReactNativeAuth.git

cd ReactNativeAuth

2. เริ่มต้นโครงการ AWS Amplify

 amplify init

ทำตามคำแนะนำเดียวกันด้านล่าง

3. กำหนดค่าพูลผู้ใช้ Amazon Cognito เพื่อจัดเก็บข้อมูลรับรองผู้ใช้

 amplify add auth

# When prompt, choose: Yes, use the default configuration.

4. ถึงเวลาปรับใช้โครงการของคุณกับ AWS

 amplify push

Are you sure you want to continue? Yes

หลังจากดำเนินการอัตโนมัติไม่กี่นาทีแอมพลิฟายเออร์ CLI จะสร้างกลุ่มผู้ใช้ Amazon Cognito และกลุ่มข้อมูลประจำตัวเพื่อจัดเก็บผู้ใช้ crendentials

การรันแอปพลิเคชัน

1. ติดตั้งการพึ่งพาไคลเอนต์

 yarn

# or

npm install

2. เปิดใช้แอพ React Native ในเครื่องจำลองของคุณภายใต้ไดเรกทอรีโครงการของคุณ

 expo start --ios

# or

expo start --android

ทีละขั้นตอนการสอน

• ชุดบทความเต็มรูปแบบที่มีรายละเอียดกระบวนการอาคารของแอพนี้สามารถพบได้ที่นี่

• วิดีโอสาธิตของโฟลว์การตรวจสอบความถูกต้องพบได้ที่นี่